jQuery Validation 插件

优点：
1.表单验证非常简单方便，并且提供了许多配置项目
2.国际化，可以自定义提示信息

命令行安装
//初始化bower
bower init//使用bower安装jquery
bower install jquery --save-dev//使用bower安装jquery-validate插件
bower install jquery-validate --save-dev//使用bower安装angular
bower install angular --save-dev最简单的效果：
<form id="demoForm">
 <fieldset>
 <legend>用户登录</legend>
 <p>
 <label for="username" style="display: inline-block;width: 80px;">用户名:</label>
 <input type="text" name="username" id="username"/>
 </p>
 <p>
 <label for="password" style="display: inline-block;width: 80px;">密码:</label>
 <input type="password" name="password" id="password"/>
 </p>
 <p>
 <input type="submit"/>
 </p>
 </fieldset>
</form><!-- 要先引入jquery插件，再引入jquery.validate -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/jquery-validation/dist/jquery.validate.min.js"></script>
<script>
 $('#demoForm').validate({
 rules: { //rules里面的username和password都是name的属性值，而不是id
 username: {
 required: true,
 minlength:2,
 maxlength:10
 },
 password: {
 required:true,
 minlength:2,
 maxlength:16
 }
 },
 messages: {
 username: {
 required: '必须填写用户名',
 minlength: '不低于2位',
 maxlength: '不大于10位'
 },
 password: {
 required:'必须填写密码',
 minlength: '不低于2位',
 maxlength: '不低于16位'
 }
 }
 });
</script>注意：rules里面的username和password都是name的属性值，而不是id
//点击提交按钮不提交
$('#demoForm').validate({
 debug:true
});基本验证方法
required 必填
remote:'remote.php/remote.json' 远程校验
minlength 最小长度
maxlength 最大长度
rangelength: [2, 10] 长度
min 最小值(代表数字的值)
max 最大值(代表数字的值)
range: [2, 10] 值范围(代表数字的值)(数字在2-10之间)
email:true Email格式
url:true URL格式
date:true 日期
dataISO:true 日期(格式是：yyy-mm-dd 或者 yyy/mm/dd)
number 数字
digits 整数
equlaTo 与另一个元素值相等高级API
valid()方法：检查表单是否验证通过或某些元素是否有效$('#check').click(function () {
 console.log($('#demoForm').valid() ? '表单填写正确' : '表单填写错误');
});rules()方法（浏览器控制台输入验证console）
1.rules() 获取表单某一元素的校验规则
$('#username').rules();
//Object {required: true, rangelength: Array[2], remote: "remote.json"}2.rules('add', rules) 向表单增加校验规则
$('#username').rules('add', {minlength: 2, maxlength:10});
//Object {required: true, rangelength: Array[2], minlength: 2, maxlength: 10, remote: "remote.json"}3.rules('remove', rules) 删除表单元素校验规则
$('#username').rules('remove', 'minlength maxlength')
//Object {minlength: 2, maxlength: 10}
$('#username').rules()
//Object {required: true, rangelength: Array[2], remote: "remote.json"} 
Validator对象
var validator = $('#form').validate({});
validate()方法返回Validator对象
Validator对象的方法：
Validator.form() 验证表单是否有效，返回 true/false
Validator.element(element) 验证某个元素是否有效，返回true/false
Validator.resetForm() 把表单恢复到验证前原来的状态（错误信息会被清除掉）
Validator.showErrors(errors) 针对某个元素显示特定的错误信息
Validator.numberOfInvalids() 返回无效的元素数量（要触发验证var bool = $('#demoForm').valid()，才能统计数量）[红字]提示：在console控制台，shift+enter才是换到下一行,enter是提交
validator.showErrors({
 username:'你填错了，哈哈'
});Validator对象的静态方法 — — 直接调用
$.validator.addMethod(name,method[,message]) 增加自定义的验证方法
$.validator.format(template,argument,argumentN...) 格式化字符串，用参数代替模板中的{n}
$.validator.setDefaults(options) 修改插件默认设置
$.validator.addClassRules(name,rules) 为包含class属性名批量增加验证类型(下图为实例，给classname为“txt”的元素添加验证类 
型)validate()方法配置项（jquery-validate插件的核心内容）
submitHandler通过验证后运行的函数，可以加上表单提交方法
invalidHandler无效表单提交后运行的函数
ignore对某些元素不进行验证
rules定义校验规则
messages定义提示信息
groups对一组元素的验证，用一个错误提示，用errorPlacement控制把出错信息放在那实例调用：
submitHandler:function(from){
 //表单提交的方式
 from.submit(); //表单序列化
 console.log($(form).serialize());
}ignore:"#hh" 对类hh不进行校验
每个rules的配置方法都有一个默认depends：function（element）{条件}，表示当函数满足条件时，才开始检验该配置方法<br>
当配置方法有参数时可为该方法添加参数param：x，当depends中函数满足条件时才传入参数进行配置username:{
 required:{
 depends:function(element){
 return $("#password").is(":filled"); //只有当密码被填写时才验证用户名
 }
 }
}

 更多参考API文档。。。。