快捷導(dǎo)航

jquery validation驗(yàn)證表單插件

更新時(shí)間：2017年01月07日 10:02:22 作者：Switch_vov

這篇文章主要為大家詳細(xì)介紹了jquery validation驗(yàn)證表單插件的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

jQuery驗(yàn)證表單插件——jquery-validation

The jQuery Validation Plugin provides drop-in validation for your existing forms, while making all kinds of customizations to fit your application really easy. ——官方介紹

validation使用步驟

引入jQuery庫和validation插件

如果需要官方的國際化提示信息，可以導(dǎo)入相應(yīng)的messages_xx.js庫文件。
PS：下載地址：GitHub jzaefferer/jquery-validation

選中表單元素，顯式調(diào)用驗(yàn)證方法

<script type="text/javascript">
  $(function() {
    $("#form").validate();
  });
</script>

書寫驗(yàn)證規(guī)則和消息

<script type="text/javascript">
  $(function() {
    $("#form").validate({
      rules:{},
      messages:{}
    });
  });
</script>

rules規(guī)則語法

rules:{
字段名:校驗(yàn)器,
字段名:校驗(yàn)器,...
}

校驗(yàn)器語法

校驗(yàn)器:值,
校驗(yàn)器:值,...

messages提示語法

message:{
  字段名:{
    校驗(yàn)器:"提示",
    校驗(yàn)器:"提示",...
  }
  字段名:{
    校驗(yàn)器:"提示",
    校驗(yàn)器:"提示",...
  }
}

校驗(yàn)器取值

案例

<script type="text/javascript" src="../../js/jquery-1.11.0.min.js" ></script>
<script type="text/javascript" src="../../js/jquery.validate.min.js" ></script>
<script type="text/javascript" src="../../js/messages_zh.js" ></script>
<script>
  $(function(){
    $("#registForm").validate({
      rules:{
        user:{
          required:true,
          minlength:2
        },
        password:{
          required:true,
          digits:true,
          minlength:6
        },
        repassword:{
          required:true,
          digits:true,
          minlength:6,
          equalTo:"[name='password']"
        },
        email:{
          required:true,
          email:true
        },
        username:{
          required:true,
          minlength:2
        },
        sex:{
          required:true
        }
      },
      messages:{
        user:{
          required:"用戶名不能為空!",
          minlength:"用戶名不得少于2個(gè)字符!"
        },
        password:{
          required:"密碼不能為空!",
          digits:"密碼必須是數(shù)字!",
          minlength:"密碼長度不得低于6位!"
        },
        repassword:{
          required:"確認(rèn)密碼不能為空!",
          digits:"密碼必須是數(shù)字!",
          minlength:"密碼長度不得低于6位!",
          equalTo:"兩次密碼不一致!"
        },
        email:{
          required:"郵箱不能為空!",
          email:"郵箱格式不正確!"
        },
        username:{
          required:"姓名不能為空!",
          minlength:"姓名不得少于2個(gè)字符!"
        },
        sex:{
          required:"性別必須勾選!"
        }
      },
      errorElement: "label", //用來創(chuàng)建錯(cuò)誤提示信息標(biāo)簽
      success: function(label) { //驗(yàn)證成功后的執(zhí)行的回調(diào)函數(shù)
        //label指向上面那個(gè)錯(cuò)誤提示信息標(biāo)簽label
        label.text(" ") //清空錯(cuò)誤提示消息
          .addClass("success"); //加上自定義的success類
      }
    });
  })
</script>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: