기본 양식 유효성 검사 스크립트를 작성하고 있습니다. 기본적으로 양식을 살펴보면 각 필드가 다음과 같이 확인됩니다.
<p>
<label>Full Name *</label>
<input type="text" id="fullName" value="" onblur="validate('FullName', 'fullName');" />
<span class="formHint" id="hintFullName">Enter your full name</span>
<span id="errorFullName"></span>
<span class="success" id="successFullName"><img src="images/tick.png" /></span>
</p>
이 모든 기능은 내가 만든 유효성 검사 함수를 호출하여 잘 작동하므로 필드 이름을 전달할 수 있고 입력 여부 등을 확인합니다. 이것은 모두 괜찮습니다. 아래는 유효성 검사 기능입니다.
function validate(field) {
// Get the value of the input field being submitted
value = document.getElementById(field).value;
// Set the error field tag in the html
errorField = 'error' + field;
// Set the success field
successField = 'success' + field;
if (value != '') {
document.getElementById(successField).style.display = 'block';
document.getElementById(errorField).style.display = 'none';
} else {
document.getElementById(successField).style.display = 'none';
document.getElementById(errorField).style.display = 'block';
}
}
이제 제 질문은 onblur를 사용하여 즉석에서 검증 한 후 제출할 때 진행하는 가장 좋은 방법은 무엇입니까? 모든 양식 필드를 수동으로 확인하는 다른 함수를 작성해야합니까 아니면 더 나은 방법이 있습니까?
한동안 고민해 왔지만 일단 제출 한 후 확인하는 가장 좋은 방법은 생각할 수없는 것 같습니다.
이 중 하나라도 이해가되지 않으면 죄송합니다. 지금 몇 시간 동안 혼란스러워했습니다.
미리 감사드립니다.
아, 검증!
네, 수동으로 확인해야합니다. "수동"이 어떻게 다른지. 다음과 같이 똑 바르고 무차별적인 매뉴얼이 될 수 있습니다.
function handleOnSubmit(e) {
validate('FullName');
validate('ZipCode');
validate('City');
// Loop through all error fields and see if any are present
}
아시다시피 매우 효율적이지 않습니다 ...
대신, 그것을 수행하는 루프를 작성합시다!
그러나 그 전에 validate오류가 있거나없는 경우 true / false를 반환하도록 함수를 업데이트하는 것이 좋습니다 .
다음과 같은 것 :
if (value != '') {
document.getElementById(successField).style.display = 'block';
document.getElementById(errorField).style.display = 'none';
return true;
} else {
document.getElementById(successField).style.display = 'none';
document.getElementById(errorField).style.display = 'block';
return false;
}
좋구나!
이제 validate모든 양식 요소로 함수를 호출 할 수있는 부모 유효성 검사기를 만들 수 있습니다 .
다음과 같은 것 :
function handleOnSubmit(e) {
// Query your elements some how
var inputs = document.forms[0].getElementsByTagName('input');
// Loop your elements
for (i = 0, len = inputs.length; i < len; i++) {
if( validate(inputs[i].id) === false) {
// Error occurred - we'll prevent the form submission
e.preventDefault();
}
}
}
데모 용 JSFiddle은 다음과 같습니다. http://jsfiddle.net/ww2grozz/
다른 방법 (이미 검증 된 요소에 대해 여러 검증을 다시 실행하지 않으려는 경우)은 "검증 된"개체의 상태를 유지하는 것입니다. 그런 다음이를 확인할 수 있습니다.
이 같은:
var validated = {};
function validate(field) {
// Existing logic
if (value != '') {
validated[field] = true;
} else {
validated[field] = false;
}
}
그런 다음 위의 부모 유효성 검사기로 돌아갑니다.
function handleOnSubmit(e) {
// Query your elements
var inputs = document.forms[0].getElementsByTagName('input');
// Loop your elements
for (i = 0, len = inputs.length; i < len; i++) {
var name = inputs[i].id;
if (!validated[name]) {
// Prevents submission
e.preventDefault();
// Call validate
validate(name);
}
}
}
두 번째 바이올린 : http://jsfiddle.net/ww2grozz/2/
마지막으로, 이것이 서버로 이동한다면 ... 서버 측 유효성 검사를 잊지 마십시오!
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다