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实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
jQuery pagination分页示例详解
Oct 23 jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 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
真正面向对象编程:PHP5.01发布
2006/10/09 PHP
PHP处理会话函数大总结
2015/08/05 PHP
ThinkPHP模板标签eq if 中区分0,null,false的方法
2017/03/24 PHP
php使用fullcalendar日历插件详解
2019/03/06 PHP
JS 学习笔记 防止发生命名冲突
2009/07/30 Javascript
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
基于Jquery的仿照flash放大图片效果代码
2011/03/16 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
2011/11/04 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
2015/11/25 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
原生js实现addclass,removeclass,toggleclasss实例
2016/11/24 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
JavaScript中的一些实用小技巧总结
2019/04/07 Javascript
JS实现滑动导航效果
2020/01/14 Javascript
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
详解JavaScript中分解数字的三种方法
2021/01/05 Javascript
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
Python序列循环移位的3种方法推荐
2018/04/09 Python
查看Django和flask版本的方法
2018/05/14 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
python 格式化输出百分号的方法
2019/01/20 Python
python队列Queue的详解
2019/05/10 Python
用python打印菱形的实操方法和代码
2019/06/25 Python
python 读取修改pcap包的例子
2019/07/23 Python
解决Python中回文数和质数的问题
2019/11/24 Python
深入理解css属性的选择对动画性能的影响
2016/04/20 HTML / CSS
html5自动播放mov格式视频的实例代码
2020/01/14 HTML / CSS
苹果Mac升级:MacSales.com
2017/11/20 全球购物
Farfetch澳大利亚官网:Farfetch Australia
2020/04/26 全球购物
外贸销售员求职的自我评价
2013/11/23 职场文书
小学校长汇报材料
2014/08/20 职场文书
试用期旷工辞退通知书
2015/04/17 职场文书