溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間:2020-10-05 13:16:28 來(lái)源:腳本之家 閱讀:222 作者:lihaiboas1 欄目:web開發(fā)

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

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

后期比如像增加某些表單的驗(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:"請(qǐng)選擇省份"}});
    $("#city").rules("add",{required:true,min:0,messages:{min:"請(qǐng)選擇城市"}});
    $("#area").rules("add",{required:true,min:0,messages:{ min:"請(qǐng)選擇區(qū)域"}});
    $("#sjhztype").rules("add",{required:true,min:0,messages:{ min:"請(qǐng)選擇合作類型"}});
    $("#realname").rules("add",{required:true});
    $("#tel").rules("add",{required:true,mobile:0});
    $("#shopname").rules("add",{required:true});
  }

后來(lái)又因?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頁(yè)面元素操作技巧匯總》、《jQuery常見(jiàn)事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》

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

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI