我对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>
答案 0 :(得分:2)
在我看来,制作单个正则表达式以验证密码是否符合您的所有规则是错误的,原因有两个。
我建议为每个规则使用一个单独的,简单的正则表达式,然后通过它们收集一系列违反规则的错误,然后立即向用户提供所有这些规则。这将是一个更好的用户体验,并将使您的验证工作更多更容易。
更新:这就是我的想法:
<!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>
我从上面第3个更新的脚本所做的更改是:
行:
var errorList = document.getElementById(“errors”);
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>
答案 1 :(得分:1)
您的代码包含很多语法错误。
此:
if (pwd.test(password)) && (user.test(username)) && (password == passwordAgain)
应该是: if(pwd.test(password)&amp;&amp;(user.test(username))&amp;&amp;(password == passwordAgain))
此:
alert(Your passswords don't match.");
应该是:
alert("Your passswords don't match.");
此:
else if !(pwd.test(password)) && !(user.test(username))
应该是:
else if (!pwd.test(password) && !user.test(username))
此:
else if !(pwd.test(password)) && (user.test(username))
应该是:
else if (!pwd.test(password) && user.test(username))
答案 2 :(得分:0)
页面上还有一个错误:
errorlist = errorlist + 'First character of username can't be a digit. ';
应该是:
errorlist = errorlist + 'First character of username can\'t be a digit. ';
请记住,在文本中使用单引号(')时,请始终使用(\')。
您的网页上仍然存在多个编码语法错误,但它们无法显示所有这些错误。提高JavaScript技能的一种简单方法是安装FireBug,然后学习如何使用它。
您对代码进行评论的习惯非常好,只需学会使用/ tab字符编写代码,以使代码更清晰。可读的。
以下是我为您编辑的代码,只需将它们与原始代码进行比较即可找出错误:
<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 (password != passwordAgain){
alert("Your passswords don't match.");
}else if (!sixtotencharacters.test(username)){
errorlist = 'Username needs to be six to ten characters. ';
}else if (!sixtotencharacters.test(password)){
errorlist = errorlist + 'Password needs to be six to ten characters. ';
}else if (!oneofeach.test(password)){
errorlist = errorlist + 'You need to have at least one number, one lowercase and one uppercase letter. ';
}else if (!firstDigit.test(username)){
errorlist = errorlist + 'First character of username can\'t be a digit. ';
}else{
alert("Passed Validation");
}
}
</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>