华山资源网

详解jquery validate实现表单验证 （正则表达式）
网络编程 2024/11/18 佚名
3 1

一、目的

为了更好地实现人机交互，使用jQuery封装库中的validate插件，在用户填写表单时，可以快速地对用户填写的数据进行验证，并做出反馈。

二、validate插件简介  

validate()是插件的核心方法，定义了基本的校验规则和一些有用的配置项。

  • rule:设置表单的验证规则；
  • messages:设置表单不符合验证规则的提示信息；
  • debug:如果这个参数为true,那么表单还会提交，只进行检查，调试时十分方便。

required:必填

minlength:最小长度

maxlength:最大长度

rangelength:长度范围，以数组呈现[2，10]，表示表单输入长度为2到10位

remote:可以通过发现GET或者POST请求进行远程验证，与Ajax的验证进行比较。就是通过ajax实现的
｛
    url:
    type:默认为GET请求
    data:发送的数据
｝

发送GET请求例子：

check:{
          required:true,
          remote:{
            url:"__CONTROLLER__/check"+$("#icode").val
            //__CONTROLLER__表示当前控制器
          }
        }

基本的校验规则

序号 规则 描述 1 required:true 必须输入的字段。 2 remote:"check.php" 使用 ajax 方法调用 check.php 验证输入值。 3 email:true 必须输入正确格式的电子邮件。 4 url:true 必须输入正确格式的网址。 5 date:true 必须输入正确格式的日期。日期校验 ie6 出错，慎用。 6 dateISO:true 必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。 7 number:true 必须输入合法的数字（负数，小数）。 8 digits:true 必须输入整数。 9 creditcard: 必须输入合法的信用卡号。 10 equalTo:"#field" 输入值必须和 #field 相同。 11 accept: 输入拥有合法后缀名的字符串（上传文件的后缀）。 12 maxlength:5 输入长度最多是 5 的字符串（汉字算一个字符）。 13 minlength:10 输入长度最小是 10 的字符串（汉字算一个字符）。 14 rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。 15 range:[5,10] 输入值必须介于 5 和 10 之间。 16 max:5 输入值不能大于 5。 17 min:10 输入值不能小于 10。

validator对象

  • validator.form()验证表单是否有效，返回true或者false;
  • validator.element(element)验证表单中某个元素是否有效，返回true或者false;
  • validator.resetForm()把表单恢复到验证前原来的状态；
  • validator.showErrors(error)针对元素显示特定的错误信息；
  • validator.numberOfInvalids()返回无效的元素数量；

validator对象的静态方法

  • jQuery.validator.addMethod()增加自定义的验证方法;  （即$.validator.addMethod()）
  • jQuery.validator.format()格式化字符串，用参数代替模板中的｛n｝;
  • jQuery.validator.setDefaults()修改插件默认设计；
  • jQuery.validator.addClassRules()为某些包含名为name的class增加组合验证类型。
$.validator.addClassRules({
  txt:{
    required:true,
    rangelength:[2,10]
  }
})//这时class="txt"的类都具备了这个两个验证规则

获取表单元素的验证规则：

$("#username").rules();

为表单元素添加验证规则： 

$("#username").rules('add',rules);

为表单元素删除验证规则：

 $("#username").rules('remove',rules);

三、正则表达式

常用正则表达式：

用户名的正则表达式验证：/^[\w\u4e00-\u9fa5]{2,10}/g(含汉字)

用户名验证：/^\w{2,10}$/(不含汉字，只允许英文字母、数字和下画线，长度为2-10位)

QQ号验证:/^[1,9][0,9]{4,19}$/（第一位数字不为0，5-19位数字）

邮箱验证：/^[a-z0-9]+@([a-z0-9]+\.)+[a-z]{2,4}$/i(不区分大小写)

密码验证：/^\w{6,16}$/(只允许6-16位英文字母、数字和下画线)

手机号验证：/^1[3,5,7,8]\d{9}$/

URL验证：/^http:\/\/[a-z\d-]+(\w\/)+)$/i

$(document).ready(function(){ 
  $("#table").validate({ 
    rules:{ 
      admin_name:{ 
        required:true, 
        checkName:true, 
      }, 
      name:{ 
        required:true,          
      }, 
      admin_pwd:{ 
        required:true, 
        checkPwd:true, 
      }, 
      con_pwd:{ 
        required:true, 
        equalTo:admin_pwd, 
      }, 
      email:{ 
        required:true, 
        checkEmail:true, 
      }, 
      qq:{ 
        required:true, 
        checkQQ:true, 
      }, 
      s_page:{ 
        url:true, 
         
      }, 
      check:{ 
        //required:true, 
        //remote:{ 
          //url:"__CONTROLLER__/check"+$("#icode").val, 
          //__CONTROLLER__表示当前控制器 
          //dataType:"json", 
        //} 
      } 
    }, 
    messages:{ 
      admin_name:{ 
        required:"*必填！", 
        rangelength:"*长度为2到10位！", 
      }, 
      name:{ 
        required:"*必填！", 
      }, 
      admin_pwd:{ 
        required:"*必填！", 
        rangelength:"*长度为6到16位！", 
      }, 
      con_pwd:{ 
        required:"*必填！", 
        equalTo:"*两次输入的密码不一致！" 
      }, 
      email:{ 
        required:"*必填！", 
        email:"*请输入正确的邮箱！", 
      }, 
      qq:{ 
        required:"*必填！", 
      }, 
      s_page:{ 
        url:"*请输入正确的网页地址！", 
      }, 
      check:{ 
        required:"*必填！", 
        remote:"*验证码有误！", 
      }, 
    }, 
    //是否在获取焦点时验证 
    //onfocusout:false, 
    //是否在敲击键盘时验证 
    //onkeyup:false, 
    //提交表单后，（第一个）未通过验证的表单获得焦点 
    focusInvalid:true, 
    //当未通过验证的元素获得焦点时，移除错误提示 
    focusCleanup:true, 
  }); 
   
  //自定义正则表达示验证方法 
  $.validator.addMethod("checkQQ",function(value,element,params){ 
      var checkQQ = /^[1-9][0-9]{4,19}$/; 
      return this.optional(element)||(checkQQ.test(value)); 
    },"*请输入正确的QQ号码！"); 
     
  $.validator.addMethod("checkEmail",function(value,element,params){ 
      var checkEmail = /^[a-z0-9]+@([a-z0-9]+\.)+[a-z]{2,4}$/i; 
      return this.optional(element)||(checkEmail.test(value)); 
    },"*请输入正确的邮箱！"); 
     
  $.validator.addMethod("checkName",function(value,element,params){ 
      var checkName = /^\w{2,10}$/g; 
      return this.optional(element)||(checkName.test(value)); 
    },"*只允许2-10位英文字母、数字或者下画线！"); 
   
  $.validator.addMethod("checkPwd",function(value,element,params){ 
      var checkPwd = /^\w{6,16}$/g; 
      return this.optional(element)||(checkPwd.test(value)); 
    },"*只允许6-16位英文字母、数字或者下画线！"); 
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com