快捷導(dǎo)航

jQuery驗(yàn)證插件validation使用指南

更新時(shí)間：2015年04月21日 10:26:05 投稿：hebedich

jquery.validation.js在前端驗(yàn)證中使用起來非常方便,提供的功能基本上能滿足大部分驗(yàn)證需求，下面我們就來仔細(xì)研究下這款jQuery插件的具體使用方法。

在網(wǎng)站開發(fā)過程中，有時(shí)我們需要驗(yàn)證用戶輸入的信息是否符合我們的要求，所以我們會(huì)對(duì)用戶提交的數(shù)據(jù)進(jìn)行驗(yàn)證。驗(yàn)證分兩次進(jìn)行，一次是在客戶端，一次是在服務(wù)端?？蛻舳说尿?yàn)證可以提升用戶的體驗(yàn)。

jquery驗(yàn)證插件有很多，實(shí)現(xiàn)的功能也基本相同。本文介紹的只是jquery驗(yàn)證插件中的一種jquery.validate

jquery.Validation是一款優(yōu)秀的jquery插件,它能對(duì)客戶端表單進(jìn)行驗(yàn)證,并且提供了許多可以定制的屬性和方法,良好的擴(kuò)展性。

1.jquery.validate插件功能

簡(jiǎn)單實(shí)現(xiàn)客戶端信息驗(yàn)證，過濾不符合要求的信息

2.jquery.validate官方地址

官方地址：http://jqueryvalidation.org/,有詳細(xì)的插件使用說明

官方demo：http://jquery.bassistance.de/validate/demo/

3.jquery.validate使用方法

1.引用js

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>

2.css樣式，可自定義，簡(jiǎn)單的只需要添加error樣式，也可使用官方demo中的樣式。

.error{
  color:red;
  margin-left:8px;
}

3.js代碼

$(document).ready(function() {
  // validate signup form on keyup and submit
  var validator = $("#signupform").validate({
    rules: {
      firstname: "required",
      username: {
        required: true,
        minlength: 2
      },
      password: {
        required: true,
        minlength: 5
      },
      password_confirm: {
        required: true,
        minlength: 5,
        equalTo: "#password"
      },
      email: {
        required: true,
        email: true,
      },
      dateformat: "required",
      terms: "required"
    },
    messages: {
      firstname: "姓名不能為空",
      username: {
        required: "用戶名不能為空",
        minlength: jQuery.format("用戶名只少由 {0} 字符組成")
      },
      password: {
        required: "密碼不能為空",
        minlength: jQuery.format("密碼只少由 {0} 字符組成")
      },
      password_confirm: {
        required: "確認(rèn)密碼不能為空",
        minlength: jQuery.format("確認(rèn)密碼只少由 {0} 字符組成"),
        equalTo: "秘密與確認(rèn)密碼不一致"
      },
      email: {
        required: "郵箱不能為空",
        email: "郵箱格式不正確"
      },
      dateformat: "請(qǐng)選擇性別",
      terms: " "
    },
    // the errorPlacement has to take the table layout into account
    errorPlacement: function(error, element) {
      if ( element.is(":radio") )
        error.appendTo( element.parent().next().next());
      else if ( element.is(":checkbox") )
        error.appendTo ( element.next());
      else
        error.appendTo( element.parent().next());
    },
    // specifying a submitHandler prevents the default submit, good for the demo
    submitHandler: function() {
      alert("submitted!");
    },
    // set this class to error-labels to indicate valid fields
    success: function(label) {
      // set &nbsp; as text for IE
      label.html("&nbsp;").addClass("checked");
    },
    highlight: function(element, errorClass) {
      $(element).parent().next().find("." + errorClass).removeClass("checked");
    }
  });
});

以上的代碼只使用了插件提供的屬性和方法。也可以自定義驗(yàn)證方法。如

$.validator.addMethod("checkUserName", function(value) {

    //value為驗(yàn)證的值，對(duì)應(yīng)于元素id

  //方法代碼

}, '用戶名格式不正確');

使用自定義方法也非常簡(jiǎn)單，只需要元素id:”checkUserName”

4.使用的html

<form id="signupform" autocomplete="off" method="get" action="">
   <table>
   <tr>
    <td class="label"><label id="lfirstname" for="firstname">姓名</label></td>
    <td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td>
    <td class="status"></td>
   </tr>
   <tr>
    <td class="label"><label id="lusername" for="username">用戶名</label></td>
    <td class="field"><input id="username" name="username" type="text" value="" maxlength="50" /></td>
    <td class="status"></td>
   </tr>
   <tr>
    <td class="label"><label id="lpassword" for="password">密碼</label></td>
    <td class="field"><input id="password" name="password" type="password" maxlength="50" value="" /></td>
    <td class="status"></td>
   </tr>
   <tr>
    <td class="label"><label id="lpassword_confirm" for="password_confirm">確認(rèn)密碼</label></td>
    <td class="field"><input id="password_confirm" name="password_confirm" type="password" maxlength="50" value="" /></td>
    <td class="status"></td>
   </tr>
   <tr>
    <td class="label"><label id="lemail" for="email">郵箱</label></td>
    <td class="field"><input id="email" name="email" type="text" value="" maxlength="150" /></td>
    <td class="status"></td>
   </tr>
         <tr>
    <td class="label"><label>性別</label></td>
    <td class="field" colspan="2" style="vertical-align: top; padding-top: 2px;">
    <table>
    <tbody>

    <tr>
      <td style="padding-right: 5px;">
        <input id="sex_men" name="dateformat" type="radio" value="0" />
        <label id="lbl_sex_men" for="dateformat_eu">男</label>
      </td>
      <td style="padding-left: 5px;">
        <input id="sex_women" name="dateformat" type="radio" value="1" />
        <label id="lbl_sex_women" for="dateformat_am">女</label>
      </td>
      <td>
      </td>
    </tr>
    </tbody>
    </table>
    </td>
   </tr>

   <tr>
    <td class="label">&nbsp;</td>
    <td class="field" colspan="2">
      <div id="termswrap">
        <input id="terms" type="checkbox" name="terms" />
        <label id="lterms" for="terms">以閱讀并同意網(wǎng)站條款.</label>
      </div> <!-- /termswrap -->
    </td>
   </tr>
   <tr>
    <td class="label"></td>
    <td class="field" colspan="2">
    <input id="signupsubmit" name="signup" type="submit" value="注冊(cè)" />
    </td>
   </tr>

   </table>
</form>

更多驗(yàn)證方法的應(yīng)用請(qǐng)查看http://jqueryvalidation.org/

您可能感興趣的文章: