我使用以下 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 代码有什么问题吗?
最佳答案
引用 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工具提示在每个浏览器中的呈现方式都不同。
关于javascript - 如何验证输入类型 ="password",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27910618/