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 submit()不能提交表单的解决方法
Apr 24 jQuery
jQuery树插件zTree使用方法详解
May 02 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 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
上海无线电三厂简史修改版
2021/03/01 无线电
十天学会php之第五天
2006/10/09 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
PHP内置加密函数详解
2016/11/20 PHP
可以文本显示的公告栏的js代码
2007/03/11 Javascript
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
IE6下opacity与JQuery的奇妙结合
2013/03/01 Javascript
将list转换为json失败的原因
2013/12/17 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
BootStrap实用代码片段之一
2016/03/22 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
2016/05/05 Javascript
详解JS中的快速排序与冒泡
2017/01/10 Javascript
JS传参及动态修改页面布局
2017/04/13 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
微信小程序删除处理详解
2017/08/16 Javascript
微信小程序实现上拉加载功能
2019/11/20 Javascript
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
Python实现LRU算法的2种方法
2015/06/24 Python
python+mongodb数据抓取详细介绍
2017/10/25 Python
python matplotlib画图实例代码分享
2017/12/27 Python
Python MySQLdb 使用utf-8 编码插入中文数据问题
2018/03/13 Python
Python socket实现简单聊天室
2018/04/01 Python
python编程使用协程并发的优缺点
2018/09/20 Python
Django 路由控制的实现代码
2018/11/08 Python
Django 迁移、操作数据库的方法
2019/08/02 Python
python实现图片上添加图片
2019/11/26 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
Toppik顶丰增发纤维官网:解决头发稀疏
2017/12/30 全球购物
科技之星事迹材料
2014/06/02 职场文书
离婚协议书范本及离婚须知
2014/10/15 职场文书
党委工作总结2015
2015/04/27 职场文书