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 23 jQuery
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
详解jquery选择器的原理
Aug 01 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 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+Mysql日期时间如何转换(UNIX时间戳和格式化日期)
2012/07/15 PHP
PHP数字和字符串ID互转函数(类似优酷ID)
2014/06/30 PHP
PHP中使用CURL获取页面title例子
2015/01/07 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
thinkPHP通用控制器实现方法示例
2017/11/23 PHP
Nigma vs Liquid BO3 第一场2.13
2021/03/10 DOTA
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
js加入收藏以及使用Jquery更改透明度
2014/01/26 Javascript
javascript实现数字+字母验证码的简单实例
2014/02/10 Javascript
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
Vue Autocomplete 自动完成功能简单示例
2019/05/25 Javascript
Vue实现微信支付功能遇到的坑
2019/06/05 Javascript
微信小程序在text文本实现多种字体样式
2019/11/08 Javascript
python基础教程之获取本机ip数据包示例
2014/02/10 Python
Python实现发送QQ邮件的封装
2017/07/14 Python
python 打印直角三角形,等边三角形,菱形,正方形的代码
2017/11/21 Python
django上传图片并生成缩略图方法示例
2017/12/11 Python
Python元组常见操作示例
2019/02/19 Python
python binascii 进制转换实例
2019/06/12 Python
详解程序意外中断自动重启shell脚本(以Python为例)
2019/07/26 Python
python进阶之自定义可迭代的类
2019/08/20 Python
在Python中获取操作系统的进程信息
2019/08/27 Python
wxPython实现绘图小例子
2019/11/19 Python
tensorflow模型的save与restore,及checkpoint中读取变量方式
2020/05/26 Python
python使用hdfs3模块对hdfs进行操作详解
2020/06/06 Python
HTML5开发动态音频图的实现
2020/07/02 HTML / CSS
匡威比利时官网:Converse Belgium
2017/04/13 全球购物
美国花园雕像和家居装饰网上商店:Design Toscano
2019/03/09 全球购物
实习教师个人的自我评价
2013/11/08 职场文书
《唯一的听众》教学反思
2014/02/20 职场文书
稽核岗位职责
2015/02/10 职场文书
学会感恩主题班会
2015/08/12 职场文书
python删除csv文件的行列
2021/04/06 Python