jquery validation驗證表單插件

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

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

jQuery驗證表單插件——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插件

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

選中表單元素，顯式調用驗證方法

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

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

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

rules規(guī)則語法

rules:{
字段名:校驗器,
字段名:校驗器,...
}

校驗器語法

校驗器:值,
校驗器:值,...

messages提示語法

message:{
  字段名:{
    校驗器:"提示",
    校驗器:"提示",...
  }
  字段名:{
    校驗器:"提示",
    校驗器:"提示",...
  }
}

校驗器取值

案例

<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個字符!"
        },
        password:{
          required:"密碼不能為空!",
          digits:"密碼必須是數(shù)字!",
          minlength:"密碼長度不得低于6位!"
        },
        repassword:{
          required:"確認密碼不能為空!",
          digits:"密碼必須是數(shù)字!",
          minlength:"密碼長度不得低于6位!",
          equalTo:"兩次密碼不一致!"
        },
        email:{
          required:"郵箱不能為空!",
          email:"郵箱格式不正確!"
        },
        username:{
          required:"姓名不能為空!",
          minlength:"姓名不得少于2個字符!"
        },
        sex:{
          required:"性別必須勾選!"
        }
      },
      errorElement: "label", //用來創(chuàng)建錯誤提示信息標簽
      success: function(label) { //驗證成功后的執(zhí)行的回調函數(shù)
        //label指向上面那個錯誤提示信息標簽label
        label.text(" ") //清空錯誤提示消息
          .addClass("success"); //加上自定義的success類
      }
    });
  })
</script>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: