快捷導(dǎo)航

jquery validate 實(shí)現(xiàn)動態(tài)增加/刪除驗(yàn)證規(guī)則操作示例

更新時(shí)間：2019年10月28日 10:34:05 作者：lihaiboas1

這篇文章主要介紹了jquery validate 實(shí)現(xiàn)動態(tài)增加/刪除驗(yàn)證規(guī)則操作,結(jié)合實(shí)例形式分析了jQuery validate表單驗(yàn)證相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了jquery validate 實(shí)現(xiàn)動態(tài)增加/刪除驗(yàn)證規(guī)則操作。分享給大家供大家參考，具體如下：

頁面加載完成初始化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:"輸入電子郵箱或手機(jī)號碼",
          remote:"用戶名已存在"
        },
        password : {
          required : '您必須提供一個密碼',
          rangelength: '密碼長度應(yīng)在6-20個字符之間'
        },
        password_confirm : {
          required : '您必須再次確認(rèn)您的密碼',
          equalTo : '兩次輸入的密碼不一致'
        },
        captcha:{
          required : "請輸入驗(yàn)證碼",
          maxlength:"輸入4位驗(yàn)證碼",
          remote:"驗(yàn)證碼錯誤"
        }
      }
    });

后期比如像增加某些表單的驗(yàn)證規(guī)則

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:"請選擇區(qū)域"}});
    $("#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});
  }

后來又因?yàn)槭裁丛虿辉斠陨显匦枰?yàn)證

可以刪除規(guī)則

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！！

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: