關於bootstrap驗證插件bootstrapValidator的使用已經自定義使用及提示

一、源碼及API地址

bootstrapvalidator源碼：https://github.com/nghuuphuoc/bootstrapvalidator

大部分案例在源碼裏都能找到

二、引入庫

此插件式基於bootstrap去擴展的。

<script type="text/javascript" src="js/modules/bootstrap/bootstrapValidator.js"></script>
<link rel="stylesheet" type="text/css" href="js/modules/bootstrap/bootstrapValidator.css">

 

三、使用

html:

<form action="#" method="post" name="mainForm" id="mainForm">
	<div class="box">
		<input type="text" placeholder="手機號或郵箱" name="username" value="" class="repply_input">
	</div>
	<div class="box">
		<input type="password" placeholder="密碼" autocomplete="off" name="password" datatype="*" nullmsg="密碼不能爲空" class="repply_input">
	</div>
	<input type="hidden" value="0" name="checkAccount" checkaccount="">
	
	<input type="submit" class="btn btn-default btnActive btn1" value="登錄">
</form>

js：

$(document).ready(function() {
    $('#mainForm').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        group: '.box',
        fields: {
        	username: {
                validators: {
                	notEmpty: {
                        message: '請輸入手機號或郵箱'
                    },
                    callback:{
                    	message: '請輸入正確手機號或郵箱',
                    	callback:function(value, validator){
                    		if(value){
	                    		var isPhone = /^[1][3,4,5,7,8][0-9]{9}$/;//手機號碼
                    		    var isEmail= /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;// 郵箱格式
                    		    if(isEmail.test(value)||isPhone.test(value)){
                    		        return true;
                    		    }
                    		    else{
                    		        return false;
                    		    }
                    		}else {
                    			return true
                    		}
                    	}
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: '請輸入密碼'
                    },
                    // stringLength: {
                    //     min: 6,
                    //     max: 30,
                    //     message: '聯繫電話位數'
                    // },
                    regexp: {
                        regexp: /^[1][3,4,5,7,8][0-9]{9}$/,
                        message: '請輸入正確的手機號碼'
                    }
                }
            }
        }
    });
});

 

四、自定義驗證 callback的使用

例1.共同驗證：

validators: {
	notEmpty: {
        message: '請輸入手機號或郵箱'
    },
    callback:{
    	message: '請輸入正確手機號或郵箱',
    	callback:function(value, validator){
    		if(value){//判斷是否有值，沒有的情況下防止與空提示重複顯示
        		var isPhone = /^[1][3,4,5,7,8][0-9]{9}$/;//手機號碼
    		    var isEmail= /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;// 郵箱格式
    		    if(isEmail.test(value)||isPhone.test(value)){
    		        return true;
    		    }
    		    else{
    		        return false;//觸發提示message
    		    }
    		}else {
    			return true
    		}
    	}
    }
}

 

例2.單個驗證（使用獨立提示）：

callback: {
     callback:function(value, validator,$field){
         	var getMinSize=Number($('#getMinSize').text());
         	var poundage=Number($('#poundage').text());
         	var balance=Number($('#balance').text());
         	if (value==0) {
         		return {
                    valid: false,
             		message: "提示1",
                }
         	}else if (value<getMinSize) {
                return {
                    valid: false,
             		message: "提示2",
                }
         	}else if(value>balance){
         		return {
                    valid: false,
             		message: "提示3",
                }
         	}else {
         	   return {
         	       valid: true
         	   }
         	}
     }
 }