Лучший рефакторинг для обработки проверки формы с несколькими полями электронной почты jQuery
-
09-06-2019 - |
Вопрос
Каков наилучший способ реорганизовать прикрепленный код для размещения нескольких адресов электронной почты?
Прилагаемый 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>
Решение
Вместо того чтобы использовать идентификаторы для полей электронной почты, вы можете присвоить каждому из них класс:
<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.
Наконец, вместо того, чтобы явно ссылаться на значок состояния с идентификатором, вы могли бы просто сказать:
$(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' ко всем вашим входным данным электронной почты.
В качестве альтернативы загляните в Плагин для проверки формы я часто использовал это, и оно очень гибкое и приятное в использовании.Избавляет вас от необходимости изобретать заново...