[英]JS function working fine with firefox and IE, but not with chrome
[英]JS working in Chrome but not Firefox or IE
以下代码提供了一个简单的注册表单,并使用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>
问题在此行上(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
浏览器尝试解释_-.
介于_
和之间的字符范围.
,并严重失败。
以下正则表达式(第55行)在Firebug中产生错误(SyntaxError:字符类中的无效范围):
/[^a-zA-Z0-9_-.@]/
试试这个吧:
/ [^ \\ w-] + / gi
现在适用于FF和IE 11。
这个正则表达式对象不是很可靠:
/[^a-zA-Z0-9_-.@]/
Chrome可以接受,但是Firefox无法理解_-.
不是字符范围,例如az
。 您可以移动-
到最后避免歧义。 最终的正则表达式变为( i
意思是不区分大小写的匹配)
/[^a-z0-9_.@-]/i
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.