BootstrapValidator，简单而实用的表单验证插件

绿/搜索【编程进阶路】 联系小编

使用data-bv-notempty 和 data-bv-notempty-message属性就可以简单进行非空验证。data-bv-notempty 有值就进行非空验证，data-bv-notempty-message 中的值为提示消息。

使用JS添加验证

HTML样式代码。

姓名

年龄

电话

Email

密码

确定密码

JS验证代码，其中fields属性中的值，需要和HTML标签中的name值一样，确定给那个标签添加验证。

效果如下。

AJAX后台交互验证，验证用户名是否存在。

用户名

后台验证返回格式必须为{“valid”, true or false} 的json数据格式。后台verifyUsername验证判断方法。

@RequestMapping(value=“/verifyUsername”)

@ResponseBody

public Map verifyUsername(String username){

Student stu = studentService.findByUsername(username);

Map map = new HashMap();

if (stu == null) {

map.put(“valid”, true);

}else{

map.put(“valid”, false);

}

return map;

}

效果如下。

下面是几个比较常见的验证规则。

1. notEmpty：非空验证；

2. stringLength：字符串长度验证；

3. regexp：正则表达式验证；

4. emailAddress：邮箱地址验证（都不用我们去写邮箱的正则了~~）

5. base64：64位编码验证；

6. between：验证输入值必须在某一个范围值以内，比如大于10小于100；

7. creditCard：身份证验证；

8. date：日期验证；

9. ip：IP地址验证；

10. numeric：数值验证；

11. url：url验证；

12. callback：自定义验证

Form表单的提交

关于提交，可以直接用form表单提交即可。

提交

也可以通过AJAX提交，提交按钮代码和form表单的提交按钮代码一样，通过id选中按钮绑定点击事件提交。

$(“#btn”).click(function () { //非submit按钮点击后进行验证，如果是submit则无需此句直接验证

$(“form”).bootstrapValidator(‘validate’); //提交验证

if ($(“form”).data(‘bootstrapValidator’).isValid()) { //获取验证结果，如果成功，执行下面代码

alert(“yes”); //验证成功后的操作，如ajax

}

});

效果图，这里验证通过后通过弹框提示的，方法中可以写AJAX提交代码。

页面完整代码。

学号

用户名

姓名

年龄

最后

俗话说，好学者临池学书，不过网络时代，对于大多数的我们来说，我倒是觉得学习意识的觉醒很重要，这是开始学习的转折点，比如看到对自己方向发展有用的信息，先收藏一波是一波，比如如果你觉得我这篇文章ok，先点赞收藏一波。这样，等真的沉下心来学习，不至于被找资料分散了心神。慢慢来，先从点赞收藏做起，加油吧！

另外，给大家安排了一波学习面试资料：

以上就是本文的全部内容，希望对大家的面试有所帮助，祝大家早日升职加薪迎娶白富美走上人生巅峰！
class=“form-control” name=“name” />

年龄

最后

俗话说，好学者临池学书，不过网络时代，对于大多数的我们来说，我倒是觉得学习意识的觉醒很重要，这是开始学习的转折点，比如看到对自己方向发展有用的信息，先收藏一波是一波，比如如果你觉得我这篇文章ok，先点赞收藏一波。这样，等真的沉下心来学习，不至于被找资料分散了心神。慢慢来，先从点赞收藏做起，加油吧！

另外，给大家安排了一波学习面试资料：

[外链图片转存中…(img-yzYV5naf-1722055929908)]

[外链图片转存中…(img-vU0RTFzP-1722055929908)]

以上就是本文的全部内容，希望对大家的面试有所帮助，祝大家早日升职加薪迎娶白富美走上人生巅峰！