资讯专栏INFORMATION COLUMN

jQuery Validate多实例讲解

yibinnn / 1965人阅读

规则 描述
required:true 必须输入的字段。
remote:"check.php" 使用 ajax 方法调用 check.php 验证输入值。
email:true 必须输入正确格式的电子邮件。
url:true 必须输入正确格式的网址。
date:true 必须输入正确格式的日期。日期校验 ie6 出错,慎用。
dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22。只验证格式,不验证有效性。
number:true 必须输入合法的数字(负数,小数)。
digits:true 必须输入整数。
creditcard:true 必须输入合法的信用卡号。
equalTo:"#field" 输入值必须和 #field 相同。
accept: 输入拥有合法后缀名的字符串(上传文件的后缀)。
maxlength:5 输入长度最多是 5 的字符串(汉字算一个字符)。
minlength:10 输入长度最小是 10 的字符串(汉字算一个字符)。
rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)。
range:[5,10] 输入值必须介于 5 和 10 之间。
max:5 输入值不能大于 5。
min:10 输入值不能小于 10。
推荐格式
  $().ready(function() {
  // 在键盘按下并释放及提交后验证提交表单
    $("#signupForm").validate({
      rules: {
        firstname: "required",
        lastname: "required",
        username: {
          required: true,
          minlength: 2
        },
        password: {
          required: true,
          minlength: 5
        },
        confirm_password: {
          required: true,
          minlength: 5,
          equalTo: "#password"
        },
        email: {
          required: true,
          email: true
        },
        topic: {
          required: "#newsletter:checked",
          minlength: 2
        },
        agree: "required"
      },
      messages: {
        firstname: "请输入您的名字",
        lastname: "请输入您的姓氏",
        username: {
          required: "请输入用户名",
          minlength: "用户名必需由两个字母组成"
        },
        password: {
          required: "请输入密码",
          minlength: "密码长度不能小于 5 个字母"
        },
        confirm_password: {
          required: "请输入密码",
          minlength: "密码长度不能小于 5 个字母",
          equalTo: "两次密码输入不一致"
        },
        email: "请输入一个正确的邮箱",
        agree: "请接受我们的声明",
        topic: "请选择两个主题"
      }
  });
用其他方式替代默认的 SUBMIT
  $().ready(function() {
   $("#signupForm").validate({
          submitHandler:function(form){
              alert("提交事件!");   
              form.submit();
          }    
      });
  });
  $("#btnSubmit").click(function(){
      if ($("#frmAddVisit").valid() == true) {
          submitInfo();
      }
  });
   $(".selector").validate({     
   submitHandler: function(form) 
     {      
        $(form).ajaxSubmit();     
     }  
   }) 
debug,只验证不提交表单
  $().ready(function() {
   $("#signupForm").validate({
          debug:true
      });
  });
更改错误信息显示的位置

默认情况是:把错误信息放在验证的元素后面

参数 类型 描述 默认值
errorClass String 指定错误提示的 css 类名,可以自定义错误提示的样式。 "error"
errorElement String 用什么标签标记错误,默认是 label,可以改成 em。 "label"
errorContainer Selector 显示或者隐藏验证信息,可以自动实现有错误信息出现时把容器属性变为显示,无错误时隐藏,用处不大。
errorLabelContainer Selector 把错误信息统一放在一个容器里面。
wrapper String 用什么标签再把上边的 errorELement 包起来。
  $.validator.setDefaults({
      submitHandler: function() {
        alert("提交事件!");
      }
  });

  $().ready(function() {
      // 提交时验证表单
      var validator = $("#form1").validate({
          errorPlacement: function(error, element) {
              // Append error within linked label
              $( element )
                  .closest( "form" )
                      .find( "label[for="" + element.attr( "id" ) + ""]" )
                          .append( error );
          },
          errorElement: "span",
          messages: {
              user: {
                  required: " (必需字段)",
                  minlength: " (不能少于 3 个字母)"
              },
              password: {
                  required: " (必需字段)",
                  minlength: " (字母不能少于 5 个且不能大于 12 个)",
                  maxlength: " (字母不能少于 5 个且不能大于 12 个)"
              }
          }
      });

      $(".cancel").click(function() {
          validator.resetForm();
      });
  });
异步验证
  remote:{
        url: site_path + "/open/check?d=" + Math.random(),     //后台处理程序
        type: "post",               //数据发送方式
        dataType: "json",           //接受数据格式   
        data: {                     //要传递的数据
        companyname: function() {
               return $("#companyname").val();
              }
          }
  }
      @ResponseBody
      @RequestMapping(value = "/open/check", method = RequestMethod.POST)
      public boolean check(HttpServletRequest httpRequest) {
          return false;
      }

服务端就直接返回boolean值,如果不通过则返回false,反之返回true

添加自定义校验
  addMethod:name, method, message

参数 name 是添加的方法的名字。
参数 method 是一个函数,接收三个参数 (value,element,param) 。
value 是元素的值,element 是元素本身,param 是参数。

  // 中文字两个字节
  jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
      var length = value.length;
      for(var i = 0; i < value.length; i++){
          if(value.charCodeAt(i) > 127){
              length++;
          }
      }
    return this.optional(element) || ( length >= param[0] && length <= param[1] );   
  }, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));

  // 邮政编码验证   
  jQuery.validator.addMethod("isZipCode", function(value, element) {   
      var tel = /^[0-9]{6}$/;
      return this.optional(element) || (tel.test(value));
  }, "请正确填写您的邮政编码");

