Question

我体内有两种形式：

<body>
    <form method=post name="signin">
        <table>
            <theader>Sign In</theader>
            <tr>
                <td>Email:</td>
                <td>
                    <input type=text length=25 maxlength=25 name=em id=em />
                </td>
            </tr>
            <tr>
                <td>Password:</td>
                <td>
                    <input type=password length=15 maxlength=15 name=up id=up />
                </td>
            </tr>
            <tr>
                <td colspan=2>
                    <input type=button value="submit" />
                </td>
            </tr>
        </table>
    </form>
    <br>
    <br>
    <br>
    <br>
    <form method=post name="register">
        <table>
            <theader>Don't have an account? Register, it's Free!</theader>
            <tr>
                <td>Email:</td>
                <td>
                    <input type=text length=25 name=email id=email /><span id="nameerror"></span>
                </td>
            </tr>
            <tr>
                <td>Password:</td>
                <td>
                    <input type=password length=15 name=pass id=pass />
                </td>
            </tr>
            <tr>
                <td>Confirm Password:</td>
                <td>
                    <input type=password length=15 name=cpass id=cpass /><span id="pwerror"></span>
                </td>
            </tr>
            <tr>
                <td>Account Type:</td>
                <td>
                    <select id="seltype">
                        <option name=standard SELECTED>Standard</option>
                        <option name=admin>Administrator</option>
                </td>
            </tr>
            <tr>
                <td colspan=2>
                    <input type=button value="submit" onClick="JavaScript:validate();" />
                </td>
            </tr>
        </table>
    </form>
</body>

我想做以下事情：对于每个表单，验证以确保它已填写，并且对于第二个表单我要验证两个密码是否匹配。我有以下内容：

$( document ).ready(function() {

    var t = document.getElementById("email").value;
    var y = document.getElementById("seltype").value;
    var k = document.getElementById("pass").value;
    var j = document.getElementById("cpass").value;

    $('#cpass').blur(function(){    
        if (k != j) {
            document.getElementById("pwerror").innerHTML = "Password does not match";
        }
        else {
            document.getElementById("pwerror").innerHTML = "Password matches";
        }
    }); 
});

function validate() {   
    if (t != null && y != null && k != null && j != null) {
    }
    if (t == "" || y == "" || k == "" || j == "") {
        alert("fill in");
    }
}

Answer 1

我更喜欢不混合原生JavaScript并仅使用纯jQuery进行验证。这里的一个好处是 empty 字段检查适用于任何<form>，因为它不依赖于任何特定的表单，输入名称或ID。

$( document ).ready(function() {
    $( 'form' ).submit(function(event) {
        var $form = $( this );
        var checkPass = true;
        $form.find( 'input' ).each(function( i, e) {
            if (e.value.length === 0) {
                event.preventDefault();
                alert(e.name + " cannot be empty");
                return (checkPass = false);
            }
        });
        if( checkPass && $form.is( '[name="register"]' ) ) {
            if( $form.find( '#pass').val() !== $form.find( '#cpass' ).val()) {
                event.preventDefault();
                alert( 'Passwords do not match.' );
            }
        }
    });
});

JsFiddle.net

的工作演示

Answer 2

基础：

如果你想检查变量是否为空，理想情况下，你应该使用！==＆amp;不！=。
如果要检查变量是否为“”，理想情况下，您应该使用===而不是==。退房：http://www.w3schools.com/js/js_comparisons.asp
使用JSFiddle.net为您的代码提供更好的工作示例，可以帮助其他人看到您的实际代码的演示。
您的代码目前有很多优化范围。由于它只是您尝试实现的基本验证，为什么需要使用jQuery？为什么不使用JavaScript基本变量比较？
谷歌在你问这里之前。如果它如此直截了当，您的问题将。
警报不是通知用户填写的最佳方式。例如，您的“密码匹配”或“密码不匹配”div是更好的通知用户的方式。使用表单事件验证表单，因为用户已填写表单中的详细信息！
通过提供您的确切问题负责任地提问，而不仅仅是粘贴代码！我们怎么知道你在哪里遇到问题。
变量在Scope中起作用。在不同函数中使用它们之前检查变量的范围。例如，在第一个函数中定义var t，y，k，j并在第二个函数中使用它 - 将抛出未定义变量t的错误。

根据您提供的信息，以下是我可以提供的帮助：

<强> HTML：

<form method=post name="signin">
    <table>
        <theader>Sign In</theader>
        <tr>
            <td>Email:</td>
            <td>
                <input type=text length=25 maxlength=25 name=em id=em />
            </td>
        </tr>
        <tr>
            <td>Password:</td>
            <td>
                <input type=password length=15 maxlength=15 name=up id=up />
            </td>
        </tr>
        <tr>
            <td colspan=2>
                <input type=button value="submit" onclick="javascript:validateSignin()" />
            </td>
        </tr>
    </table>
</form>
<br>
<br>
<br>
<br>
<form method=post name="register">
    <table>
        <theader>Don't have an account? Register, it's Free!</theader>
        <tr>
            <td>Email:</td>
            <td>
                <input type=text length=25 name=email id=email /><span id="nameerror"></span>
            </td>
        </tr>
        <tr>
            <td>Password:</td>
            <td>
                <input type=password length=15 name=pass id=pass />
            </td>
        </tr>
        <tr>
            <td>Confirm Password:</td>
            <td>
                <input type=password length=15 name=cpass id=cpass /><span id="pwerror"></span>
            </td>
        </tr>
        <tr>
            <td>Account Type:</td>
            <td>
                <select id="seltype">
                    <option name=standard SELECTED>Standard</option>
                    <option name=admin>Administrator</option>
            </td>
        </tr>
        <tr>
            <td colspan=2>
                <input type=button value="submit" onClick="JavaScript:validateRegister();" />
            </td>
        </tr>
    </table>
</form>

<强> JS：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script type="text/javascript">

$(document).ready(function () {

    $('#cpass').blur(function () {
        if (k != j) {
            document.getElementById("pwerror").innerHTML = "Password does not match";
        } else {
            document.getElementById("pwerror").innerHTML = "Password matches";
        }
    });
});

function validateRegister() {
    var t = document.getElementById("email").value;
    var y = document.getElementById("seltype").value;
    var k = document.getElementById("pass").value;
    var j = document.getElementById("cpass").value;

    if (t !== null && y !== null && k !== null && j !== null) {}
    if (t === "" || y === "" || k === "" || j === "") {
        alert("fill in");
    }
}
function validateSignin() {

    var se= document.getElementById("em").value;
    var sp= document.getElementById("up").value;

    if (se !== null && sp !== null){ }
    if (se === "" || sp === "") {
        alert("fill in");
    }
}

</script>

希望它有所帮助！：）

使用密码匹配进行表单验证

2 个答案: