jquery插件bootstrapValidator數(shù)據(jù)驗(yàn)證詳解

更新時(shí)間：2016年11月09日 15:52:56 作者：黑衣帽子

這篇文章主要為大家詳細(xì)介紹了jquery插件bootstrapValidator數(shù)據(jù)驗(yàn)證使用教程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

因?yàn)轫?xiàng)目需要數(shù)據(jù)驗(yàn)證，看bootstrapValidator 還不錯(cuò)，就上手一直，完美兼容，話不多說(shuō)。

bootstrap：能夠增加兼容性的強(qiáng)大框架.

需要引用css：

bootstrap.min.css

bootstrapValidator.min.css

js:

jquery-1.10.2.min.js

bootstrap.min.js

bootstrapValidator.min.js

（下載實(shí)例）

以上這些都是必須的。

先上個(gè)簡(jiǎn)單的例子,只要導(dǎo)入相應(yīng)的文件可以直接運(yùn)行：

<!DOCTYPE html>
<html>
<head>
 <title>Using Ajax to submit data</title>

 <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/>
 <link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/>

 <script type="text/javascript" src="../vendor/jquery/jquery-1.10.2.min.js"></script>
 <script type="text/javascript" src="../vendor/bootstrap/js/bootstrap.min.js"></script>
 <script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script>
</head>
<body>
<div class="container">
 <!-- class都是bootstrap定義好的樣式，驗(yàn)證是根據(jù)input中的name值 -->
 <form id="defaultForm" method="post" class="form-horizontal" action="ajaxSubmit.php">
 <!-- 下面這個(gè)div必須要有，插件根據(jù)這個(gè)進(jìn)行添加提示 -->
 <div class="form-group">
  <label class="col-lg-3 control-label">Username</label>
  <div class="col-lg-5">
  <input type="text" class="form-control" name="username" />
  </div>
 </div>

 <div class="form-group">
  <label class="col-lg-3 control-label">Email address</label>
  <div class="col-lg-5">
  <input type="text" class="form-control" name="email" />
  </div>
 </div>

 <div class="form-group">
  <label class="col-lg-3 control-label">Password</label>
  <div class="col-lg-5">
  <input type="password" class="form-control" name="password" />
  </div>
 </div>

 <div class="form-group">
  <div class="col-lg-9 col-lg-offset-3">
  <button type="submit" class="btn btn-primary">Sign up</button>
  </div>
 </div>
 </form>

</div>
<script type="text/javascript">
$(document).ready(function() {
 /**
 * 下面是進(jìn)行插件初始化
 * 你只需傳入相應(yīng)的鍵值對(duì)
 * */
 $('#defaultForm').bootstrapValidator({
 message: 'This value is not valid',
 feedbackIcons: {/*輸入框不同狀態(tài)，顯示圖片的樣式*/
 valid: 'glyphicon glyphicon-ok',
 invalid: 'glyphicon glyphicon-remove',
 validating: 'glyphicon glyphicon-refresh'
 },
 fields: {/*驗(yàn)證*/
 username: {/*鍵名username和input name值對(duì)應(yīng)*/
  message: 'The username is not valid',
  validators: {
  notEmpty: {/*非空提示*/
  message: '用戶名不能為空'
  },
  stringLength: {/*長(zhǎng)度提示*/
  min: 6,
  max: 30,
  message: '用戶名長(zhǎng)度必須在6到30之間'
  }/*最后一個(gè)沒有逗號(hào)*/
  }
 },
 password: {
  message:'密碼無(wú)效',
  validators: {
  notEmpty: {
  message: '密碼不能為空'
  },
  stringLength: {
  min: 6,
  max: 30,
  message: '用戶名長(zhǎng)度必須在6到30之間'
  }
  }
 },
 email: {
  validators: {
  notEmpty: {
  message: 'The email address is required and can\'t be empty'
  },
  emailAddress: {
  message: 'The input is not a valid email address'
  }
  }
 }
 }
 });
});
</script>
</body>
</html>

這是最基本的，例子直接復(fù)制到本地，并且導(dǎo)入需要的css和js文件（JS中username，password等鍵值名和input標(biāo)簽中name屬性值對(duì)應(yīng)），運(yùn)行就能夠進(jìn)行非空，長(zhǎng)度驗(yàn)證，完全不需要管css樣式。