要在 additional-methods.js 文件中添加或者在 jquery.validate.js 文件中添加。建议一般写在 additional-methods.js 文件中。

  $.validator.addMethod("af",function(value,element,params){  
      if(value.length>1){
          return false;
      }
      if(value>=params[0] && value<=params[1]){
          return true;
      }else{
          return false;
      }
  },"必须是一个字母,且a-f");
  username:{
     af:["a","f"]
  }

addMethod 的第一个参数,是添加的验证方法的名字,这时是 af。
addMethod 的第三个参数,是自定义的错误提示,这里的提示为:"必须是一个字母,且a-f"。
addMethod 的第二个参数,是一个函数,这个比较重要,决定了用这个验证方法时的写法。
如果只有一个参数,直接写,比如 af:"a",那么 a 就是这个唯一的参数,如果多个参数,则写在 [] 里,用逗号分开。

jQuery.validate 中文 API
名称 返回类型 描述
validate(options) Validator 验证所选的 FORM。
valid() Boolean 检查是否验证通过。
rules() Options 返回元素的验证规则。
rules("add",rules) Options 增加验证规则。
rules("remove",rules) Options 删除验证规则。
removeAttrs(attributes) Options 删除特殊属性并且返回它们。

##### Validator

名称 返回类型 描述
form() Boolean 验证 form 返回成功还是失败。
element(element) Boolean 验证单个元素是成功还是失败。
resetForm() undefined 把前面验证的 FORM 恢复到验证前原来的状态。
showErrors(errors) undefined 显示特定的错误信息。
Validator 函数
setDefaults(defaults) undefined 改变默认的设置。
addMethod(name,method,message) undefined 添加一个新的验证方法。必须包括一个独一无二的名字,一个 JAVASCRIPT 的方法和一个默认的信息。
addClassRules(name,rules) undefined 增加组合验证类型,在一个类里面用多种验证方法时比较有用。
addClassRules(rules) undefined 增加组合验证类型,在一个类里面用多种验证方法时比较有用。这个是同时加多个验证方法。
验证的触发方式修改

onsubmit、onfocusout、onkeyup、onclick、focusInvalid默认的时候都是true,focusCleanup默认为false

  $(".selector").validate({  
      onsubmit:false
  })

更多内容可以关注微信公众号,或者访问AppZone网站

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/79829.html

相关文章

  • jQuery Validate实例讲解

    规则 描述 required:true 必须输入的字段。 remote:check.php 使用 ajax 方法调用 check.php 验证输入值。 email:true 必须输入正确格式的电子邮件。 url:true 必须输入正确格式的网址。 date:true 必须输入正确格式的日期。日期校验 ie6 出错,慎用。 dateISO:true 必须输入正确格式的日期(...

    whidy 评论0 收藏0
  • 前端技术 博客文章、书籍 积累

    摘要:好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行 书籍 《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹(修订版)》《JavaScript设计模式》《J...

    LiangJ 评论0 收藏0
  • 前端技术 博客文章、书籍 积累

    摘要:好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行 书籍 《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹(修订版)》《JavaScript设计模式》《J...

    codercao 评论0 收藏0
  • 前端技术 博客文章、书籍 积累

    摘要:好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行 书籍 《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹(修订版)》《JavaScript设计模式》《J...

    huayeluoliuhen 评论0 收藏0
  • 重构 - 设计API的扩展机制

    1.前言 上篇文章,主要介绍了重构的一些概念和一些简单的实例。这一次,详细的说下项目中的一个重构场景--给API设计扩展机制。目的就是为了方便以后能灵活应对需求的改变。当然了,是否需要设计扩展性这个要看API的需求。如果大家有什么建议,欢迎评论留言。 2.扩展性表现形式 2-1.prototype 这个可以说是JS里面最原的一个扩展。比如原生JS没有提供打乱数组顺序的API,但是开发者又想方便使用...

    Lowky 评论0 收藏0

发表评论

0条评论

yibinnn

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<