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监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
jquery.form.js异步提交表单详解
Apr 25 jQuery
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
jQuery实现弹幕特效
Nov 29 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
Jquery Fade用法详解
Nov 06 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
ajax缓存问题解决途径
2006/12/06 PHP
抓取并下载CSS中所有图片文件的php代码
2011/09/26 PHP
PHP面向对象学习笔记之二 生成对象的设计模式
2012/10/06 PHP
8个必备的PHP功能开发
2015/10/02 PHP
php获取远程文件的内容和大小
2015/11/03 PHP
PHP 中TP5 Request 请求对象的实例详解
2017/07/31 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
Nigma vs Liquid BO3 第一场2.14
2021/03/10 DOTA
jquery 事件冒泡的介绍以及如何阻止事件冒泡
2012/12/25 Javascript
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
2014/02/10 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
学习使用bootstrap3栅格系统
2016/04/12 Javascript
javascript中神奇的 Date对象小结
2017/10/12 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
vue实现学生信息管理系统
2020/05/30 Javascript
python复制与引用用法分析
2015/04/08 Python
朴素贝叶斯分类算法原理与Python实现与使用方法案例
2018/06/26 Python
python使用knn实现特征向量分类
2018/12/26 Python
sklearn+python:线性回归案例
2020/02/24 Python
websocket+sockjs+stompjs详解及实例代码
2018/11/30 HTML / CSS
仓库班组长岗位职责
2013/12/12 职场文书
大学生实习思想汇报
2014/01/12 职场文书
优秀经理事迹材料
2014/02/01 职场文书
黄继光的英雄事迹材料
2014/02/13 职场文书
工程类专业自荐信范文
2014/03/09 职场文书
党员2014两会学习心得体会
2014/03/17 职场文书
2016新年年会主持词
2015/07/06 职场文书
领导干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
2016高校自主招生自荐信范文
2016/01/28 职场文书
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android