关于jQuery插件的使用

记得四月份做毕业设计的时候，当时有一些界面的功能需要实现，问学长，他让我试试几个jQuery插件，记得有一个是实现分页功能的插件，然后自己百度了一下用法，使用了几次均失败了，当时觉得太难上手。这次在项目组，又碰到用jQuery 插件，可能是这次用的插件比较简单，所以很快就会用了，也体验到了其方便之处。

这次主要通过简单介绍jQuery-validate插件的使用示例，来分析jQuery插件如何使用。

一、jQuery-validate表单验证

在项目中关联相应的js文件便可以使用，用法介绍如下：

1、简单使用示例

$("#inputForm").validate({  //"inputForm"为表单id
    	 
    	ignore: "",   //这里表示隐藏的界面也需要验证
    	
        rules:{
            name:{   //name为需要验证的控件名
                required:true,
            }
        },
        messages:{
            name:{
                required:"项目名必填", //默认是英文提示，这里写了之后就是中文提示
            }
        }
    });

除了required外，还有其它的约束条件，可以百度查看相关文档，这里不多介绍

2、定义何时开启验证

    	onfocusout : false ,
    	onkeyup:false,
    	onclick:false,

上面只列出三种情况，还有其它情况可以查看相关文档，默认是true，根据需要改为false

上述代码放在"rules"上面

3、用sweetalert弹出错误消息

/* 重写错误显示消息方法,以alert方式弹出错误消息 */  
    	showErrors : function(errorMap, errorList) {  
    	 var msg = "";  
    	 $.each(errorList, function(i, v) {  
    	  msg += (v.message + "\r\n");  
    	 });  
    	 if (msg != ""){
    		 swal("", msg, "error");
    	 }
    	}

关于sweetalert的使用可以查看相关文档

4、自定义验证方法

         /*  验证日期格式*/
	 $.validator.addMethod("hasDatepicker", function(value, element) {
      //   return !this.optional(element) && !this.optional($(element).parent().prev().children("select")[0]);
		 var reg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/;
		 var regExp = new RegExp(reg);
		 return this.optional(element) || regExp.test(value);
     }, "设备基本信息->请输入正确的日期格式");
	 

        /* 验证上传文件格式*/
	 $.validator.addMethod("checkfile", function(value, element) {
         var filepath = document.getElementById("excel_file").value;
         var fileArr=filepath.split("\\");
         var fileTArr=fileArr[fileArr.length-1].toLowerCase().split(".");
         var filetype=fileTArr[fileTArr.length-1];
         if(filetype != "xls" && filetype != "xlsx" && filetype != ""){
             return false;
         }else{
             return true;
         }
     }, "上传文件格式错误");  

这里有两种自定义的验证方法，是两种典型的类型：

①日期验证：这里输入日期的input可以动态添加，即不知道具体的input的name，上面代码中"hasDatepicker"是日期Input的class名，添加这样的代码后便可验证class为"hasDatepicker"的input中日期格式是否合法。

②文件格式验证：这里的"checkfile"是自定义的验证名，是一个约束条件，与"required"是类似的，但是功能不同，用法也一样。

5、普通按钮触发验证事件

一般都是form表单自带的按钮单击时，触发验证，当按钮为普通的button而不是form自带的按钮时怎么验证呢？

function validform(){
    return $("#inputForm").validate({
    	  //   debug: true, //为true时，只验证不提交
    	ignore: "",
    	/* 重写错误显示消息方法,以alert方式弹出错误消息 */  
    	showErrors : function(errorMap, errorList) {  
    	 var msg = "";  
    	 $.each(errorList, function(i, v) {  
    	  msg += (v.message + "\r\n");  
    	 });  
    	 if (msg != ""){
    		 swal("", msg, "error");
    	 }
    	},  
    	/* 失去焦点时不验证 */  
    	onfocusout : false ,
    	onkeyup:false,
    	onclick:false,
        rules:{
            name:{
                required:true,
            },
            file:{
            	checkfile:true
            }
        },
        messages:{
            name:{
                required:"项目信息->项目名必填",
            },
            file:{
            	checkfile:"导入设备信息->上传文件格式错误"
            }
        }
    });
}

$(validform());  //注册该方法
function btn()
	{
	if(validform().form()){
             //验证通过
	      document.getElementById('inputForm').submit();
         })
         }else{
               //验证未通过，什么都不做
        	}
	}

这里的btn()是按钮的onclick事件

这里主要通过jquery-validate的使用方法，来引出jquery插件的大致使用方法，jquery插件的使用都有异曲同工之处，所以可以举一反三。

还在初学阶段，有错误的地方，后续再更正。