複数の jQuery 電子メール フィールド フォーム検証を処理するための最適なリファクタリング

StackOverflow https://stackoverflow.com/questions/69107

質問

複数のメールアドレスに対応できるように添付コードをリファクタリングする最善の方法は何ですか?

添付された HTML/jQuery は完成しており、最初の電子メール アドレスで機能します。他の 2 つは、コードをコピー/ペーストして変更することでセットアップできます。ただし、複数の電子メール アドレス フィールドを処理できるように既存のコードをリファクタリングしたいと考えています。

<html>
<head>
    <script src="includes/jquery/jquery-1.2.6.min.js" type="text/javascript"></script>
    <script language="javascript">
        $(document).ready(function() {
            var validateUsername = $('#Email_Address_Status_Icon_1');

            $('#Email_Address_1').keyup(function() {
                var t = this;
                if (this.value != this.lastValue) {
                    if (this.timer) clearTimeout(this.timer);
                    validateUsername.removeClass('error').html('Validating Email');

                    this.timer = setTimeout(function() {
                        if (IsEmail(t.value)) {
                            validateUsername.html('Valid Email');
                        } else {
                            validateUsername.html('Not a valid Email');
                        };
                    }, 200);

                    this.lastValue = this.value;
                }
            });
        });

        function IsEmail(email) {
            var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            if (regex.test(email)) return true;
            else return false;
        }  
    </script>
</head>
<body>
    <div>
        <label for="Email_Address_1">Friend #1</label></div>
        <input type="text" ID="Email_Address_1">
        <span id="Email_Address_Status_Icon_1"></span>
    </div>
    <div>
        <label for="Email_Address_2">Friend #2</label></div>
    <input type="text" id="Email_Address_2">
        <span id="Email_Address_Status_Icon_2"></span>
    </div>
    <div>
        <label for="Email_Address_3">Friend #3</label></div>
    <input type="text" id="Email_Address_3">
        <span id="Email_Address_Status_Icon_3"></span>
    </div>
    </form>
</body>
</html>
役に立ちましたか？

解決

電子メール フィールドに ID を使用する代わりに、それぞれにクラスを与えることができます。

<div>
    <label for="Email_Address_1">Friend #1</label></div>
    <input type="text" class="email">
    <span></span>
</div>
<div>
    <label for="Email_Address_2">Friend #2</label></div>
    <input type="text" class="email">
    <span></span>
</div>
<div>
    <label for="Email_Address_3">Friend #3</label></div>
    <input type="text" class="email">
    <span></span>
</div>

次に、$("#Email_Address_Status_Icon_1") を選択する代わりに、$("input.email") を選択すると、クラス email のすべての入力要素の jQuery でラップされたセットが得られます。

最後に、ID を使用してステータス アイコンを明示的に参照する代わりに、単に次のように言うこともできます。

$(this).next("span").removeClass('error').html('Validating Email');

「this」は電子メールフィールドになるため、「this.next()」はその次の兄弟を与えます。意図した結果が得られることを確認するために、その上に「スパン」セレクターを適用します。$(this).next() も同様に機能します。

このようにして、ステータス アイコンを相対的に参照します。

お役に立てれば！

他のヒント

ありがとう！提案された変更を加えた完成したリファクタリングは次のとおりです。

<script language="javascript">
        $(document).ready(function() {
            $('#Email_Address_1').keyup(function(){Update_Email_Validate_Status(this)});
            $('#Email_Address_2').keyup(function() { Update_Email_Validate_Status(this)});
            $('#Email_Address_3').keyup(function() { Update_Email_Validate_Status(this)});            
        });

        function Update_Email_Validate_Status(field) {
            var t = field;
            if (t.value != t.lastValue) {
                if (t.timer) clearTimeout(t.timer);
                $(t).next("span").removeClass('error').html('Validating Email');

                t.timer = setTimeout(function() {
                    if (IsEmail(t.value)) {
                        $(t).next("span").removeClass('error').html('Valid Email');
                    } else {
                    $(t).next("span").removeClass('error').html('Not a valid Email');
                    };
                }, 200);

                t.lastValue = t.value;
            }
        }

        function IsEmail(email) {
            var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            if (regex.test(email)) return true;
            else return false;
        }  
    </script>

私ならこうします:

$(document).ready(function() {
        $('.validateEmail').keyup(function(){Update_Email_Validate_Status(this)});            
    });

次に、すべての電子メール入力に class='validateEmail' を追加します。

あるいは調べてください フォーム検証プラグイン 私はこれをよく使っていますが、非常に柔軟で使いやすいです。再発明の手間を省きます...

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top