CMS系统常用插件之jquery.validate.js

作为一名应届萌新，入职半年，本来已做好遨游java后端开发海洋的准备，但作为部门重（xiang）点（mu）培（yao）养（qiu）对象，还是先从前端做起吧。本着我是社会主义一块砖，哪里需要哪里搬得原则，我还是欣然接受了。半年时间，前端从入门到入坑，陆续做了两个项目，期间收获还是蛮多的。最近刚做完内部的一个cms系统，用到几个插件还是蛮好用的，避免重复造轮子，这里简单记录一下使用心得，同时也向大家推荐一下。

表单校验插件 jquery.validate.js

首先附上插件官网：https://jqueryvalidation.org/

使用方法

顾名思义，此插件依赖jquery库，因此首先要导入jquery库，然后再引入此js，如下所示：

<script src="/js/jquery-1.11.1.min.js"></script>
<script src="/js/jquery.validate.min.js"></script>

表单校验未通过提示语默认为英文，如果想使用中文，还需引入中文包：

<script src="/js/messages_zh.js"></script>

内置校验规则：

与input内置校验一样， jquery.validate.js内置了许多常用校验方法，只要在相应input标签上按需添加即可。常用如下：

规则	描述
required	必须输入的字段。
type=‘url’	必须输入正确格式的网址 (形如：http:xxx)
type=‘email’	必须输入正确格式的邮件 (形如：xxx@xxx)
type=‘url’	必须输入正确格式的网址 (形如：http:xxx)
type=‘date’	必须输入正确格式的日期
maxlength=’50‘	输入长度最多是 50 的字符串（每个汉字算一个）
minlength=’50‘	输入长度最少是 50 的字符串（每个汉字算一个）
rangelength=’[5,10]’	输入长度必须介于 5 和 10 之间的字符串

举个?：

<form id="myForm">
	<input name="name" required rangelength=[2,40] placeholder="请输入名称">
	<input name="email" required type="email" placeholder="请输入邮箱">
</form>

然后再执行如下js即可：

$("#myForm").validate();

当然了，内置都是比较简单的验证，例如上面url验证，只要以’http:'开头即可验证通过，这无法满足严格要求的情况，这是就需要下面的重头戏了——自定义校验

自定义校验规则：

jquery.validate.js强大之处在于提供了增加自定义验证方法、及时校验、自定义错误样式等一系列操作，下面一一介绍一下。

增加自定义验证：

比如，为上述名称增加唯一性校验：
首先，添加校验方法：

$.validator.addMethod("nameUnique", function(value) {//value为当前input的值
    let nameArr = ['xiaoming','xiaohong'];
    for(let i = 0; i < nameArr.length; i++){
        if(value === nameArr[i]){
            return false  //false表示验证不通过
        }
    }
    return true;//true表示验证通过
}, "名字已存在");//验证不通过时的文案

然后再执行如下函数：

function validator(){
	$("#new-module").validate({
		rules: {
		    name: {
		    	//上述方法名，表示结果为true即为验证通过
		        nameUnique: true
		    }
		}
	})
}

及时校验：

有时需要在用户输入完成后立即校验表单，则需要在上述validator()增加如下配置：

function validator(){
	$("#new-module").validate({
		rules: {
		    name: {
		    	//上述方法名，表示结果为true即为验证通过
		        nameUnique: true
		    }
		}
	})
	//及时校验
	onfocusout: function(element) { $(element).valid(); },
}

自定义错误样式：

自定义错误样式主要在验证未通过时添加，同时在验证通过时删除样式，可在上述validator()增加如下配置：

function validator(){
	$("#new-module").validate({
		rules: {
		    name: {
		    	//上述方法名，表示结果为true即为验证通过
		        nameUnique: true
		    }
		}
	})
	//及时校验
	onfocusout: function(element) { $(element).valid(); },
	//验证不通过时触发
	errorPlacement: function(error, element) {
        error.addClass('alert');
        element.parent().parent().addClass("has-error");
        error.appendTo(element.parent().parent());
    },
    //验证通过时触发
    success: function (error, element) {	//error为错误提示信息元素(一般为label标签)，element为当前被校验的元素  
        error.addClass('alert');   //alert为自定义的css样式，可自由发挥
        error.appendTo(element.parent().parent());//将错误信息添加到被校验元素后面
    }
}

总结

以上介绍了jquery.validate.js一些常用的功能，也是我在开发中实际使用到的功能。当然此插件的功能远不止这些，详细的功能可以参考这篇文章。
这是入职以来的第一篇博客，不足之处还请各位老铁多多包涵。大家有好的想法或者经验欢迎在留言区积极讨论，促进大家共同进步。 萌新一枚，不喜请轻喷哈~~~