快捷導(dǎo)航

基于BootStrap與jQuery.validate實(shí)現(xiàn)表單提交校驗(yàn)功能

更新時(shí)間：2016年12月22日 09:25:05 作者：IT小兵

學(xué)習(xí)前臺(tái)后臺(tái)最開(kāi)始接觸的業(yè)務(wù)都是用戶(hù)注冊(cè)和登錄,下面通過(guò)本文給大家介紹BootStrap與jQuery.validate實(shí)現(xiàn)表單提交校驗(yàn)功能，感興趣的朋友一起學(xué)習(xí)吧

談?wù)劚韱涡ｒ?yàn)

這大概是一種慣例，學(xué)習(xí)前臺(tái)后臺(tái)最開(kāi)始接觸的業(yè)務(wù)都是用戶(hù)注冊(cè)和登錄。現(xiàn)在社會(huì)堅(jiān)持以人為本的理念，在網(wǎng)站開(kāi)發(fā)過(guò)程同樣如此。User是我們面對(duì)較多的對(duì)象，也是較核心的對(duì)象。最開(kāi)始的用戶(hù)注冊(cè)和登陸這塊，也就尤為重要。

直接看demo：http://www.suchso.com/code/bootstrapvalidate/

用戶(hù)注冊(cè)和登錄其實(shí)往往比我們想象的難。就比如表單校驗(yàn)，里面涵蓋的內(nèi)容其實(shí)挺多，就前臺(tái)而言，你需要了解：

1.正則表達(dá)式的基本了解

其實(shí)正則并不難，并且在學(xué)會(huì)后能帶給你極大的成就感，享受那種事半功倍的效果吧。

2.ajax異步請(qǐng)求

在驗(yàn)證用戶(hù)名是否存在、用戶(hù)登錄時(shí)賬號(hào)或者密碼錯(cuò)誤時(shí)給出相應(yīng)的提示。

3.一些方便的驗(yàn)證庫(kù)，比如jQuery.validate

正因?yàn)槿绱似毡榈男枨蠛鸵欢ǖ膹?fù)雜性，bootstrap表單和jQuery.validate表單校驗(yàn)等一些優(yōu)秀的類(lèi)庫(kù)專(zhuān)為人們解決UI、表單校驗(yàn)問(wèn)題。

下面就是我用bootstrap+jQuery.validate做的界面：

bootstrap3基本表單和水平表單

基本表單

基本的表單結(jié)構(gòu)是 Bootstrap 自帶的，下面列出了創(chuàng)建基本表單的步驟：

向父元素<form> 添加 role="form"。

把標(biāo)簽和控件放在一個(gè)帶有 class .form-group 的 <div> 中。這是獲取最佳間距所必需的。

向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。

<form role="form">
  <div class="form-group">
   <label for="name">名稱(chēng)</label>
   <input type="text" class="form-control" id="name" 
     placeholder="請(qǐng)輸入名稱(chēng)">
  </div>
</form>

效果如下：

水平表單

在了解水平表單之間，我們應(yīng)該對(duì)bootstrap的網(wǎng)格系統(tǒng)有所了解。

Bootstrap 包含了一個(gè)響應(yīng)式的、移動(dòng)設(shè)備優(yōu)先的、不固定的網(wǎng)格系統(tǒng)，可以隨著設(shè)備或視口大小的增加而適當(dāng)?shù)財(cái)U(kuò)展到 12 列。它包含了用于簡(jiǎn)單的布局選項(xiàng)的預(yù)定義類(lèi)，也包含了用于生成更多語(yǔ)義布局的功能強(qiáng)大的混合類(lèi)。

響應(yīng)式網(wǎng)格系統(tǒng)隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列,也就是說(shuō)它是以百分比定義寬度的。

水平表單與其他表單不僅標(biāo)記的數(shù)量上不同，而且表單的呈現(xiàn)形式也不同。如需創(chuàng)建一個(gè)水平布局的表單，請(qǐng)按下面的幾個(gè)步驟進(jìn)行：

