我对 javascript 很陌生,一直在尝试正则表达式。我正在尝试创建一个简单的密码/用户名验证表单。我相信我的正则表达式是错误的,并且我在某个地方搞乱了我的语法,因为这不会运行。谁能告诉我我做错了什么?谢谢。
这是我的代码:
<html>
<head>
<title>Username/Password Validation</title>
<script type="text/javascript">
function check(username, password, passwordAgain)
{
// at least one number, one lowercase and one uppercase letter
// at least six - ten characters that are letters, numbers or the underscore
var pwd = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])\w{6,10}$/;
// at least six - ten characters that are letters, numbers or the underscore
//the first character CANNOT start with a digit
var user = /^!=.*\d\w{6,10}$/;
if (pwd.test(password)) && (user.test(username)) && (password == passwordAgain)
{
alert("Passed Validation");
}
else if (password != passwordAgain)
{
alert(Your passswords don't match.");
}
else if !(pwd.test(password)) && !(user.test(username))
{
alert(username + password + " Your password and username are not valid.");
}
else if !(pwd.test(password)) && (user.test(username))
{
alert(password + " This password is not valid.");
}
else
{
alert(username +" This username is not valid.");
}
</script>
</head>
<body>
<form>
<h3> Username-Password Validation </h3>
<ul>
<li> The username must be between 6 and 10 characters long. </li>
<li> The username must contain only letters and digits. </li>
<li> The username cannot begin with a digit. </li>
<li> The password and the repeat password must match. </li>
<li> The password must be between 6 and 10 characters. </li>
<li> The password must contain only letters and digits. </li>
<li> The password must have at least one lower case letter,<br /> at
least one upper case letter, and at least one digit. </li>
</ul>
Username: <input type = 'text' id = 'username' /> <br />
Password: <input type = 'text' id = 'password' /> <br />
Reenter Password: <input type = 'text' id = 'passwordAgain' /> <br/>
<p>
<input type ='button' onclick='check(username, password, passwordAgain )' value='Submit' />
<input type ='reset' value='Clear' />
</p>
</form>
</body>
</html>
*编辑***
<html>
<head>
<title>Username/Password Validation</title>
<script type="text/javascript">
function check(username, password, passwordAgain){
//List of possible error messages
var errorList = '';
// at least six - ten characters that are letters, numbers or the underscore
var sixtotencharacters = /\w{6,10}$/;
// at least one number, one lowercase and one uppercase letter
var oneofeach = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])/;
//first character does not start with digit
var firstDigit = /^!=.*\d/;
//Begin validation
if (sixtotencharacters.test(password) && sixtotencharacters.test(username) && oneofeach.test(password) && firstDigit.test(username) && password == passwordAgain)
{
alert("Passed Validation");
}
else
{
if (password != passwordAgain){
errorlist = 'Your passswords don\'t match. ';
}if (!sixtotencharacters.test(username)){
errorlist = errorlist + 'Username needs to be six to ten characters. ';
}if (!sixtotencharacters.test(password)){
errorlist = errorlist + 'Password needs to be six to ten characters. ';
}if (!oneofeach.test(password)){
errorlist = errorlist + 'You need to have at least one number, one lowercase and one uppercase letter. ';
}if (!firstDigit.test(username)){
errorlist = errorlist + 'First character of username can\'t be a digit. ';
}
alert(errorlist);
}
</script>
</head>
<body>
<form>
<h3> Username-Password Validation </h3>
<ul>
<li> The username must be between 6 and 10 characters long. </li>
<li> The username must contain only letters and digits. </li>
<li> The username cannot begin with a digit. </li>
<li> The password and the repeat password must match. </li>
<li> The password must be between 6 and 10 characters. </li>
<li> The password must contain only letters and digits. </li>
<li> The password must have at least one lower case letter,<br /> at
least one upper case letter, and at least one digit. </li>
</ul>
Username: <input type = 'text' id = 'username' /> <br />
Password: <input type = 'text' id = 'password' /> <br />
Reenter Password: <input type = 'text' id = 'passwordAgain' /> <br/>
<p>
<input type ='button' onclick='check(username, password, passwordAgain )' value='Submit' />
<input type ='reset' value='Clear' />
</p>
</form>
</body>
</html>
**这是最新的更新,使 Jason 的建议更进一步< em>* 用户名/密码验证
<script>
window.onload = check() {
document.getElementById('btnSubmit').addEventListener('click', check() {
var errors = [];
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
var passwordAgain = document.getElementById('passwordAgain').value;
var errorList = document.getElementById("errors");
errorList.innerHTML = '';
if (password != passwordAgain) { errors.push("Your passwords do not match") }
var hasNumber = password.match(/\d+/);
if (hasNumber == null) { errors.push("You did not include a number in your password") }
var hasUpper = password.match(/[A-Z]+/);
if (hasUpper == null) { errors.push("You did not include an Uppercase Letter in your password") }
var hasLower = password.match(/[a-z]+/);
if (hasLower == null) { errors.push("You did not include an Lowercase Letter in your password") }
var hasAtleast6lessThan10password = password.length < 6 || password.length > 10;
if (hasAtleast6lessThan10password) { errors.push("Your password must be at least 6 characters long and cannot be more than 10") }
var hasAtleast6lessThan10username = username.length < 6 || username.length > 10;
if (hasAtleast6lessThan10username) { errors.push("Your username must be at least 6 characters long and cannot be more than 10") }
var firstCharacterNotDigit = username.match(/^[^\d]/);
if (firstCharacterNotDigit == null) { errors.push("Your username may not begin with a number") }
if (errors.length > 0) {
for (var i = 0; i < errors.length; i++) {
var errorElem = document.createElement("li");
errorElem.innerHTML = errors[i];
errorList.appendChild(errorElem);
}
}
});
};
</script>
</head>
<body>
<form>
<h3> Username-Password Validation </h3>
<ul>
<li> The username must be between 6 and 10 characters long. </li>
<li> The username must contain only letters and digits. </li>
<li> The username cannot begin with a digit. </li>
<li> The password and the repeat password must match. </li>
<li> The password must be between 6 and 10 characters. </li>
<li> The password must contain only letters and digits. </li>
<li> The password must have at least one lower case letter,<br /> at
least one upper case letter, and at least one digit. </li>
</ul>
Username: <input type = 'text' id = 'username' size="10" /> <br />
Password: <input type = 'text' id = 'password' size="10"/> <br />
Reenter Password: <input type = 'text' id = 'passwordAgain' size="10" /> <br/>
<p>
<input type ='button' onclick='check()' value='Submit' />
<input type ='reset' value='Clear' />
</p>
</form>
</body>
</html>
最佳答案
在我看来,使用单个正则表达式来验证密码是否符合所有规则是一个错误,原因有两个。
- future 改变规则将是一项艰巨的任务
- 您无法告诉最终用户他们违反了哪一部分。如果他们忘记添加数字,您不能说“您需要添加至少一个数字”。相反,您只能说验证失败“密码无效”。
我建议为每个规则使用一个单独的、简单的正则表达式,然后运行它们,收集一系列违反规则的错误,然后立即向用户提供所有错误。这将带来更好的用户体验,并使您的验证工作变得更加轻松。
更新:这是我的想法:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Password Checking with JavaScript</title>
<script>
window.onload = function() {
document.getElementById('btnSubmit').addEventListener('click', function() {
var errors = [];
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
var errorList = document.getElementById("errors");
errorList.innerHTML = '';
var hasNumber = password.match(/\d+/);
if (hasNumber == null) { errors.push("You did not include a number in your password") }
var hasUpper = password.match(/[A-Z]+/);
if (hasUpper == null) { errors.push("You did not include an Uppercase Letter in your password") }
var hasLower = password.match(/[a-z]+/);
if (hasLower == null) { errors.push("You did not include an Lowercase Letter in your password") }
var hasAtleast8lessThan10 = username.length < 6 || username.length > 10;
if (hasAtleast8lessThan10) { errors.push("You username must be at least 8 characters long and cannot be more than 10") }
var fisrtCharacterNotDigit = username.match(/^[^\d]/);
if (fisrtCharacterNotDigit == null) { errors.push("Your username may not begin with a number") }
if (errors.length > 0) {
for (var i = 0; i < errors.length; i++) {
var errorElem = document.createElement("li");
errorElem.innerHTML = errors[i];
errorList.appendChild(errorElem);
}
}
});
};
</script>
</head>
<body>
<ul id="errors"></ul>
<input type="textbox" name="username" id="username" size="3">
<input type="textbox" name="password" id="password" size="3">
<button id="btnSubmit" >Check Password</button>
</body>
</html>
更新:我正在更新我的答案,以便为用户提供满足其需求的附加解决方案。
我对上面的第三次更新脚本所做的更改是:
- window.onload = check() {... 行不正确。如果没有关键字“function”,您就不会给它一个可以使用的函数。另外,由于您使用内联单击事件触发该函数,因此不需要执行此加载,也不需要下一行的单击事件监听器,因此我也将其删除。
行:
var errorList = document.getElementById("错误");
errorList.innerHTML = '';
导致语法错误,因为 div“错误”不再存在,因此不需要它们。
- 我更新了最后一部分以抛出警报消息,而不是 将消息整齐地显示在表单上方。不知道为什么你会 想要这个,但是好吧。你可能至少想进去把它们弄得更整洁。
希望这有帮助
<!DOCTYPE html >
<html>
<head>
<meta charset="UTF-8">
<title>Password Checking with JavaScript</title>
<script>
function check() {
var errors = [];
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
var passwordAgain = document.getElementById('passwordAgain').value;
if (password != passwordAgain) { errors.push("Your passwords do not match") }
var hasNumber = password.match(/\d+/);
if (hasNumber == null) { errors.push("You did not include a number in your password") }
var hasUpper = password.match(/[A-Z]+/);
if (hasUpper == null) { errors.push("You did not include an Uppercase Letter in your password") }
var hasLower = password.match(/[a-z]+/);
if (hasLower == null) { errors.push("You did not include an Lowercase Letter in your password") }
var hasAtleast6lessThan10password = password.length < 6 || password.length > 10;
if (hasAtleast6lessThan10password) { errors.push("Your password must be at least 6 characters long and cannot be more than 10") }
var hasAtleast6lessThan10username = username.length < 6 || username.length > 10;
if (hasAtleast6lessThan10username) { errors.push("Your username must be at least 6 characters long and cannot be more than 10") }
var firstCharacterNotDigit = username.match(/^[^\d]/);
if (firstCharacterNotDigit == null) { errors.push("Your username may not begin with a number") }
if (errors.length > 0) {
alert(errors.join('\r\r'));
}
};
</script>
</head>
<body>
<form>
<h3> Username-Password Validation </h3>
<ul>
<li> The username must be between 6 and 10 characters long. </li>
<li> The username must contain only letters and digits. </li>
<li> The username cannot begin with a digit. </li>
<li> The password and the repeat password must match. </li>
<li> The password must be between 6 and 10 characters. </li>
<li> The password must contain only letters and digits. </li>
<li> The password must have at least one lower case letter,<br /> at
least one upper case letter, and at least one digit. </li>
</ul>
Username: <input type = 'text' id = 'username' size="10" /> <br />
Password: <input type = 'text' id = 'password' size="10"/> <br />
Reenter Password: <input type = 'text' id = 'passwordAgain' size="10" /> <br/>
<p>
<input type ='button' onclick='check()' value='Submit' />
<input type ='reset' value='Clear' />
</p>
</form>
</body>
</html>
关于javascript - Javascript 验证中的正则表达式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7697836/