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 相关文章推荐
js和jquery中获取非行间样式
May 05 jQuery
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
jQuery中each方法的使用详解
Mar 18 jQuery
菊花转动的jquery加载动画效果
Aug 19 jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
jQuery轮播图功能制作方法详解
Dec 03 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编程网上资源导航
2006/10/09 PHP
PHP实现更新中间关联表数据的两种方法
2014/09/01 PHP
php使用标签替换的方式生成静态页面
2015/05/21 PHP
PHP基于Redis消息队列实现发布微博的方法
2017/05/03 PHP
PHP实现实时生成并下载超大数据量的EXCEL文件详解
2017/10/23 PHP
Laravel获取当前请求的控制器和方法以及中间件的例子
2019/10/11 PHP
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
IE和Firefox下javascript的兼容写法小结
2008/12/10 Javascript
浅谈javascript中字符串String与数组Array
2014/12/31 Javascript
深入浅出理解javaScript原型链
2015/05/09 Javascript
整理Javascript数组学习笔记
2015/11/29 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
2016/06/08 Javascript
Web打印解决方案之普通报表打印功能
2016/08/29 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
2017/06/11 Javascript
js+css实现打字效果
2020/06/24 Javascript
Vue.js实现的购物车功能详解
2019/01/27 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
2020/11/02 Javascript
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
python爬虫爬取淘宝商品信息
2018/02/23 Python
pytorch permute维度转换方法
2018/12/14 Python
python正则-re的用法详解
2019/07/28 Python
python Web flask 视图内容和模板实现代码
2019/08/23 Python
python Canny边缘检测算法的实现
2020/04/24 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
Django中ORM的基本使用教程
2020/12/22 Python
巴西电子产品购物网站:Saldão da Informática
2018/01/09 全球购物
英国Radley包德国官网:Radley London德国
2019/11/18 全球购物
自荐信封面
2013/12/04 职场文书
合同专员岗位职责
2013/12/18 职场文书
护士进修自我鉴定
2014/02/07 职场文书
捐书活动总结
2014/05/04 职场文书
大学生个人简历自荐信
2015/03/06 职场文书
2015教师节师德演讲稿
2015/03/19 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书
python执行js代码的方法
2021/05/13 Python
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android