关于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
         	   }
         	}
     }
 }