Jquery——Day7（验证插件）

ゝ一世哀愁。 2022-07-14 17:19 219阅读 0赞

1、验证插件需要引用validate.js

最主要使用的就是表单验证。

（1）首先，以一个表单为例

（2）此外，在jquery中，可以验证表单内容，如下

$(function(){
    //所有默认行为都可以在这里设置；
     //$.validator.setDefaults({
     //debug:true;
     //});
    
     $('#reg').validate({
     //debug:true,   //开启禁止调试；
     submitHandler:function(form){
     alert('验证成功，准备提交！');
     },
     rules:{
     user:{
     required:true,
     minlength:2,
     },
     pass:{
     required:true,
     minlength:6,
     }
     },
     messages:{
     user:{
     required:'账号不能为空！',
     minlength:jQuery.format('账号不能小于{0}位！'),
     },
     pass:{
     required:'密码不能为空！',
     minlength:jQuery.format('密码不能少于{0}位！');
     },
     }
    
     });
    
    });

2、若要在表单提交时，获取相应的信息，

（1）验证失败error——使用invalidHandler方法

invalidHandler:function(event,validator){
     var error=validator.numberOfInvalids();
     if(error){
     $('.nyError').html('您有'+error+'条错误信息！');
     }
    
    }

（2）验证成功success——使用submitHandler方法

submitHandler:function(form){
     $('.myError').hide();
     alert("验证成功，准备提交！");
    }

（3）获取错误句柄——使用showErrors()方法

showErrors:function(errorMap,errorList){
    	$.each(errorMap,function(index,value){
    		alert(indexd+' '+value);
    	});
    	//alert(errorList[0].element);   //得到当前元素；
    	alert(errorList[0].message);  //得到错误信息；
    
    	var error=this.numberOfInvalids();
    	if(error){
    		$('.myError').html('您有'+error+'条错误信息!');
    	}
    	else{
    		$('.myError').hide();
    	}
    	this.defaultShowErrors();
    }

`3、validate.js的其他功能 （1）服务器端文件user.php`

<?php
    if($_POST['user']=='zhao'&& $_GET['pass']=='123456'){
     echo 'true';
    }
    else{
     echo 'false';
    }
    ?>

（2）同时在1-（2）中rules/message更改为如下：

rules:{
     user:{
     required:true,
     minlength:2,
     //remote:'user.php',
     }
     pass:{
     required:true,
     minlength:6,
     remote:{
     url:'uer.php',
     type:'POST',
     dataType:json,
     data:{
     user:function(){
     return $('#user').val();
     }
     }
     }
     }
    
    }
    message:{
     user:{
     required:'账号不得为空！',
     minlength:jQuery.format('账号不得小于{0}位！');
     },
     pass:{
     required:'密码不能为空！',
     minlength:jQuery.format('密码不能小于{0}位！');
     remote:'账号或密码不正确！',
     }
    }

（3）上述代码会简写：

$('#user').rules('add',{
     required:true,
     minlength:2,,
     messages:{
     required:'账号不能为空！',
     }
    });

（4）对于邮箱的输入

需要借助正则表达式，var tel=/^  $/;

使用时，仅仅需要tel改变，对于其他代码均不改变！

//邮箱编码
    $('#code').rules('add',{
     required:true,
     code:true,
     messages:{
     required:'邮编不能为空！',
     }
    });
    
    //运用正则表达式验证邮箱；
    $.validator.addMethod('code',function(value,element){
     var tel =/^[0-9]{6}$/;
     return this.option(element)||(tel.test(value));
    },'请输入正确的邮箱！');