Это моя домашняя работа, и это мой первый раз, чтобы сделать валидацию формы. Следующие коды - это мой код HTML и код JavaScript соответственно.
Код HTML:
<html>
<head>
<script src="/validate_form.js" type="text/javascript"></script>
</head>
<body>
<table>
<form name="register" method="post" action="">
<tr><td>First Name:</td><td><input type="text" id="firstname"/></td></tr>
<tr><td>Surname:</td><td><input type="text" id="surname"/></td></tr>
<tr><td>Gender:</td><td><input type="text" id="gender"/></td></tr>
<tr><td>Birthday - Day:</td><td><input type="text" id="dob"/></td></tr>
<tr><td>Month:</td><td><input type="text" id="month"/></td></tr>
<tr><td>Year:</td><td><input type="text" id="year"/></td></tr>
<tr><td>Yahoo ID:</td><td><input type="text" id="yahoo_id"/></td></tr>
<tr><td>Password:</td><td><input type="text" id="password"/></td></tr>
<tr><td>Retype password: </td>
<td><input type="text" id="retype"/></td></tr>
<tr><td>Question 1:</td><td><input type="text" id="q1"/></td></tr>
<tr><td>Answer 1:</td><td><input type="text" id="a1"/></td></tr>
<tr><td>Question 2:</td><td><input type="text" id="q2"/></td></tr>
<tr><td>Answer 2:</td><td><input type="text" id="a2"/></td></tr>
<tr><td><input type="submit" value="Confirm" onclick="validate_form ()"/></td><td></td></tr>
</form>
</table>
</body>
</html>
Код JavaScript:
function validate_form ()
{
var first = document.getElementById("firstname").value; /*get value from the IDs*/
var sur = document.getElementById("surname").value;
var sex = document.getElementById("gender").value;
var day = document.getElementById("dob").value;
var month = document.getElementById("month").value;
var year = document.getElementById("year").value;
var yahooid = document.getElementById("yahoo_id").value;
var ps = document.getElementById("password").value;
var retype_ps = document.getElementById("retype").value;
var ques1 = document.getElementById("q1").value;
var ans1 = document.getElementById("a1").value;
var ques2 = document.getElementById("q2").value;
var ans2 = document.getElementById("a2").value;
var error = ""; /*Regular expressions for matching purpose*/
var val_name = /^[a-zA-Z]{1,}$/;
var val_dob = /^[0-9]$/;
var val_yahoo = /^[a-zA-Z0-9_]$/;
var val_pass = /^[a-zA-Z0-9]$/;
if (first == null || surname == null || !val_name.test(first) || !val_name.test(sur) ) /*Validate firstname and surname*/
{
error += "Invalid firstname and/or surname.\n";
}
else if (sex == null) /*Validate gender*/
{
error += "Invalid gender.\n";
}
else if (day == null || !val_dob.test(day)) /*Validate day of birth*/
{
error += "Invalid day of birth.\n";
}
else if (month == null) /*Validate month of birth*/
{
error += "Invalid month of birth.\n";
}
else if (year == null || !val_dob.test(year)) /*Validate year of birth*/
{
error += "Invalid year of birth.\n";
}
else if (yahooid == null || !val_yahoo.test(yahooid)) /*Validate Yahoo Id*/
{
error += "Invalid yahoo Id.\n";
}
else if (ps == null || !val_pass.test(ps)) /*Validate password entered*/
{
error += "Invalid password.\n";
}
else if (retype_ps == null || retype_ps != password) /*Validate retype password*/
{
error += "Retype password is different form password.\n";
}
else if (ques1 == null || ans1 == null || ques2 == null || ans2 == null) /*Validate question 1, answer 1, question 2, and answer 2*/
{
error += "Invalid Question 1 and/or Answer 1 and/or Question 2 and/or Answer 2.\n";
}
else if (error == "") /*If no error, display the following message*/
{
alert("Thank you for your registration.");
}
else /*If there are errors, display all the error messages*/
{
alert(error);
}
}
Итак, теперь проблема в том, что не так с кодами, пока окно предупреждения не появилось? Надеюсь, что ошибки могут быть указаны полностью, потому что я до сих пор не знаком с JavaScript.
Когда вы объединяете сообщения в переменной error
вы должны делать последнее, else if
в качестве независимого if
:
...
else if (ques1 == null || ans1 == null || ques2 == null || ans2 == null)
{
error += "Invalid Question 1 and/or Answer 1 and/or Question 2 and/or Answer 2.\n";
}
if (error == "") /*If no error, display the following message*/
{
alert("Thank you for your registration.");
}
else /*If there are errors, display all the error messages*/
{
alert(error);
}
ПРИМЕЧАНИЕ. Я также заметил ошибку в проверке повторения пароля, вы изменили ее имя (вы назвали его password
вместо ps
).
Я загрузил два примера в JSFiddle: http://fiddle.jshell.net/kcDBU/
У этого есть только if
вместо else if
: http://fiddle.jshell.net/kcDBU/1/
В Javascript у вас есть значения, которые считаются ложными:
- ложный,
- ноль,
- не определено,
- '',
- 0,
- NAN;
Вы должны учитывать, что ваше значение может быть "неопределенным", поэтому, если бы я был вами, я бы сделал следующее:
if (!first || !surname || !val_name.test(first) || !val_name.test(sur) )
{
error += "Invalid firstname and/or surname.\n";
}
И поставьте свой скрипт в конце тега вашего тела.
alert{error};
должен бытьalert(error);
,