1
제출 된 유효성 검사 규칙을 통과해야하는 웹 양식을 작성 중입니다. 제가 지금 당장 문제가되는 법칙은 나이가 숫자로만되어 있어야한다는 것입니다. 예를 들어 (24는 괜찮지 만 24 세는 오류를 주어야합니다).양식이 올바르게 검증되지 않습니다.
지금 당장은 숫자 콘텐츠 만 허용하고 공백을 넣지 않으려 고합니다.
또한 공간을 허용하기로하고 공백을 확인하기 위해 문
if(!(/^\S{3,}$/.test(fName))) {
errMsgHolder.innerHTML = "Name cannot contain spaces";
return false;
}
을 사용하고이 (내가 마지막에 전체 코드를 게시 할 수 있습니다)가 제대로 작동되지 않은 이름 필드가 . 그래서 나는 내 checkAge() 함수와 비슷한 것을 할 수 있다고 생각했으나 작동시키지 못했습니다. 나이 필드에 아무 것도 입력하지 않은 경우 양식은 항상 제출됩니다. 그러나 이름 입력란을 비워 두거나 유효하지 않은 입력을 입력하면 올바른 오류가 표시됩니다. 이것이 내가 내 브라우저에서 웹 콘솔을 볼 때 나는 오류를 받고되지하고 기록 된대로,
<html>
<head>
<title>Project 5</title>
</head>
<body>
<form name="myForm" id="myForm" onsubmit="return validateForm()">
First Name: <input type="text" id="name"> <br>
<span id="nameErrMsg" class="error"></span> <br />
Age: <input type="text" id="age"> <br>
<span id="ageErrMsg" class="error"></span> <br />
Street Address: <input type="text" id="address"> <br>
State: <select>
<option value="la">LA</option>
<option value="tx">TX</option>
<option value="ok">OK</option>
<option value="mi">MI</option>
<option value="az">AZ</option>
</select> <br>
Login Password: <input type="password" id="password"> <br>
<input type="submit" value="Submit"> <br>
</form>
<script type="text/javascript">
function validateForm() {
return checkName() && checkAge();
}
function checkName() {
var form = document.myForm;
var fName = form.name.value;
var errMsgHolder = document.getElementById("nameErrMsg");
if(fName.length < 3) {
errMsgHolder.innerHTML = "Please enter a name with at least three letters";
return false;
}
else if(!(/^\S{3,}$/.test(fName))) {
errMsgHolder.innerHTML = "Name cannot contain spaces";
return false;
}
else {
errMsgHolder.innerHTML = " ";
return undefined;
}
}
function checkAge() {
var form1 = document.myForm;
var personAge = form1.age.value;
var ageErr = document.getElementById("ageErrMsg");
if(/\D/.test(personAge)) {
ageErr.innerHTML = " ";
return undefined;
}
else if(!(/\D/.test(personAge))) {
ageErr.innerHTML = "Please enter a numeric age";
return false;
}
else if(personAge.length < 1) {
ageErr.innerHTML = "Please enter your age";
return false;
}
else if(!(/^\S{3,}$/.test(personAge))) {
ageErr.innerHTML = "Age cannot contain spaces";
return false;
}
}
</script>
</body>
</html>
또한 :
여기 내 코드입니다. 누구나 이것이 제대로 작동하지 않는 이유를 알아낼 수 있습니까? checkAge() 함수에서 동일한 작업을 수행하는 또 다른 방법이 있습니까?
워킹 코드로 업데이트 도움 주셔서 감사합니다. 지금까지 코드를 게시하고 싶었습니다. 올바르게 작동한다는 것입니다. 이전에 결코 만나지 못했던 문제를 만났기 때문에 이것이 동일한 문제를 가진 다른 사람들을 도울 수 있기를 바랍니다.
허용 된 응답을 구현 한 후에도 올바른 오류 메시지가 표시되지만 validateForm() 함수에서 하나의 함수 만 호출하는 경우에만 발생합니다. 이러한 함수 호출을 변수에 할당하고이 함수에서 변수를 반환하면 완벽하게 작동합니다. 도움을 다시
<html>
<head>
<title>Project 5</title>
</head>
<body>
<form name="myForm" id="myForm" onsubmit="return validateForm()">
First Name: <input type="text" id="name"> <br>
<span id="nameErrMsg" class="error"></span> <br />
Age: <input type="text" id="age"> <br>
<span id="ageErrMsg" class="error"></span> <br />
Street Address: <input type="text" id="address"> <br>
State: <select>
<option value="la">LA</option>
<option value="tx">TX</option>
<option value="ok">OK</option>
<option value="mi">MI</option>
<option value="az">AZ</option>
</select> <br>
Login Password: <input type="password" id="password"> <br>
<input type="submit" value="Submit"> <br>
</form>
<script type="text/javascript">
function validateForm() {
var ckName = checkName();
var ckAge = checkAge();
return ckName && ckAge;
}
function checkName() {
var form = document.myForm;
var fName = form.name.value;
var errMsgHolder = document.getElementById("nameErrMsg");
if(fName.length < 3) {
errMsgHolder.innerHTML = "Please enter a name with at least three letters";
return false;
}
else if(!(/^\S{3,}$/.test(fName))) {
errMsgHolder.innerHTML = "Name cannot contain spaces";
return false;
}
else {
errMsgHolder.innerHTML = " ";
return undefined;
}
}
function checkAge() {
var form1 = document.myForm;
var personAge = form1.age.value;
var ageErr = document.getElementById("ageErrMsg");
if(personAge === "") {
ageErr.innerHTML = "Please enter your age";
return false;
}
else if(/\D/.test(personAge)) {
ageErr.innerHTML = "Please enter a numeric age";
return false
}
else {
ageErr.innerHTML = " ";
return undefined;
}
}
</script>
</body>
</html>
감사 :
그래서 여기 마지막 작업 코드입니다!
흠, 아직도 같은 결과를 얻고 있습니다 –
Oh whoops, 첫 번째는 personAge 변수를 검사해야합니다. 테스트하지 말아야합니다. 답변을 업데이트 중입니다. –
감사합니다! –