向父 <form> 元素添加 class .form-horizontal。

把標(biāo)簽和控件放在一個(gè)帶有 class .form-group 的 <div> 中。

向標(biāo)簽添加 class .control-label。

<form class="form-horizontal" role="form">
  <div class="form-group">
   <label for="firstname" class="col-sm-2 control-label">名字</label>
   <div class="col-sm-10">
     <input type="text" class="form-control" id="firstname" 
      placeholder="請(qǐng)輸入名字">
   </div>
  </div>
</form>

效果如下：

jQuery.validate 自定義校驗(yàn)方法

自定義校驗(yàn)方法

// 手機(jī)號(hào)碼驗(yàn)證
jQuery.validator.addMethod("isPhone", function(value, element) {
  var length = value.length;
  return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value));
}, "請(qǐng)正確填寫(xiě)您的手機(jī)號(hào)碼。");

調(diào)用自定義校驗(yàn)

rules : {
  phone : {
      required : true,
      isPhone : true
    }
}

自定義錯(cuò)誤顯示

參數(shù)	類(lèi)型	描述	默認(rèn)值
errorClass	String	指定錯(cuò)誤提示的 css 類(lèi)名，可以自定義錯(cuò)誤提示的樣式。	"error"
errorElement	String	用什么標(biāo)簽標(biāo)記錯(cuò)誤，默認(rèn)是 label，可以改成 em。	"label"
errorPlacement	function	跟一個(gè)函數(shù)，可以自定義錯(cuò)誤放到哪里。	input元素之后
success		要驗(yàn)證的元素通過(guò)驗(yàn)證后的動(dòng)作，如果跟一個(gè)字符串，會(huì)當(dāng)作一個(gè) css 類(lèi)，也可跟一個(gè)函數(shù)。	無(wú)
highlight	function	可以給未通過(guò)驗(yàn)證的元素加效果、閃爍等。	無(wú)

register.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>注冊(cè)</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<link type="text/css" href="jslib/bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="jslib/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="scripts/form.js" type="text/javascript"></script>
<script src="jslib/jQuery.validate/jquery.validate.js" type="text/javascript"></script>
<script src="jslib/bootstrap-3.3.5/bootstrap.min.js" type="text/javascript"></script>
<style type="text/css">
#register-form{
  border: 1px solid rgb(197, 197, 197);
  width: 1000px;
  margin: auto;
  border-image: none;
  padding: 30px;
  border-radius: 3px;
}
</style>
</head>
<body>
  <h1 class="text-center text-danger">用戶(hù)注冊(cè)</h1><br>
  <form id="register-form" role="form" class="form-horizontal" method="get">
    <div class="form-group">
      <label class="col-sm-2 control-label" for="firstname">用戶(hù)名：</label>
      <div class="col-sm-5">
        <input class="form-control" id="firstname" name="firstname" />
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-2 control-label" for="password">密碼：</label>
      <div class="col-sm-5">
        <input class="form-control" id="password" name="password" type="password" />
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-2 control-label" for="confirm_password">確認(rèn)密碼：</label>
      <div class="col-sm-5">
        <input class="form-control" id="confirm_password" name="confirm_password" type="password" />
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-2 control-label" for="email">E-Mail：</label>
      <div class="col-sm-5">
        <input class="form-control" id="email" name="email" />
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-2 control-label" for="phone">手機(jī)號(hào)碼：</label>
      <div class="col-sm-5">
        <input class="form-control" id="phone" name="phone" />
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-2 control-label" for="tel">固定電話(huà)：</label>
      <div class="col-sm-5">
        <input class="form-control" id="tel" name="tel" />
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-2 control-label" for="address">家庭住址：</label>
      <div class="col-sm-5">
        <input class="form-control" id="address" name="address" />
      </div>
    </div>
    <div class="form-group">
      <div class="col-md-offset-2 col-md-10">
        <button type="submit" class="btn btn-primary btn-sm">注冊(cè)</button>
        <button type="reset" class="btn btn-primary btn-sm">重置</button>
      </div>
    </div>
  </form>
