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插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
jQuery编写textarea输入字数限制代码
Mar 23 jQuery
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
jQuery Tree Multiselect使用详解
May 02 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
jQuery pagination分页示例详解
Oct 23 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 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正则提取图片地址
2014/03/27 PHP
PHP连接SQLServer2005的方法
2015/01/27 PHP
php批量修改表结构实例
2017/05/24 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
PHP常用的类封装小结【4个工具类】
2019/06/28 PHP
共享自己写一个框架DreamScript
2007/01/20 Javascript
情人节之礼 js项链效果
2012/02/13 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
2013/08/26 Javascript
再探JavaScript作用域
2014/09/24 Javascript
javascript解三阶幻方(九宫格)
2015/04/22 Javascript
jQuery获取页面元素绝对与相对位置的方法
2015/06/10 Javascript
Vue.js实现简单ToDoList 前期准备(一)
2016/12/01 Javascript
bootstrap表单示例代码分享
2017/05/18 Javascript
VUE实现一个分页组件的示例
2017/09/13 Javascript
深入理解Vuex 模块化(module)
2017/09/26 Javascript
使用express搭建一个简单的查询服务器的方法
2018/02/09 Javascript
Python Tkinter基础控件用法
2014/09/03 Python
python人人网登录应用实例
2014/09/26 Python
django批量导入xml数据
2016/10/16 Python
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
Python开发的十个小贴士和技巧及长常犯错误
2018/09/27 Python
Python实现转换图片背景颜色代码
2020/04/30 Python
阿里巴巴的Oracle DBA笔试题答案-SQL tuning类
2016/04/03 面试题
C# .NET面试题
2015/11/28 面试题
工程概预算专业毕业生求职信
2013/10/04 职场文书
客户接待方案
2014/02/26 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
内乡县衙导游词
2015/02/05 职场文书
2015年办公室个人工作总结
2015/04/20 职场文书
活动宣传稿范文
2015/07/23 职场文书
企业年会祝酒词
2015/08/11 职场文书
成本低的5个创业项目:投资小、赚钱快
2019/08/20 职场文书
一文读懂navicat for mysql基础知识
2021/05/31 MySQL
mysql优化之query_cache_limit参数说明
2021/07/01 MySQL