以下代码提供了一个简单的注册表单,并使用JavaScript来验证用户的输入。在chrome中运行时,会出现预期的警报。但是在IE和Firefox中,页面只会在没有警报的情况下转到adduser.php,即使表格中没有输入任何内容。
CSS
.signup {
font: normal 14px helvetica;
color: #000000;
border: solid 6px #555555;
}
JS
function validate() {
var fail = "";
fail += validateForename(document.getElementById("forename").value);
fail += validateSurname(document.getElementById("surname").value);
fail += validateUsername(document.getElementById("username").value);
fail += validatePassword(document.getElementById("password").value);
fail += validateAge(document.getElementById("age").value);
fail += validateEmail(document.getElementById("email").value);
if (fail == "") return true;
else alert(fail);
return false;
}
function validateForename(str) {
if (str == "") return "No forename has been found\n";
return "";
}
function validateSurname(str) {
if (str == "") return "No surname has benn found\n";
return "";
}
function validateUsername(str) {
if (str == "") return "No username has been found\n";
if (str.length < 5) return "Username must be at least 5 characters\n";
if (/[^a-zA-Z0-9_-]/.test(str)) return "Only a-z, A-Z, 0-9, - and _ are allowed in username\n";
return "";
}
function validatePassword(str) {
if (str == "") return "Password can not be empty\n";
if (str.length < 6) return "Password must be at least 6 characters\n";
if (!/[0-9]/.test(str) || !/[a-z]/.test(str) || !/[A-Z]/.test(str)) return "Password must have at least one each of a-z, A-Z, 0-9\n";
return "";
}
function validateAge(str) {
if (isNaN(str)) return "No age has been found\n";
if (str < 18 || str > 110) return "Age must be between 18 and 110\n";
return "";
}
function validateEmail(str) {
if (str == "") return "No email address has been found\n";
if (!(str.indexOf('.') > 0 && str.indexOf('@') > 0) || /[^a-zA-Z0-9_-.@]/.test(str)) return "The email address is invalid\n";
return "";
}
HTML
<table class="signup" border="0" cellpadding="4" bgcolor="#eeeeee">
<th colspan="2" align="center">Sign Up</th>
<form method="post" action="adduser.php" onSubmit="return validate()">
<tr>
<td>Forname:</td>
<td>
<input type="text" name="forename" id="forename" maxlength="32" />
</td>
</tr>
<tr>
<td>Surname:</td>
<td>
<input type="text" name="surname" id="surname" maxlength="32" />
</td>
</tr>
<tr>
<td>Username:</td>
<td>
<input type="text" name="username" id="username" maxlength="16" />
</td>
</tr>
<tr>
<td>Password:</td>
<td>
<input type="password" name="password" id="password" maxlength="12" />
</td>
</tr>
<tr>
<td>Age:</td>
<td>
<input type="text" name="age" id="age" maxlength="3" />
</td>
</tr>
<tr>
<td>Email:</td>
<td>
<input type="text" name="email" id="email" maxlength="64" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Signup" />
</td>
</tr>
</form>
</table>
答案 0 :(得分:0)
问题在于这一行(55):
if (!(str.indexOf('.') > 0 && str.indexOf('@') > 0) || /[^a-zA-Z0-9_-.@]/.test(str)) return "The email address is invalid\n";
您声明的字符类无效:
/[^a-zA-Z0-9_-.@]/ //--> Wrong
/[^a-zA-Z0-9_.@-]/ //--> Right
浏览器尝试将_-.
解释为_
和.
之间的一系列字符,并且严重失败。
答案 1 :(得分:0)
以下正则表达式(第55行)在Firebug中产生错误(SyntaxError:字符类中的无效范围):
/ [^ A-ZA-Z0-9 _-。@] /
试试这个:
/ [^ \ W - ] + / GI
现在在FF和IE 11中为我工作。
答案 2 :(得分:0)
这个正则表达式对象不太可靠:
/[^a-zA-Z0-9_-.@]/
Chrome可以容忍这一点,但Firefox并不了解_-.
不是字符范围,例如a-z
。您可以将-
移到最后,以避免歧义。最终的正则表达式变为(i
表示不区分大小写的匹配)
/[^a-z0-9_.@-]/i