效果圖如下：

當(dāng)然，以上都是插件寫好的規(guī)則，如果想自己加匹配規(guī)則怎么辦呢？

如下只要在input相對(duì)應(yīng)的鍵值中加入一個(gè)regexp:{}鍵值對(duì)（在上面的js基礎(chǔ)上修改）

username: {/*鍵名和input name值對(duì)應(yīng)*/
  message: 'The username is not valid',
  validators: {
  notEmpty: {/*非空提示*/
  message: '用戶名不能為空'
  },
  regexp: {/* 只需加此鍵值對(duì)，包含正則表達(dá)式，和提示 */
  regexp: /^[a-zA-Z0-9_\.]+$/,
  message: '只能是數(shù)字和字母_.'
  },
  stringLength: {/*長(zhǎng)度提示*/
  min: 6,
  max: 30,
  message: '用戶名長(zhǎng)度必須在6到30之間'
  }/*最后一個(gè)沒有逗號(hào)*/
  }
 },

效果如下：

至此只要運(yùn)行和看了例子，就能進(jìn)行大部分的驗(yàn)證了，是不是很簡(jiǎn)單？只要寫相應(yīng)的鍵值對(duì)即可，再也自己什么都寫了。下面進(jìn)一步的使用，進(jìn)行用戶的注冊(cè)，

需求：

實(shí)時(shí)驗(yàn)證用戶名是否存在，密碼不能和用戶名相同，兩次密碼需要相同，提交之后需要驗(yàn)證返回值

html代碼（直接替換上例子中的form即可）：

<form id="defaultForm" role="form" class="form-signin" action="registerAccount.do"
 method="post">
 <h2 class="form-signin-heading">請(qǐng)輸入注冊(cè)信息：</h2>

 <div class="form-group">
  <label for="username">用戶名：</label><input class="form-control"
  type="text" name="username" id="username" />
 </div>
 <div class="form-group">
  <label for="password">密碼：</label><input class="form-control"
  type="password" name="password" id="password"/>
 </div>
 <div class="form-group">
  <label for="repassword">確認(rèn)密碼：</label><input class="form-control"
  type="password" name="repassword" id="repassword" />
 </div>
 <div class="form-group">
  <label for="phone">手機(jī)號(hào)碼：</label><input class="form-control"
  type="text" name="phone" id="phone" />
 </div>
 <div class="form-group">
  <label for="email">email:</label><input class="form-control"
  type="email" name="email" id="email" />
 </div>
 <div class="form-group">
  <label for="invite">邀請(qǐng)碼：</label><input class="form-control"
  type="text" name="invite" id="invite">
 </div>
 <div class="form-group">
  <button class="btn btn-lg btn-primary btn-block" type="submit">確認(rèn)注冊(cè)</button>
  <a class="btn btn-lg btn-primary btn-block" href="../">返回首頁(yè)</a>
  </div>
 </form>

js代碼(直接替換例子中的JS)：

