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.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
jQuery操作元素追加内容示例
Jan 10 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
jquery实现进度条状态展示
Mar 26 jQuery
html中两种获取标签内的值的方法
Jun 16 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生成扇形比例图实例
2013/11/06 PHP
PHP封装的多文件上传类实例与用法详解
2017/02/07 PHP
PHP简单计算两个时间差的方法示例
2017/06/20 PHP
JS获取页面input控件中所有text控件并追加样式属性
2013/02/25 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
js 自带的sort() 方法全面了解
2016/08/16 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
2016/09/03 Javascript
微信JS-SDK选取手机照片上传功能
2017/04/21 Javascript
微信小程序实现长按删除图片的示例
2018/05/18 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
node省市区三级数据性能测评实例分析
2019/11/06 Javascript
JavaScript装饰者模式原理与用法实例详解
2020/03/09 Javascript
[55:25]2018DOTA2亚洲邀请赛3月29日 小组赛A组 VG VS OG
2018/03/30 DOTA
Python中的lstrip()方法使用简介
2015/05/19 Python
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
对Python实现简单的API接口实例讲解
2018/12/10 Python
python json.loads兼容单引号数据的方法
2018/12/19 Python
Python3.5 + sklearn利用SVM自动识别字母验证码方法示例
2019/05/10 Python
pandas实现excel中的数据透视表和Vlookup函数功能代码
2020/02/14 Python
sklearn和keras的数据切分与交叉验证的实例详解
2020/06/19 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
Interflora澳大利亚:同日鲜花速递
2019/06/25 全球购物
德国消费电子产品购物网站:Guter Kauf
2020/09/15 全球购物
老师推荐信
2013/10/28 职场文书
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
副职竞争上岗演讲稿
2014/05/12 职场文书
毕业生工作求职信
2014/06/30 职场文书
欠款纠纷起诉状
2015/05/19 职场文书
当幸福来敲门观后感
2015/06/01 职场文书
《叶问2》观后感
2015/06/15 职场文书
跟班学习心得体会(共6篇)
2016/01/23 职场文书
pytorch中的torch.nn.Conv2d()函数图文详解
2022/02/28 Python
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server
零基础学java之带参数以及返回值的方法
2022/04/10 Java/Android