web部分
<form class="form-horizontal" role="form" id="form" name="form" > <div class="form-body"> <div class="form-group"> <label class="col-md-3 control-label">登录账户</label> <span class="required"> * </span> <div class="col-md-3"> <input type="text" class="form-control input-sm" placeholder="" id="code" name="code"> </div> </div> <div class="form-group"> <label class="col-md-3 control-label">昵称</label> <span class="required"> * </span> <div class="col-md-3"> <input type="text" class="form-control input-sm" placeholder="" id="name" name="name"> </div> </div> </div> <div class="form-actions fluid"> <div class="col-md-offset-3 col-md-9"> <button type="submit" class="btn green btn-primary">提交</button> <button type="reset" class="btn default" id="resetBtn">重置</button> </div> </div> </form>
JS代码
<script type="text/javascript"> $(document).ready(function() { $('#form').bootstrapValidator({ message: '这个值不能为空', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { code: { validators: { notEmpty: {}, stringLength: { min: 6, max: 50 }, threshold: 6 , //有6字符以上才发送ajax请求,(input中输入一个字符,插件会向服务器发送一次,设置限制,6字符以上才开始) remote: {//ajax验证。server result:{"valid":true or false} 向服务发送当前input name值,获得一个json数据。例表示正确:{"valid":true} url: '/user/validate_code',//验证地址 message: '账号已存在',//提示消息 delay : 1000,//每输入一个字符,就发ajax请求,服务器压力还是太大,设置2秒发送一次ajax(默认输入一个字符,提交一次,服务器压力太大) type: 'get',//请求方式 dataType: 'json', /**自定义提交数据,默认值提交当前input value * data: function(validator) { return { layerType: $('input[name=layerType]:checked').val() } }*/ } } }, name: { validators: { notEmpty: {}, stringLength: { min: 4, max: 50 } } } }, submitHandler: function (form) { success1.show(); error1.hide(); } }) .on('success.form.bv', function(e) { submitPageContent('/user/add_submit'); return false; }); $('#resetBtn').click(function() { $('#form').data('bootstrapValidator').resetForm(true); }); }); </script>
异步验证交互java代码 (remote部分)
@ResponseBody @RequestMapping("validate_code") public String validateCode(HttpServletRequest request) { String code = request.getParameter("code"); User user = userImpl.getByCode(code); if(user == null){ return "{\"valid\":true}"; } return "{\"valid\":false}"; }
网上不少资料将json返回值写为
{\"valid\",false}
这里要注意
总之bootstrap Validator很好很强大,建议使用。
相关推荐
bootstrap validator 使用简介 bootstrap validator 使用简介
1.bootstrap使用4.0 2.customValidator.css Bootstrap v4.0.0-beta (https://getbootstrap.com) jQuery v3.2.1
使用bootstrapvalidator做表单验证,select2下拉框支持拼音模糊匹配
本文实例为大家分享了BootstrapValidator使用方法,供大家参考,具体内容如下 github:https://github.com/nghuuphuoc/bootstrapvalidator 参考博客:JS组件系列——Form表单验证神器: BootstrapValidator 参考博客...
bootstrap-validator是一款简单实用的Bootstrap3表单验证jQuery插件。该表单验证插件使用HTML5的data属性来设置验证属性,可以完成所有常用的表单验证功能。
bootstrapValidator 表单验证插件使用的汉化包,国际化汉化包
bootstrapvalidator根文件,可以直接使用,根据你的需要选择
bootstrapValidator 使用中,由于字段检查等原因,致使提交按钮失效。如何重新启用提交按钮呢? 下面一句代码可以实现启用提交按钮: $('#loginForm').bootstrapValidator('disableSubmitButtons', false); 下面看...
下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用提示 中文化: 下载插件后,将\js\bootstrapValidator\language\zh_CN.js 引入文件,即实现中文化 提交前验证表单: 更丰富一点的表单验证例子...
如果你使用的前端框架是bootstrap,那么前端验证框架就不必考虑了,bootstrapvalidator是最好的选择,它和bootstrap的结合最完美,不过要注意版本的问题,针对bootstrap2和bootstrap3有不同的版本。 下面是我遇到的...
看作者的github,这款插件已经不再更新了,而推荐使用FormValidation,不过现在还是先介绍一下BootstrapValidator的使用。 准备工作 BootstrapValidator文档地址:http://bv.doc.javake.cn/ 下载源码后,将其中的...
我们的项目使用了bootstrapValidator来作为前端校验,但是表单里面有一个UEditor,它用bootstrapValidator是没有效果的,为了页面风格统一,只要修修改改咯 首先来看一下修改后的效果 上面的UEditor是我们的...
实际工作中,要实现表单元素的动态增加,并使用bootstrapValidator插件对动态添加的表单元素进行前台校验。在以前的工作中也使用过bootstrapValidator对表单元素进行校验,但涉及到的表单元素都是固定的,所以在页面...
BootstrapValidator - 从下一个 v0.6.0 版本开始,该插件支持多种框架(Bootstrap、Foundation、Semantic UI、UIKit)。 它将重命名为FormValidation 。 升级指南将在 v0.6.0 发布时提供。 - 用于验证表单字段的...
本文推荐一款twitter做的bootstrapValidator.js,本身bootstrap就是twitter做的,那么使用原配的validator也就更值得信赖。从百度上搜bootstrapValidator会出现很多款,但我只推荐这款: 一、一睹为快 为了简便的...
当按钮的类型为submit时,使用bootstrapValidator的isValid()能够使验证表单正常工作,但当button的type类型为button时,只调用bootstrapValidator的isValid()方法无法正常工作。这时候就需要使用bootstrapValidator...
基于bootstrap的前端校验插件,使用此插件能有效的校验表单,不用自己写了。