处理多个jQuery电子邮件字段表单验证的最佳重构
时间：2020-03-05 18:55:04 来源:igfitidea点击:
重构添加代码以容纳多个电子邮件地址的最佳方法是什么？
随附的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>
解决方案
回答
我们可以为每个类别指定一个类别，而不是为电子邮件字段使用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>
然后，我们可以选择$(" input.email")，而不是选择$("＃Email_Address_Status_Icon_1")，这将为我们提供jQuery包装的，包含类电子邮件的所有输入元素的集合。
最后，除了简单地用id引用状态图标外，我们还可以简单地说：
$(this).next("span").removeClass('error').html('Validating Email');
" this"将是电子邮件字段，因此" this.next()"将为我们提供下一个兄弟。我们在此之上应用" span"选择器只是为了确保我们能够实现预期的目标。 $(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'添加到所有电子邮件输入中。
或者，查看一下Form Validation Plugin，我已经使用了很多，它非常灵活并且易于使用。节省重新发明...