$(function(){/* 文檔加載，執(zhí)行一個(gè)函數(shù)*/
 $('#defaultForm')
 .bootstrapValidator({
 message: 'This value is not valid',
 feedbackIcons: {/*input狀態(tài)樣式圖片*/
 valid: 'glyphicon glyphicon-ok',
 invalid: 'glyphicon glyphicon-remove',
 validating: 'glyphicon glyphicon-refresh'
 },
 fields: {/*驗(yàn)證：規(guī)則*/
 username: {//驗(yàn)證input項(xiàng)：驗(yàn)證規(guī)則
  message: 'The username is not valid',
 
  validators: {
  notEmpty: {//非空驗(yàn)證：提示消息
  message: '用戶名不能為空'
  },
  stringLength: {
  min: 6,
  max: 30,
  message: '用戶名長(zhǎng)度必須在6到30之間'
  },
  threshold : 6 , //有6字符以上才發(fā)送ajax請(qǐng)求，（input中輸入一個(gè)字符，插件會(huì)向服務(wù)器發(fā)送一次，設(shè)置限制，6字符以上才開始）
  remote: {//ajax驗(yàn)證。server result:{"valid",true or false} 向服務(wù)發(fā)送當(dāng)前input name值，獲得一個(gè)json數(shù)據(jù)。例表示正確：{"valid",true} 
  url: 'exist2.do',//驗(yàn)證地址
  message: '用戶已存在',//提示消息
  delay : 2000,//每輸入一個(gè)字符，就發(fā)ajax請(qǐng)求，服務(wù)器壓力還是太大，設(shè)置2秒發(fā)送一次ajax（默認(rèn)輸入一個(gè)字符，提交一次，服務(wù)器壓力太大）
  type: 'POST'//請(qǐng)求方式
  /**自定義提交數(shù)據(jù)，默認(rèn)值提交當(dāng)前input value
  * data: function(validator) {
  return {
   password: $('[name="passwordNameAttributeInYourForm"]').val(),
   whatever: $('[name="whateverNameAttributeInYourForm"]').val()
  };
  }
  */
  },
  regexp: {
  regexp: /^[a-zA-Z0-9_\.]+$/,
  message: '用戶名由數(shù)字字母下劃線和.組成'
  }
  }
 },
 password: {
  message:'密碼無(wú)效',
  validators: {
  notEmpty: {
  message: '密碼不能為空'
  },
  stringLength: {
  min: 6,
  max: 30,
  message: '用戶名長(zhǎng)度必須在6到30之間'
  },
  identical: {//相同
  field: 'password', //需要進(jìn)行比較的input name值
  message: '兩次密碼不一致'
  },
  different: {//不能和用戶名相同
  field: 'username',//需要進(jìn)行比較的input name值
  message: '不能和用戶名相同'
  },
  regexp: {
  regexp: /^[a-zA-Z0-9_\.]+$/,
  message: 'The username can only consist of alphabetical, number, dot and underscore'
  }
  }
 },
 repassword: {
  message: '密碼無(wú)效',
  validators: {
  notEmpty: {
  message: '用戶名不能為空'
  },
  stringLength: {
  min: 6,
  max: 30,
  message: '用戶名長(zhǎng)度必須在6到30之間'
  },
  identical: {//相同
  field: 'password',
  message: '兩次密碼不一致'
  },
  different: {//不能和用戶名相同
  field: 'username',
  message: '不能和用戶名相同'
  },
  regexp: {//匹配規(guī)則
  regexp: /^[a-zA-Z0-9_\.]+$/,
  message: 'The username can only consist of alphabetical, number, dot and underscore'
  }
  }
 },
 email: {
  validators: {
  notEmpty: {
  message: '郵件不能為空'
  },
  emailAddress: {
  message: '請(qǐng)輸入正確的郵件地址如：123@qq.com'
  }
  }
 },
 phone: {
  message: 'The phone is not valid',
  validators: {
  notEmpty: {
  message: '手機(jī)號(hào)碼不能為空'
  },
  stringLength: {
  min: 11,
  max: 11,
  message: '請(qǐng)輸入11位手機(jī)號(hào)碼'
  },
  regexp: {
  regexp: /^1[3|5|8]{1}[0-9]{9}$/,
  message: '請(qǐng)輸入正確的手機(jī)號(hào)碼'
  }
  }
 },
 invite: {
  message: '邀請(qǐng)碼',
  validators: {
  notEmpty: {
  message: '邀請(qǐng)碼不能為空'
  },
  stringLength: {
  min: 8,
  max: 8,
  message: '請(qǐng)輸入正確長(zhǎng)度的邀請(qǐng)碼'
  },
  regexp: {
  regexp: /^[\w]{8}$/,
  message: '請(qǐng)輸入正確的邀請(qǐng)碼(包含數(shù)字字母)'
  }
  }
 },
 }
 })
 .on('success.form.bv', function(e) {//點(diǎn)擊提交之后
 // Prevent form submission
 e.preventDefault();

 // Get the form instance
 var $form = $(e.target);

 // Get the BootstrapValidator instance
 var bv = $form.data('bootstrapValidator');

 // Use Ajax to submit form data 提交至form標(biāo)簽中的action，result自定義
 $.post($form.attr('action'), $form.serialize(), function(result) {
//do something...
});
 });
});

效果圖：