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点赞功能实现代码 点个赞吧!
May 29 jQuery
jQuery自定义多选下拉框效果
Jun 19 jQuery
jQuery 实现双击编辑表格功能
Jun 19 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 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
Cannot modify header information错误解决方法
2008/10/08 PHP
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
PHP children()函数讲解
2019/02/03 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
jQuery的deferred对象使用详解
2011/08/20 Javascript
Javascript实现滑块滑动改变值的实现代码
2013/04/12 Javascript
Query中click(),bind(),live(),delegate()的区别
2013/11/19 Javascript
JS+CSS实现DIV层的展开、收缩效果
2016/01/28 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
微信小程序上传图片到php服务器的方法
2019/05/23 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
使用typescript构建Vue应用的实现
2019/08/26 Javascript
JS实现小星星特效
2019/12/24 Javascript
[41:21]夜魇凡尔赛茶话会 第三期02:看图识人
2021/03/11 DOTA
Python实现读取目录所有文件的文件名并保存到txt文件代码
2014/11/22 Python
Pycharm学习教程(5) Python快捷键相关设置
2017/05/03 Python
Python实现字符串匹配算法代码示例
2017/12/05 Python
浅谈python下含中文字符串正则表达式的编码问题
2018/12/07 Python
python代理工具mitmproxy使用指南
2019/07/04 Python
使用NumPy读取MNIST数据的实现代码示例
2019/11/20 Python
浅谈python输出列表元素的所有排列形式
2020/02/26 Python
Python插件机制实现详解
2020/05/04 Python
Matplotlib中%matplotlib inline如何使用
2020/07/28 Python
numpy实现RNN原理实现
2021/03/02 Python
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
结婚保证书范文
2014/04/29 职场文书
精神文明建设标语
2014/06/16 职场文书
小学生感恩父母演讲稿
2014/08/28 职场文书
乡镇党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2015年党风廉政建设工作总结
2015/04/09 职场文书
2016年世界艾滋病日宣传活动总结
2016/04/01 职场文书
python面向对象版学生信息管理系统
2021/06/24 Python
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS
JavaScript正则表达式实现注册信息校验功能
2022/05/30 Java/Android
MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决
2022/12/24 MySQL