处理多个jQuery电子邮件字段表单验证的最佳重构-解网

问：

重构附加代码以容纳多个电子邮件地址的最佳方法是什么？

附加的 HTML/jQuery 已完成，适用于第一个电子邮件地址。我可以通过复制/粘贴和更改代码来设置其他两个。但我只想重构现有代码以处理多个电子邮件地址字段。

<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>

jQuery 电子邮件重构验证

<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>

然后，您可以选择 $（“input.email”），而不是选择 $（“#Email_Address_Status_Icon_1”），这将为您提供一个 jQuery 包装的集合，其中包含类 email 的所有输入元素。

最后，您可以简单地说，而不是用 id 显式引用状态图标：

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

'this' 将是电子邮件字段，因此 'this.next（）' 将为您提供它的下一个兄弟姐妹。我们在此基础上应用“span”选择器，以确保我们得到我们想要的东西。$（this）.next（）的工作方式相同。

这样，您就以相对方式引用状态图标。

希望这有帮助！

0赞 Brian Boatright 9/16/2008 #2

谢谢！下面是已完成的重构，其中包含您建议的更改。

<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>

0赞 Geoff 9/16/2008 #3

我会做：

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

然后将 class='validateEmail' 添加到所有电子邮件输入中。

或者，看看表单验证插件，我已经用了很多，它非常灵活，很好用。节省您重新发明的时间......

上一个：是否值得对数据库中的电子邮件地址进行加密？

下一个：如何通过垃圾邮件过滤器？

处理多个jQuery电子邮件字段表单验证的最佳重构

Best Refactor to Handle Multiple jQuery Email Field Form Validation

评论