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插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
Jquery EasyUI $.Parser
Jun 02 jQuery
详解jquery选择器的原理
Aug 01 jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
JQuery常见节点操作实例分析
May 15 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
jQuery HTML css()方法与css类实例详解
May 20 jQuery
jQuery+ajax实现文件上传功能
Dec 22 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
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
PHP生成静态HTML文档实现代码
2016/06/23 PHP
详解php中的implements 使用
2017/06/13 PHP
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
2008/09/25 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
2011/11/17 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
2012/12/25 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
怎么选择Javascript框架(Javascript Framework)
2013/11/22 Javascript
Bootstrap每天必学之导航条
2015/11/27 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
2016/09/24 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
2016/12/08 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
vue单页开发父子组件传值思路详解
2018/05/18 Javascript
layui表格数据重载
2019/07/27 Javascript
[51:06]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS Liquid
2018/03/30 DOTA
实例介绍Python中整型
2019/02/11 Python
pandas如何处理缺失值
2019/07/31 Python
Python 使用 PyMysql、DBUtils 创建连接池提升性能
2019/08/14 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
详细分析Python垃圾回收机制
2020/07/01 Python
彻底搞懂python 迭代器和生成器
2020/09/07 Python
萌新的HTML5 入门指南
2020/11/06 HTML / CSS
Superdry瑞典官网:英国日本街头风品牌
2017/05/17 全球购物
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
戴尔新西兰官网:Dell New Zealand
2020/01/07 全球购物
信息专业个人的自我评价
2013/12/27 职场文书
党员公开承诺书范文
2014/03/25 职场文书
垃圾桶标语
2014/06/24 职场文书
2014幼儿园班主任工作总结
2014/12/04 职场文书
出租车拒载检讨书
2015/01/28 职场文书
公司保洁员管理制度
2015/08/04 职场文书
创业计划书之书店
2019/09/10 职场文书
导游词之西湖雷峰塔
2019/09/18 职场文书