jQuery Validation Plugin客户端表单验证插件
插件新增的几个方法和选择器.valid()方法
检查一个表单 或 选取的控件 是否全部通过校验，调用此方法之前，需要表单被初始化form.validate();
因为正常触发表单的校验是点击submit按钮，用此方法，就可以在自定义的触发事件中调用校验，而且可以针对单个控件校验
[html]
<!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"
});
var form = $( "#myform" );
form.validate();
$( "button" ).click(function() {
alert( "Valid: " + form.valid() );
});
</script>
</body>
</html>
.rules()方法
操作表单中控件的校验规则，可以读取read新增add删除remove
[html]
$( "#myinput" ).rules( "add", {
minlength: 2
});
[html] view plaincopyprint?
$( "#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">
<div>Mouseover to see the value of each input</div>
<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>
div { 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>
<div></div>
</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;
$( "div" ).text(n + (n == 1 ? " is" : " are") + " unchecked!" );
}
countUnchecked();
$( ":checkbox" ).click( countUnchecked );
</script>
</body>
</html>
补充：web前端 , JavaScript ,
