Javascript 如何验证输入类型="；密码"；

我使用以下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>

用户名

密码

我的问题是，如果用户名是空的，工具提示会说“不能是空的”，但是如果密码是空的，什么都不会发生，我也希望这适用于我的密码输入

---

Jquery代码有什么问题吗？

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

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

---

引用OP:

“我的问题是，如果用户名为空，工具提示会说‘不能为空’，但如果密码为空，则不会发生任何事情”

这里最重要的线索是“工具提示”一词。这说明您未能初始化或包含，因为此插件中没有工具提示。如果没有插件，您的代码只会退回到HTML5验证（工具提示是由浏览器创建的，而不是JavaScript/jQuery）。。。这是由内联

required

属性触发的。。。只有在

用户名

字段中才有

然而，如果你做得很好，那么一切都会按照你的程序进行

在包含jQuery之后包含插件

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

请注意，在

.validate（）

方法中声明规则时，不需要inline required属性：

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

使用HTML5验证的演示：

---

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

将必需属性添加到

啊哈，我太笨了，为了快速响应。你还知道我如何设置此“错误”消息的样式吗？注意

必需属性不需要值，它只需要存在（例如
）。您无法在所有浏览器中可靠地设置弹出消息的样式。@lolio您可以通过
消息：{username:“your_message”}
@OzgurBar指定自定义消息，当OP已经通过
.validate（）在密码字段上声明了
必需的
规则时，这有什么关系
方法？如果OP已经在
中声明此字段需要
验证（）
，该方法如何解决问题？OP的代码在没有您建议的情况下运行：
<input type="text" id="username" name="username" placeholder="Username" />
<input type="password" id="password" name="password" placeholder="Password" />

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