验证插件

验证插件

一、引入validate.js插件

二、验证提交规则

默认规则表，有两种方式：1、控件属性方式2、js键值对方式

规则名	说明
required：true	必须输入字段
email：true	必须输入正确格式的电子邮件
url：true	必须输入正确格式的网址
date：true	必须输入正确格式的日期（IE6检测）
dateISO：true	必须输入正确格式的日期（只检验格式，不验证是否有效）
number：true	必须输入合法的数字（负数、小数）
digits：true	必须输入正整数
creditcard：true	必须输入合法的信用卡号
equalTo：”#field”	输入值必须与#field相同（常用作密码确认）
minlength：5	输入长度最小是5的字符串（汉字算一个字符）
Maxlength:10	输入长度最多是10的字符串（汉字算一个字符）
rangeLength:[5,10]	输入长度介于5和10之间的字符串（汉字算一个字符）
range：[5.10]	输入值介于5和10之间
min：5	输入值不能小于5
max：10	输入值不能大于10
remote：”check.php”	使用ajax方法调用check.php验证输入值

 

Html页面：

<form id="reg" action="123.html">

<p>账号：<input type="text"id="user" name="user"></p>

<p>邮件：<input type="text"id="email" name="email"></p>

<p>网址：<input type="text"id="url" name="url"></p>

<p>日期：<input type="text"id="date" name="date"></p>

<p>数字：<input type="text"id="number" name="number"></p>

<p>正整数：<input type="text"id="digits" name="digits"></p>

<p>密码：<input type="password"id="pass" name="pass"></p>

<p>密码确认：<input type="password"name="notpass"></p>

<input type="submit"value="提交">

</form>

Js页面：

$(function(){

   $('#reg').validate({

      rules:{

        user:{

           required:true,

           minlength:2

        },

        email:{

           email:true,

        },

        url:{

           url:true

        },

        date:{

           date:true

        },

        number:{

           number:true

        },

        digits:{

           digits:true

        },

        notpass:{

           equalTo:'#pass'

        }

      },

      /*messages:{

        user:{

        required:"账号不得为空",

        minlength:"账号不得小于2位",

        },

      },*/

   });

});

三、validate()的方法和选项

1、submitHandler:function(form){

        alert(form);

        //当验证成功后执行，且阻止了默认提交，一般用于ajax提交使用

        alert("success");}

2、debug:true,//启用调试模式

3、ignore:'#pass'//忽略某个字段

4、群组的错误提示

   groups:{

        myerror:'user pass'

      },

      focusInvalid:false, //显示群组的错误提示，error-错误提示对象，element为输入文本dom对象

      errorPlacement:function(error,element){

       error.appendTo(‘.myerror’);

      }

5、验证成功后，显示一个图标

Js：

      success:"valid"

css：

.valid{

background: url(../img/123.ico.png) no-repeat right;}

 

6、高亮显示有错误的元素

输入正确后就恢复正常状态
Js代码
highlight:function(element,errorClass){
   $(element).css('border','1px solid red');
  },
  unhighlight:
   function(element,error){
    $(element).css('border','0px solid red');}
四、validate.js其他功能
1、ajax验证功能(验证账号是否被占用)
user.php：<?php
if($_GET[‘user’]==’bnbbs’){
echo ‘false’;}else{
echo ‘true’;}
?>
注意：远程地址只能输出true或false
Js文件：
rules:{
user:{
required:true，
minlength：2，
remote：’user.php’
}
}
2、将多个用户输入值传递到远程服务器
Php文件：
<?php
if($_GET[‘user’]==’bnbbs’&&$_GET[‘pass’]==’12345’){
echo ‘false’;}else{
echo ‘true’;}
?>
Js文件：
rules:{
pass:{
required:true，
minlength：6,
remote:{
url:’user.php’,
data:{
user：function(){
return $(‘’#user);}}}}}
messages:{
pass:{
remote:”账号或密码被占用”；}
}
3、自定义方法(判断是否为合理的邮编)
rules:{
code:{
required:true，
code:true,
}};
messages:{
required:”邮编不得为空”}；
$.validator.addMethod(‘code’,function(value，element){
var=/^[0-9]{6}$/;//限制为6位数字
return this.optional(element)||(tel.test(value));
},’请输入正确的邮编’)