我正在研究表单的自定义验证。我的HTML代码在这里:
<!DOCTYPE html>
<html>
<head>
<title>q
JavaScript
</title>
<link rel="stylesheet" src="validate.css">
</head>
<body>
<article>
<form id="register" action = "register" method = "post">
<fieldset>
<legend> Register </legend>
<!--For email -->
<label for = "email"> Email: </label>
<input type= "email" id = "email" name="email" autofocus required />
<br>
<!--For password1 -->
<label for = "pass1" > Password: </label>
<input type = "password" id = "pass1" name = "pass1" autofocus required/>
<span id = "strength"> </span>
<br>
<!--For password2 -->
<label for = "pass2" > Repeat: </label>
<input type = "password" id = "pass2" name = "pass2" autofocus required/>
<br>
<input type="submit" value="Submit"/>
</fieldset>
</form>
</article>
<script type="text/javascript" src="validate.js"></script>
</body>
</html>
css在这里:
label
{
clear: both;
float: left;
width: 40%;
text-align: right;
margin: 0 2% 10px 0;
color: #666;
vertical-align:middle;
}
input {
margin: 0 2% 10px 0;
}
javascript在这里:
//dom objects
var form =
{
register: document.getElementById("register"),
email: document.getElementById("email"),
pass1: document.getElementById("pass1"),
pass2: document.getElementById("pass2"),
strength: document.getElementById("strength")
}
form.register.addEventListener("submit",CheckForm);
form.pass1.addEventListener("keypress",NoSpaces);
form.pass2.addEventListener("keypress",NoSpaces);
form.strength.addEventListener("keypress",PwdStrength);
//提供密码性质
var strtxt= ["weak" , "average","strong"];
var strclr= ["red", "yellow", "green"];
function PwdStrength(e)
{
var pass = form.pass1.value;
//count upper case
var uc = pass.match(/[A-Z]/g);
//count digit
var nm = pass.match(/\d/g);
//count other characters
var nw = pass.match(/\W/g);
var s=pass.length + uc + 2*nm + 3*nw ;
s = Math.min(Math.floor(s/10),2);
form.strength.textContent = strtxt[s];
form.strength.style.color = strcolor[s];
}
function NoSpaces(e)
{
if(e.charCode == 32 )
{
e.preventDefault();
}
}
var reEmail = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
function CheckForm(e)
{
var msg="";
if ( !reEmail.test(form.email.value))
{
msg+="Email address ";
}
if ( form.pass1.value == "" || form.pass1.value != form.pass2.value )
{
msg+= "Password ";
}
if ( msg != "")
{
msg= "check Your:"+msg;
}
else
{
msg +="successful submission";
}
alert(msg);
e.preventDefault();
}
您可以在此处查看:http://jsfiddle.net/EjqhL/
请帮我解决:
我想匹配密码,我没有。
还可以自定义验证。
答案 0 :(得分:1)
您的方法PwdStrength
绑定到您不输入的范围内的按键:
form.strength.addEventListener("keypress",PwdStrength);
我假设身份span
的{{1}}旨在显示密码强度字和颜色。如果是这样,您可能更好地使用strength
字段,类似于:
pass1
此外,您的颜色存储在名为form.pass1.addEventListener("keypress",PwdStrength);
的数组中,但您稍后将其引用为strclr
,如下所示:
strcolor
接下来,您的正则表达式检查不会返回数字,它们会返回匹配项:
form.strength.style.color = strcolor[s]; // that array name is wrong...
如果在var uc = pass.match(/[A-Z]/g);
var nm = pass.match(/\d/g);
var nw = pass.match(/\W/g);
中输入123
:
pass1
所以,使用你的数学就像下面的uc = null
nm = ["1", "2", "3"]
nw = null
和数组一样:&/ p>
null
将您的匹配更改为test将返回true false,类似于:
var s = pass.length + uc + 2*nm + 3*nw ; // won't work
或 - 您可以使用var uc = /[A-Z]/g.test(pass);
var nm = /\d/g.test(pass);
var nw = /\W/g.test(pass);
和1
这样的值:
0
如果找到匹配项,则上述版本将返回var uc = pass.match(/[A-Z]/g) ? 1 : 0;
var nm = pass.match(/\d/g) ? 1 : 0;
var nw = pass.match(/\W/g) ? 1 : 0;
1
;
现在数学将起作用,当您键入0
时,您会在span
中看到标签和颜色的变化。
DEMO - 应用上述修复
// dom objects
pass1
答案 1 :(得分:0)
您正在侦听错误元素上的关键事件。 'strength'元素不接受任何关键输入。所以你想改变:
form.strength.addEventListener("keypress",PwdStrength);
为:
form.pass1.addEventListener("keyup",PwdStrength);
注意,我将事件更改为keyup事件,因此它在按下键后运行。 另一个说明......
var uc = pass.match(/[A-Z]/g);
这将返回每个找到的实例的数组。因此,您可能会检查'uc'是否为null或array.length。