Question

我正在研究表单的自定义验证。我的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/

请帮我解决：

我想匹配密码，我没有。
还可以自定义验证。

Answer 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这样的值：

如果找到匹配项，则上述版本将返回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 - 应用上述修复

从小提琴中完成JavaScript以获得完整性

// dom objects

pass1

Answer 2

您正在侦听错误元素上的关键事件。 'strength'元素不接受任何关键输入。所以你想改变：

form.strength.addEventListener("keypress",PwdStrength);

为：

form.pass1.addEventListener("keyup",PwdStrength);

注意，我将事件更改为keyup事件，因此它在按下键后运行。另一个说明......

var uc = pass.match(/[A-Z]/g);

这将返回每个找到的实例的数组。因此，您可能会检查'uc'是否为null或array.length。

无法使用javascript进行自定义验证

2 个答案:

从小提琴中完成JavaScript以获得完整性