bootstrap validator 使用 带代码

如何使用bootstrapVlidator插件？

1. 下载bootstrapVlidator插件
2. 在需要使用的页面引入bootstrapVlidator的js文件和css文件

如：

注：

在此基础之前必须引入jquery库和bootstrap的js文件和css样式。

如：

1. 放入所需插件

1. 引入路径

3.表单代码：

<form id="registForm">

<!--下面是用户名输入框-->

<div class="form-group">

<div class="input-group">

<span class="input-group-addon" id="basic-addon1">

<span class="glyphicon glyphicon-user"></span>

</span>

<input id="userName" name="username" type="text" class="form-control" placeholder="请输入用户名" aria-describedby="basic-addon1">

</div>

</div>

<br>

<!--下面是邮箱输入框-->

<div class="form-group">

<div class="input-group">

<span class="input-group-addon" id="basic-addon1">

<span class="glyphicon glyphicon-envelope"></span>

</span>

<input id="email" name="email"type="text" class="form-control" placeholder="请输入邮箱">

</div>

</div>

<br>

<!--下面是手机号输入框-->

<div class="form-group">

<div class="input-group">

<span class="input-group-addon" id="basic-addon1">

<span class="glyphicon glyphicon-earphone"></span>

</span>

<input id="phoneNumber" name="phonenumber" type="text" class="form-control" placeholder="请输入手机号">

</div>

</div>

<br>

<!--下面是密码输入框-->

<div class="form-group">

<div class="input-group">

<span class="input-group-addon" id="basic-addon1">

<span class="glyphicon glyphicon-lock"></span>

</span>

<input id="passWord" name="password1" type="text" class="form-control" placeholder="请输入密码">

</div>

</div>

<br>

<!--下面是确认密码输入框-->

<div class="form-group">

<div class="input-group">

<span class="input-group-addon" id="basic-addon1">

<span class="glyphicon glyphicon-lock"></span>

</span>

<input id="passwordTow" name="password2" type="text" class="form-control" placeholder="请重新输入密码">

</div>

</div>

<br>

<!--下面是登陆按钮,包括颜色控制-->

<div class="form-group">

<button type="submit" name="submit" style="width:135px;" onclick="registsubmit()" class="btn btn-primary btn-sm">提交</button>

<button type="reset" id="resetBtn" name="reset" style="width:135px;" class="btn btn-primary btn-sm">重置</button>

</div>

</form>

4.js代码

1.  form里每一个input标签必须要有name属性，是根据name属性的值来设置条件

2.  属性介绍

username:是用户input标签那么的属性值

notEmpty代表不为空验证

Message：写提示语

stringLength:设置字符串长度

regexp:写正则表达式

identical: 相同，用来验证两次密码是否相同

field:写想要相同的mame属性值

//表单验证

　$(function () {

$('form').bootstrapValidator({

message: '请重新输入',

feedbackIcons: {

valid: 'glyphicon glyphicon-ok',

invalid: 'glyphicon glyphicon-remove',

validating: 'glyphicon glyphicon-refresh'

},

fields: {

username: {

message: '用户名验证失败',

validators: {

notEmpty: {

message: '用户名不能为空'

},

stringLength: {

min: 6,

max: 18,

message: '用户名长度必须在6到18位之间'

},

regexp: {

regexp: /^[a-zA-Z0-9_]+$/,

message: '用户名只能包含大写、小写、数字和下划线'

}

}

},

email: {

validators: {

notEmpty: {

message: '邮箱不能为空'

},

emailAddress: {

message: '邮箱地址格式有误'

}

}

},

phonenumber: {

validators: {

notEmpty: {

message: '手机号不能为空'

},

regexp: {

regexp: /^1\d{10}$/,

message: '请输入11为手机号'

}

}

},

password1: {

validators: {

notEmpty: {

message: '密码不能为空'

},

stringLength: {

min: 6,

max: 12,

message: '密码长度必须在6到12位之间'

},

regexp: {

regexp: /^[a-zA-Z0-9_]+$/,

message: '密码只能包含大写、小写、数字和下划线'

},

identical: {

field: 'password2',

message: '两次输入的密码不相符'

}

}

},

password2: {

validators: {

notEmpty: {

message: '密码不能为空'

},

stringLength: {

min: 6,

max: 12,

message: '密码长度必须在6到12位之间'

},

regexp: {

regexp: /^[a-zA-Z0-9_]+$/,

message: '密码只能包含大写、小写、数字和下划线'

},

identical: {

field: 'password1',

message: '两次输入的密码不相符'

}

}

}

},

});

});

如终极效果：

5.重置按钮js写法，包括重置validator验证规则

//重置按钮事件

$("#resetBtn").off().on("click",function(){

$(registForm).data("bootstrapValidator").resetForm();

});

注："#resetBtn“这个代表重置按钮id值