javascript - 如何验证输入类型 ="password"

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>

我的问题是，如果 Username 为空，工具提示会显示“不能为空”，但如果 Password 为空，则什么也不会发生，我还希望这适用于我的密码输入吗？

Jquery 代码有什么问题吗？

Answer 1

引用 OP:

"And my Problem is, that if Username is empty , the tooltip says 'Cant be empty', but if the Password is empty, nothing happens"

这里的重要线索是“工具提示”一词。这告诉我您未能初始化或包含 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() 方法中声明规则时不需要内联 required 属性:

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

使用 jQuery 验证插件的演示:http://jsfiddle.net/jppz52c6/

---

否则，如果您只想使用 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 验证的演示:http://jsfiddle.net/jppz52c6/1/

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