1

我的体内有两种形式：

<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");
    }
}
4

2 回答 2

2

我不喜欢混合原生 JavaScript 并仅使用纯 jQuery 进行验证。这里的好处之一是空字段检查适用于任何人，<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上的工作演示

于 2013-08-10T19:37:54.087 回答
1

基本：

  1. 如果你想检查一个变量是否不为空，理想情况下，你应该使用 !== & not !=。

  2. 如果要检查变量是否为 ""，理想情况下，您应该使用 === 而不是 ==。查看：http ://www.w3schools.com/js/js_comparisons.asp

  3. 使用 JSFiddle.net 为您的代码提供更好的工作示例，这可以帮助其他人查看您的实际代码的演示。

  4. 您的代码目前有很大的优化空间。既然它只是您想要实现的基本验证，为什么需要使用 jQuery？为什么不只使用 JavaScript 基本变量比较？

  5. 在你在这里问之前谷歌。如果它如此简单，您的问题将被否决。

  6. 警报并不是通知用户填写的最佳方式。例如，您的“密码匹配”或“密码不匹配”div 是通知用户的更好方式。使用表单事件来验证表单，因为用户已经在表单中填写了详细信息！

  7. 通过给出您的确切问题而不只是粘贴代码来负责任地提问！我们如何知道您在哪里面临问题。

  8. 变量在作用域中起作用。在不同的函数中使用它们之前检查变量的范围。例如，您在第一个函数中定义 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>

希望能帮助到你！:)

于 2013-08-10T19:24:59.313 回答