当前位置: 首页 > 编程笔记 >

jquery validate 实现动态增加/删除验证规则操作示例

孙永思
2023-03-14
本文向大家介绍jquery validate 实现动态增加/删除验证规则操作示例,包括了jquery validate 实现动态增加/删除验证规则操作示例的使用技巧和注意事项,需要的朋友参考一下

本文实例讲述了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常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

 类似资料:
  • 路过的大佬,应该怎么校验?麻烦大家啦:

  • 一、前言 在第二章《Memcached源码分析 - Memcached源码分析之命令解析(2)》 和第三章《Memcached源码分析 - Memcached源码分析之消息回应(3)》 中我们主要通过Memcached的get命令,分析了Memcached的命令解析和消息回应的模块功能。这一章,我们主要来详细看一下Memcached常用的增删改查操作。 在看Memcached的增删改查操作前,我们

  • 本文向大家介绍JS实现动态增加和删除li标签行的实例代码,包括了JS实现动态增加和删除li标签行的实例代码的使用技巧和注意事项,需要的朋友参考一下 如下所示: HTML: 以上就是小编为大家带来的JS实现动态增加和删除li标签行的实例代码全部内容了,希望大家多多支持呐喊教程~

  • 验证规则的定义通常有两种方式,如果你使用了验证器的话,通常通过rule属性定义验证规则,而如果使用的是独立验证的话,则是通过rule方法进行定义。 属性定义 属性定义方式仅限于验证器,通常类似于下面的方式: <?php namespace app\index\validate; use think\Validate; class User extends Validate { prot

  • 本文向大家介绍jquery 动态增加删除行的简单实例(推荐),包括了jquery 动态增加删除行的简单实例(推荐)的使用技巧和注意事项,需要的朋友参考一下 最近写程序,碰巧有动态增加删除行,下面就记录一下 html就不写了,也没有什么,直接上核心了 新增行 好,下面我们看下addTr方法~~这个是在网上找到的,还是蛮好用的 删除行,这个就比较简单了 动态添加删除行,就这么几行代码,方便大家使用 p

  • 本文向大家介绍java Servlet 实现动态验证码图片示例,包括了java Servlet 实现动态验证码图片示例的使用技巧和注意事项,需要的朋友参考一下 整理文档,搜刮出一个java Servlet 实现动态验证码图片的代码,稍微整理精简一下做下分享。 当然这还需要改进成平常见到的验证码 形式,还需要努力 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。