Question

我使用以下Jquery脚本：

$(document).ready(function(){
    $("#myForm").validate({
        rules: {
            username: {
                required:true
            },
            password: {
                required:true   
            }
        }
    });
});

和html代码：

<form id="myForm">
        <div id="box-header">
            <p>Username</p>
            <input type="text" id="username" name="username" placeholder="Username" required="required">
            <p>Password</p>
            <input type="password" id="password" name="password" placeholder="Password">
        </div>
</form>

我的问题是，如果用户名为空，工具提示说＆＃34;不能为空＆＃34;，但如果密码为空，没有任何反应，我还希望这适用于我的密码输入？< / p>

Jquery-Code有什么问题吗？

Answer 1

引用OP：

＆＃34;我的问题是，如果用户名为空，工具提示说“不能为空”，但如果密码为空，则没有任何反应＆＃34;

这里的重要线索是＆＃34;工具提示＆＃34;。这告诉我您未能初始化或包含the jQuery Validate plugin，因为此插件中没有工具提示。如果没有插件，您的代码就会回退到HTML5验证（其中工具提示是由浏览器创建的，而不是JavaScript / jQuery ）......这是由内联required属性触发的。。你只在username字段上。

但是，如果你正确地include the jQuery Validate plugin，那么一切都在按照您的编程进行。

包含jQuery后包含插件...

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>

你的jQuery：

$(document).ready(function () {
    $("#myForm").validate({
        rules: {
            username: {
                required: true
            },
            password: {
                required: true
            }
        }
    });
});

请注意，在.validate()方法中声明规则时，您不需要内联必需属性：

<input type="text" id="username" name="username" placeholder="Username" />
<input type="password" id="password" name="password" placeholder="Password" />

DEMO使用jQuery Validate插件：http://jsfiddle.net/jppz52c6/

OTHERWISE ，如果您只是使用HTML5 validation，那么您不需要.validate()方法，甚至不需要任何jQuery / JavaScript的。您只需要在每个字段上都有内联HTML5验证属性（例如required="required"）......

<input type="text" required="required" id="username" name="username" placeholder="Username" />
<input type="password" required="required" id="password" name="password" placeholder="Password" />

使用HTML5验证的DEMO：http://jsfiddle.net/jppz52c6/1/

注意：HTML5验证要求browser support HTML5 validation和工具提示在每个浏览器中的呈现方式不同。

Answer 2

将所需属性添加到密码输入字段

<input type="password" id="password" name="password" placeholder="Password" required>

如何验证输入类型=“密码”

2 个答案: