使用JavaScript进行登录验证

Question

使用JavaScript登录Asp

它不起作用，我不知道为什么？function check()

​

<script>
            function check() {
                var jname, jpass, jpre_pass, jmail;
                jname = document.getElementById("name").value;
                jpass = document.getElementById("pass").value;
                jpre_pass = document.getElementById("pre_pass").value;
                jmail = document.getElementById("mail").value;
                var emailExp = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([com\co\.\in])+$/; 
                if (isNan(jname)) {
                    document.getElementById("cname").innerHTML = "enter the name first";
                    document.getElementById("lcheck").innerHTML = "false";
                }
                if (isNan(jpass)) {
                    document.getElementById("cpas").innerHTML = "enter the password ";
                    document.getElementById("lcheck").innerHTML = "false";
                }
                if (isNan(jpre_pass)) {
                    document.getElementById("cpre_pass").innerHTML = "enter the  pre_pass";
                    document.getElementById("lcheck").innerHTML = "false";
                } else if (jpre_pass != jpass) {
                    document.getElementById("cpre_pass").innerHTML = "passwords not matches";
                    document.getElementById("lcheck").innerHTML = "false";
                }
                if (isNan(jmail)) {
                    document.getElementById("cmail").innerHTML = "enter the mail";
                    document.getElementById("lcheck").innerHTML = "false";
                }else if(jmail.match(emailExp))
                {
                    document.getElementById("cmail").innerHTML = "invalid mail";
                    document.getElementById("lcheck").innerHTML = "false";
                }
            }
        </script>

<div>
            <asp:TextBox ID="name" runat="server"></asp:TextBox>
            <p id="cname"></p>
            <asp:TextBox ID="pass" runat="server"></asp:TextBox>
            <p id="cpass"></p>
            <asp:TextBox ID="pre_pass" runat="server"></asp:TextBox>
            <p id="cpre_pass"></p>
            <asp:TextBox ID="mail" runat="server"></asp:TextBox>
            <p id="cmail"></p>
            <asp:Label ID="lcheck" runat="server" Text=""></asp:Label>
            <asp:Button ID="btn" runat="server" Text="submit" OnClientClick="check()"/>
            
        </div>

​

Answer 1

您可以在不使用isNan的情况下检查它的值。这就是：

function check() {
    var jname, jpass, jpre_pass, jmail;
    jname = document.getElementById("name").value;
    jpass = document.getElementById("pass").value;
    jpre_pass = document.getElementById("pre_pass").value;
    jmail = document.getElementById("mail").value;
    var emailExp = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([com\co\.\in])+$/; 
    var isValid = true;
    if (!jname) {
        document.getElementById("cname").innerHTML = "enter the name first";
        document.getElementById("lcheck").innerHTML = "false";
        isValid = false;
    }
    if (!jpass) {
        document.getElementById("cpas").innerHTML = "enter the password ";
        document.getElementById("lcheck").innerHTML = "false";
        isValid = false;
    }
    if (!jpre_pass) {
        document.getElementById("cpre_pass").innerHTML = "enter the  pre_pass";
        document.getElementById("lcheck").innerHTML = "false";
        isValid = false;
    } else if (jpre_pass != jpass) {
        document.getElementById("cpre_pass").innerHTML = "passwords not matches";
        document.getElementById("lcheck").innerHTML = "false";
        isValid = false;
    }
    if (!jmail) {
        document.getElementById("cmail").innerHTML = "enter the mail";
        document.getElementById("lcheck").innerHTML = "false";
        isValid = false;
    } else if(jmail.match(emailExp))
    {
        document.getElementById("cmail").innerHTML = "invalid mail";
        document.getElementById("lcheck").innerHTML = "false";
        isValid = false;
    }

    return isValid;
}

您必须确保id名称存在于呈现页面中(在浏览器中)。如我所知，服务器控件id名称将在呈现页面后更改。

首先，您需要将事件附加到onsubmit。下面是：

document.forms[0].attachEvent("onsubmit", check);

Answer 2

首先，isNaN检查特定值是否为NaN。因为没有将任何输入解析成一个数字，所以这些if语句中的任何一个都不可能计算为true。您可能希望检查这些值是否为空字符串。

其次，一旦验证if -语句正常工作，如果要阻止回发，则需要调用event.preventDefault()。

如果验证语句的计算结果为false，则需要将事件对象传递给check()函数，并调用preventDefault。

例如：

function clickHandler(event) {
    check(event);
}

function check (event)
    ...validation

    if (!valid) event.preventDefault();
}