bootstrap validator 使用带代码

最新推荐文章于 2025-09-04 18:55:33 发布

转载最新推荐文章于 2025-09-04 18:55:33 发布 · 69 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/shuaishuaiguo/p/8046766.html

文章标签：

#javascript #ViewUI

本文详细介绍如何使用Bootstrap Validator插件进行表单验证。通过具体示例，展示了如何配置各种验证规则，例如非空检查、长度限制及正则匹配等，并提供重置验证规则的方法。

如何使用bootstrapVlidator插件？

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

如：

注：

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

如：

放入所需插件

引入路径

3.表单代码：

</span>

</div>

<br>

</span>

</div>

<br>

</span>

</div>

<br>

</span>

</div>

<br>

</span>

</div>

<br>

</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值

转载于:https://www.cnblogs.com/shuaishuaiguo/p/8046766.html

bootstrap validator 使用 带代码

如何使用bootstrapVlidator插件？

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

bootstrap validator 使用带代码