脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery Validation Plugin客户端表单验证插件，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 插件新增的几个方法和选择器
.valid()方法
检查一个表单 或 选取的控件 是否全部通过校验，调用此方法之前，需要表单被初始化form.validate();
因为正常触发表单的校验是点击submIT按钮，用此方法，就可以在自定义的触发事件中调用校验，而且可以针对单个控件校验
<!doctyPE html>
<html>
<head>
<;meta charset="utf-8">
<title>Sets up validation for a form, then checks if the form is valid when clicking a button.</title>
<link rel="stylesheet" href="http://jquery.bassistance.de/validate/demo/site-demos.css">
<style>
</style>
</head>
<body>
<form id="myform">
<form id="myform">
<input type="text" name="name" required>
<br>
<button type="button">Validate!</button>
</form>
</form>
<script src="http://code.jquery.COM/jquery-1.9.1.min.js"></script>
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<script src="http://jquery.bassistance.de/validate/additional-methods.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setdefaults({
debug: true,
success: "valid"
});
form.validate();
$( "button" ).click(function() {
alert( "Valid: " + form.valid() );
});
</script>
</body>
</html>
.rules()方法
操作表单中控件的校验规则，可以读取read新增add删除remove
[html]
$( "#myinput" ).rules( "add", {
minlength: 2
});
$( "#myinput" ).rules( "add", {
required: true,
minlength: 2,
messages: {
required: "Required input",
minlength: jQuery.format("Please, at least {0} characters are necessary")
}
});
[html]
$( "#myinput" ).rules( "remove", "min max" );
新增的selector
:blank Selector
选取没有输入内容的控件或者只有空格输入的控件，校验方式其实就是jQuery.trim(value).length == 0
[html]
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Finds input elements with no value or just whitespace.</title>
<link rel="stylesheet" href="http://jquery.bassistance.de/validate/demo/site-demos.css">
</head>
<body>
<form id="myform">
<p>Mouseover to see the value of each input</p>
<input value="" title='""'>
<input value=" " title='" "'>
<input value="abc" title='"abc"'>
</form>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<script src="http://jquery.bassistance.de/validate/additional-methods.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "input:blank" ).css( "background-color", "#bbbbff" );
</script>
</body>
</html>
:filled Selector
选取有输入的控件，校验相当于jQuery.trim(value).length > 0
:unchecked Selector
:checked Selector
都是选取checkbox的选择器，分别对应未选中和选中的checkbox
[html]
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Finds all input elements that are unchecked.</title>
<link rel="stylesheet" href="http://jquery.bassistance.de/validate/demo/site-demos.css">
<style>
p { color:red; }
</style>
</head>
<body>
<form id="myform">
<form>
<input type="checkbox" name="newsletter" checked="checked" value="Hourly" />
<input type="checkbox" name="newsletter" value="Daily" />
<input type="checkbox" name="newsletter" value="Weekly" />
<input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
<input type="checkbox" name="newsletter" value="Yearly" />
</form>
<p></p>
</form>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<script src="http://jquery.bassistance.de/validate/additional-methods.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
function countUnchecked() {
var n = $( "input:unchecked" ).length;
$( "p" ).text(n + (n == 1 ? " is" : " are") + " unchecked!" );
}
countUnchecked();
$( ":checkbox" ).click( countUnchecked );
</script>
</body>
</html>
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery Validation Plugin客户端表单验证插件全部内容，希望文章能够帮你解决javascript代码实例教程-jQuery Validation Plugin客户端表单验证插件所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。