</body>
</html>

form.js

$(document).ready(function() {
  // 手機(jī)號(hào)碼驗(yàn)證
  jQuery.validator.addMethod("isPhone", function(value, element) {
    var length = value.length;
    return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value));
  }, "請(qǐng)正確填寫(xiě)您的手機(jī)號(hào)碼。");
  // 電話(huà)號(hào)碼驗(yàn)證
  jQuery.validator.addMethod("isTel", function(value, element) {
    var tel = /^(\d{3,4}-)?\d{7,8}$/g; // 區(qū)號(hào)－3、4位 號(hào)碼－7、8位
    return this.optional(element) || (tel.test(value));
  }, "請(qǐng)正確填寫(xiě)您的電話(huà)號(hào)碼。");
  // 匹配密碼，以字母開(kāi)頭，長(zhǎng)度在6-12之間，必須包含數(shù)字和特殊字符。
  jQuery.validator.addMethod("isPwd", function(value, element) {
    var str = value;
    if (str.length < 6 || str.length > 18)
      return false;
    if (!/^[a-zA-Z]/.test(str))
      return false;
    if (!/[0-9]/.test(str))
      return fasle;
    return this.optional(element) || /[^A-Za-z0-9]/.test(str);
  }, "以字母開(kāi)頭，長(zhǎng)度在6-12之間，必須包含數(shù)字和特殊字符。");
  $("#register-form").validate({
    errorElement : 'span',
    errorClass : 'help-block',
    rules : {
      firstname : "required",
      email : {
        required : true,
        email : true
      },
      password : {
        required : true,
        isPwd : true
      },
      confirm_password : {
        required : true,
        isPwd : true,
        equalTo : "#password"
      },
      phone : {
        required : true,
        isPhone : true
      },
      tel : {
        isTel : true
      },
      address : {
        minlength : 10
      }
    },
    messages : {
      firstname : "請(qǐng)輸入姓名",
      email : {
        required : "請(qǐng)輸入Email地址",
        email : "請(qǐng)輸入正確的email地址"
      },
      password : {
        required : "請(qǐng)輸入密碼",
        minlength : jQuery.format("密碼不能小于{0}個(gè)字 符")
      },
      confirm_password : {
        required : "請(qǐng)輸入確認(rèn)密碼",
        minlength : "確認(rèn)密碼不能小于5個(gè)字符",
        equalTo : "兩次輸入密碼不一致不一致"
      },
      phone : {
        required : "請(qǐng)輸入手機(jī)號(hào)碼"
      },
      tel : {
        required : "請(qǐng)輸入座機(jī)號(hào)碼"
      },
      address : {
        required : "請(qǐng)輸入家庭地址",
        minlength : jQuery.format("家庭地址不能少于{0}個(gè)字符")
      }
    },
    //自定義錯(cuò)誤消息放到哪里
    errorPlacement : function(error, element) {
      element.next().remove();//刪除顯示圖標(biāo)
      element.after('<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>');
      element.closest('.form-group').append(error);//顯示錯(cuò)誤消息提示
    },
    //給未通過(guò)驗(yàn)證的元素進(jìn)行處理
    highlight : function(element) {
      $(element).closest('.form-group').addClass('has-error has-feedback');
    },
    //驗(yàn)證通過(guò)的處理
    success : function(label) {
      var el=label.closest('.form-group').find("input");
      el.next().remove();//與errorPlacement相似
      el.after('<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>');
      label.closest('.form-group').removeClass('has-error').addClass("has-feedback has-success");
      label.remove();
    },
  });
});

以上所述是小編給大家介紹的基于BootStrap與jQuery.validate實(shí)現(xiàn)表單提交校驗(yàn)功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: