jquery validate 实现动态增加/删除验证规则操作示例


Posted in jQuery onOctober 28, 2019

本文实例讲述了jquery validate 实现动态增加/删除验证规则操作。分享给大家供大家参考,具体如下:

页面加载完成初始化form validate 

$("#user_regForm").validate({
      errorPlacement: function(error, element){
        if(element.attr("id")=="province"||element.attr("id")=="city"||element.attr("id")=="area"){
          var error_td = element.parent().parent('dd').next();
        }else{
          var error_td = element.parent('dd').next();
        }
        error_td.html("");
        error_td.append(error);
        element.addClass("user_regNok");
      },
      error:function(label,element){
        element.addClass("user_regNok");
      },
      success    : function(label,element){
        label.addClass('reg_validate_right').text('');
        element.removeClass("user_regNok");
      },
      submitHandler:function(form){
        console.info("submit:"+$(form).serializeArray());
        form.submit(); 
      },
      onkeyup: false,
      rules : {
        username:{
          required:true,
          alipay:true,
          remote  : {
            url :'index.php?mod=ajax&act=check_user',
            type:'post',
            data:{
              username : function(){
                return $('#username').val();
              }
            }
          }
        },
        password : {
          required : true,
          rangelength:[6,20]
        },
        password_confirm : {
          required : true,
          equalTo : '#password'
        },
        captcha:{
          required : true,
          maxlength:4,
          remote  : {
            url :'index.php?mod=ajax&act=check_captcha',
            type:'post'
          }
        }
      },
      messages : {
        username:{
          alipay:"输入电子邮箱或手机号码",
          remote:"用户名已存在"
        },
        password : {
          required : '您必须提供一个密码',
          rangelength: '密码长度应在6-20个字符之间'
        },
        password_confirm : {
          required : '您必须再次确认您的密码',
          equalTo : '两次输入的密码不一致'
        },
        captcha:{
          required : "请输入验证码",
          maxlength:"输入4位验证码",
          remote:"验证码错误"
        }
      }
    });

后期比如像增加某些表单的验证规则

var add_user_validate=function(){
    console.info("add_user_validate");
    remove_user_validate();
    $("#province").rules("add",{required:true,min:0,messages:{min:"请选择省份"}});
    $("#city").rules("add",{required:true,min:0,messages:{min:"请选择城市"}});
    $("#area").rules("add",{required:true,min:0,messages:{ min:"请选择区域"}});
    $("#sjhztype").rules("add",{required:true,min:0,messages:{ min:"请选择合作类型"}});
    $("#realname").rules("add",{required:true});
    $("#tel").rules("add",{required:true,mobile:0});
    $("#shopname").rules("add",{required:true});
  }

后来又因为什么原因不详以上元素需要验证

可以删除规则

var remove_user_validate=function(){
    console.info("remove_user_validate");
    $("#province").rules("remove");
    $("#city").rules("remove");
    $("#area").rules("remove");
    $("#sjhztype").rules("remove");
    $("#realname").rules("remove");
    $("#tel").rules("remove");
    $("#shopname").rules("remove");
  }

ok!!

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
React中jquery引用的实现方法
Sep 12 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
jQuery实现简单三级联动效果
Sep 05 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 #jQuery
jquery实现购物车基本功能
Oct 25 #jQuery
使用jQuery实现掷骰子游戏
Oct 24 #jQuery
jquery实现掷骰子小游戏
Oct 24 #jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 #jQuery
jQuery实现轮播图源码
Oct 23 #jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 #jQuery
You might like
GBK的页面输出JSON格式的php函数
2010/02/16 PHP
纯PHP代码实现支付宝批量付款
2015/12/24 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
多个iframe自动调整大小的问题
2006/09/18 Javascript
prototype1.4中文手册
2006/09/22 Javascript
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
js加强的经典分页实例
2013/03/15 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
JavaScrip调试技巧之断点调试
2015/10/22 Javascript
使用yeoman构建angular应用的方法
2017/08/14 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
Vue项目中使用Vux的安装过程
2018/05/01 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
2018/05/17 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
JavaScript实现网页动态生成表格
2020/11/25 Javascript
Python中每次处理一个字符的5种方法
2015/05/21 Python
Python smallseg分词用法实例分析
2015/05/28 Python
在Django中使用Sitemap的方法讲解
2015/07/22 Python
利用python将json数据转换为csv格式的方法
2018/03/22 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
python 列表降维的实例讲解
2018/06/28 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
python try 异常处理(史上最全)
2019/03/07 Python
使用pygame实现垃圾分类小游戏功能(已获校级二等奖)
2020/07/23 Python
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
学习十八大精神心得体会
2013/12/31 职场文书
我的五年职业生涯规划
2014/01/23 职场文书
2014院党委领导班子及其成员群众路线对照检查材料思想汇报
2014/10/04 职场文书
满月酒邀请函
2015/01/30 职场文书
初中生物教学反思
2016/02/20 职场文书
如何书写授权委托书?
2019/06/25 职场文书
MySQL中的引号和反引号的区别与用法详解
2021/10/24 MySQL
javascript对象3个属性特征
2021/11/17 Javascript