基於jquery、bootstrap的數據驗證插件bootstrapValidator使用

1、實時驗證用戶名是否存在，密碼不能和用戶名相同，兩次密碼須要相同，提交以後須要驗證返回值：

<form id="defaultForm" role="form" class="form-signin" action="registerAccount.do" method="post"> <h2 class="form-signin-heading">請輸入註冊信息：</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">確認密碼：</label><input class="form-control" type="password" name="repassword" id="repassword" /> </div> <div class="form-group"> <label for="phone">手機號碼：</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">邀請碼：</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">確認註冊</button> <a class="btn btn-lg btn-primary btn-block" href="../">返回首頁</a> </div> </form>

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

2、新密碼不能和舊密碼一致，確認密碼必須和新密碼一致：

passwordSignUp: {
    validators: { notEmpty: { message: '密碼不能爲空' }, stringLength: { min: 6, max: 30, message: '密碼長度必須大於6位，小於30位' }, regexp: { regexp: /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{6,30}$/, message: '密碼必須包含數字、字母和字符' }, identical: { field: 'passwordSignUp_confirm', message: '兩次輸入的密碼不相符' }, different: { field: 'usernameSignUp', message: '不能使用用戶名做爲密碼' } } }, passwordSignUpConfirm: { validators: { notEmpty: { message: '密碼不能爲空' }, identical: { field: 'passwordSignUp', message: '兩次輸入的密碼不相符' }, different: { field: 'usernameSignUp', message: '不能使用用戶名做爲密碼' } } }

3、動態添加和移除驗證項（校驗、校驗清除重置）：

$('#add-user-modal-form').data('bootstrapValidator').enableFieldValidators('addUserModalUserName', true);

其中「addUserModalUserName」爲驗證項name。 

4、純數字驗證：

digits: {
             message: '該值只能包含整數。'
        }

number：{message: '該值只能包含數字。'}//浮點數和整數驗證；

 5、判斷輸入數字是否符合大於18小於100：

greaterThan: {
              value: 18
},
lessThan: {
          value: 100
}

6、複選框驗證：

choice: {
                        min: 2,
                        max: 4,
                        message: '請選擇2-4項'
        }

 7、屬性方式校驗：

<input type="text" class="form-control" name="username" data-bv-message="The username is not valid" required data-bv-notempty-message="The username is required and cannot be empty" pattern="^[a-zA-Z0-9]+$" data-bv-regexp-message="The username can only consist of alphabetical and digits" data-bv-stringlength="true" data-bv-stringlength-min="6" data-bv-stringlength-max="30" data-bv-stringlength-message="The username must be more than 6 and less than 30 characters long" data-bv-different="true" data-bv-different-field="password" data-bv-different-message="The username and password cannot be the same as each other" data-bv-remote="true" data-bv-remote-url="remote.php" data-bv-remote-message="The username is not available" /> 

8、驗證file類型的表單元素：

addSoftModalFile: {
      message: '軟件無效', validators: { notEmpty: { message: '上傳文件不能爲空' }, file: { extension: 'rar,tar,zip,gz,bz2', mimeTypes: '.rar,.tar,.zip,.gz,.bz2', message: '文件類型爲.rar,.tar,.zip,.gz,.bz2' } } }

9、其它：

emailAddress：郵箱地址驗證；

base64：64位編碼驗證；

creditCard：身份證驗證；

phone：電話號碼驗證；

api地址：http://bootstrapvalidator.votintsev.ru/validators/