jQuery插件系列

相信大家在网站上都遇到过这种注册的情况吧，有的时候我们什么也不输入点登录或者注册或者鼠标失去焦点的时候，就会自动提示xxx为空，密码不正确，请输入xxx等一系列的提示信息。

那么这是怎么实现的呢，其实这与前端的参数规则校验密不可分，在我们的项目开发中，少不了这种规则校验的操作，目的也很简单：就是为了使得程序更加严谨，逻辑更加严格缜密。

今天介绍的是一个基于jQuery的校验插件validate
官网：https://jqueryvalidation.org/

---

---

前言

validate插件是一款功能强大的jQuery插件，它不仅支持多种的规则校验，如：数字，必输，邮箱。长度，密码等，最重要的是：还支持自定义规则和提示信息。

---

一、validate使用

要使用validate 首先需要引入对应的js文件去项目中。

1.1 CDN引入

<script src="https://cdn.bootcdn.net/ajax/libs/jquery-validate/1.19.5/jquery.validate.js"></script>

1.2 下载js文件引入

下载地址：官网：https://jqueryvalidation.org/

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

1.3 提示信息汉化

如果需要汉化提示信息，则可引入汉化的js文件

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

这里提供菜鸟教程的cdn地址
如果是下载的话，则可以去validate的下载目录下的dist\localization目录下，找到messages_zh.js汉化文件

二、validate()方法

在 JS 文件对相应的form调用validate()，该方法就是调用validate的默认的校验方法。

说明： 在jQuery的插件里，所有的插件方法，参数基本都是以json格式编写的

$('#reg').validate(); // 调用默认的validate方法，无参数

$('#reg').validate({ // 自定义参数设定定制化的校验规则以及提示信息
	参数名: 参数值,
	参数名: 参数值,
	...
	参数名: 参数值,
});

三、常用默认验证规则

规则名	说明
required:true	必须输入字段
email:true	必须输入正确格式的电子邮件
url:true	必须输入正确格式的网址
date:true	必须输入正确格式的日期（IE6 验证出错）
dateISO:true	必须输入正确格式的日期(ISO) （只验证格式， 不验证有效）
number:true	必须输入合法的数字(负数，小数)
digits:true	必须输入正整数
creditcard:true	必须输入合法的信用卡号，例如：5105105105105100
equalTo:”#password”	输入值必须和#field 相同 支持css选择器
minlength:5	输入长度最小是 5 的字符串(汉字算一个字符)
maxlength:10	输入长度最多是 10 的字符串(汉字算一个字符)
range:[5,10]	输入长度介于 5 和 10 之间的字符串”)(汉字算一个字符)
min:5	输入值不能小于 5
max:10	输入值不能大于 10
remote:”url”	使用 ajax 方法调用 check.php 验证输入值

四、设置校验规则

4.1 使用默认的

直接在表单选项框里输入对应的规则名，如下：

<p>用户名（必须，最小6位）：<input type="text" name="username" required minlength="6"></p>
<p>密码（必须6-8位）：<input id="#pwd1" type="password" name="pwd1" required minlength="6" maxlength="8"></p>
<p>确认密码（与密码相同）：<input type="password" name="pwd2" required equalTo="#pwd1"></p>

第一种方式会使得input表达输入框变得格外的长，是的代码观赏性不佳。，所以一般是用第二种方式。

4.2 使用rules字段自定义规则

刚才说过，jQuery的插件大多数是以json字串的方式编写参数和值的。那么validate也不例外。如下：

	<form action="wyp" method="post">
	 <p>年龄：<input type="number" name="age" required minlength="0" maxlength="100"></p>
     <p><input type="submit" value="提交"></p>
    </form>
    <script>
        $(function(){
        // 重新定义表单方式 自定义
        $('#form').validate({
                // 校验规则
                rules:{
                    age: {
                        required:true,
                        min:0,
                        max:100,
                    }
                },
                // 使用的是表单的name属性
				messages: {
					// 属性名是输入框内部的值
                    age: {
                        required:"请输入年龄",
                        min:"年龄不能小于0岁",
                        max: '年龄最大100岁',
                    }
				}
			}); //开启验证
        })
    </script>

validate的自定义规则都写在rules的对象里，对象里是以键值对的形式书写规则的
validate的错误提示规则都写在messages的对象里，同理rules也是键值对的形式书写。

五、调试修改提交规则

5.1 调试模式

开启调试模式，validate提供了两种方式，而调试模式很好的为我们调试代码做出了方便。完全可以避开submit事件，只校验规则不提交表单。
【方式一】
为单独某个表单开启

$("#form1").validate({
	debug:true,
})

【方式二】
全局开启

$.validator.setDefaults({
	debug:true
})

5.2 改变提交规则

validate为我们提供了一个提交表达的方法，它优先于表单的提交事件

$('#form1').validate({
    submitHandler : function(){
    // 指定提交的逻辑 地址 等信息
    },
});

---

六、remote参数

remote参数是使用后端的接口对前端的参数进行校验的一个参数配置

<form id="form">
	<input name="username" type="text"/>
</form>
<script>
	$("#form").validate({
	rules:{
		username:{
			required: true,
			minlength:3,
			maxlength:18,
			remote:{
				url:'校验用户名的后端地址', // url 后台校验的api
				type:'GET', // 提交方式
				dataType: 'json', // 参数格式
				data: {			// 提交的参数 k-v
					username:function(){
						return $("#username").val();
					}
				}
			}
		}
	},
	 messages:{
                    userName: { 
                        required: "请输入用户名！",
                        minlength: "用户名长度最少需要3位！",
                        maxlength: "用户名长度最大不能超过18位！",
                        remote: "此用户名已存在！"
                     },
   }
})
</script>