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 相关文章推荐
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
jQuery 动画与停止动画效果实例详解
May 19 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
php过滤XSS攻击的函数
2013/11/12 PHP
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
PHP两种去掉数组重复值的方法比较
2014/06/19 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
php版阿里云OSS图片上传类详解
2016/12/01 PHP
详解Yii2高级版引入bootstrap.js的一个办法
2017/03/21 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
JS获取IUSR_机器名和IWAM_机器名帐号的密码
2006/12/06 Javascript
jQuery实现原理的模拟代码 -6 代码下载
2010/08/16 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
2016/10/31 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
Vue2.0实现购物车功能
2017/06/05 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
JsChart组件使用详解
2018/03/04 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
简单通过settimeout看javascript的运行机制
2019/05/10 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
2020/12/10 Javascript
[36:29]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs TNC
2018/04/02 DOTA
浅谈python字典多键值及重复键值的使用
2016/11/04 Python
Python实现的文本编辑器功能示例
2017/06/30 Python
详解Python中for循环是如何工作的
2017/06/30 Python
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
python绘制双柱形图代码实例
2017/12/14 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
深入解读CSS3中transform变换模型的渲染
2016/05/27 HTML / CSS
美国摄影爱好者购物网站:Focus Camera
2016/10/21 全球购物
美国在线宠物用品商店:Entirely Pets
2017/01/01 全球购物
澳洲最大的时尚奢侈品电商平台:Cettire
2020/06/15 全球购物
高中生学习总结的自我评价范文
2013/10/13 职场文书
学校岗位设置方案
2014/01/16 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
老人与海读书笔记
2015/06/26 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书