如何验证输入类型="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>

我的问题是，如果用户名是空的，工具提示会显示 "Cant be empty"，但是如果密码是空的，什么也不会发生，我也希望这适用于我的密码输入吗？

Jquery-代码有什么问题吗？

Answer 1

将必需的属性添加到您的密码输入字段

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

Answer 2

引用OP:

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

这里的大线索是 "tooltip" 这个词。这告诉我您未能初始化或包含 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" />

DEMO 使用 jQuery 验证插件：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" />

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

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

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

How to validate input type="password"

javascript

jquery

jquery-validate