여러 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>
해결책
이메일 필드에 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")을 선택할 수 있습니다. 그러면 클래스 이메일의 모든 입력 요소가 포함된 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'을 추가하세요.
또는 다음을 살펴보십시오. 양식 검증 플러그인 나는 이것을 많이 사용해 왔으며 매우 유연하고 사용하기 좋습니다.재발명을 절약할 수 있습니다...