Bootstrap 表单验证formValidation 之远程验证
2016-11-22 17:33
211 查看
最近项目用到了一个很强大的表单验证。记录下。官方地址:http://formvalidation.io/api/
还有一点很重要:这个插件的Bootstrap最好用他们自带的,有点改动。不用再去Bootstrap官网下载。
向上效果:
先导入资源:
html:
下面是验证代码;
后台返回
{ “valid”: true }//通过验证
或
{ “valid”: false }//不通过—》 ‘此设备号已存在’,
效果图;
还有一点很重要:这个插件的Bootstrap最好用他们自带的,有点改动。不用再去Bootstrap官网下载。
向上效果:
先导入资源:
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="dist/css/formValidation.css"/ <script type="text/javascript" src="vendor/jquery/jquery.min.js"></script> <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="dist/js/formValidation.js"></script> <script type="text/javascript" src="dist/js/framework/bootstrap.js"></script> <script type="text/javascript" src="dist/js/language/zh_CN.js"></script>
html:
<form id="defaultForm" class="form-horizontal"> <div class="form-group"> <label class="col-xs-3 control-label">Full name</label> <div class="col-xs-5"> <input type="text" class="form-control" name="boxId" /> </div> </div> </form>
下面是验证代码;
$('#defaultForm').formValidation({ message: '此值无效', icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, locale: 'zh_CN', fields:{ boxId:{ verbose: false,//代表验证按顺序验证。验证成功才会下一个(验证成功才会发最后一个remote远程验证) validators: { notEmpty: { message: '这是必填字段' }, digits: { message: '值不是数字' }, stringLength: { min: 16, message:'必须为16个数字' }, remote: { type: 'POST', url: '/box/unique', message: '此设备号已存在', delay: 2000 } } }, onSuccess:function(){ //点击提交表单。表单所有都验证成功 } });
后台返回
{ “valid”: true }//通过验证
或
{ “valid”: false }//不通过—》 ‘此设备号已存在’,
效果图;
相关文章推荐
- Bootstrap 表单验证formValidation 实现远程验证功能
- BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
- Bootstrap 表单验证formValidation 之比较两个input值的大小
- Bootstrap 表单验证formValidation 之表单动态验证
- bootstrap 表单验证formValidation的remote填坑
- Bootstrap 表单验证formValidation 实现表单动态验证功能
- Bootstrap表单验证 formValidation 调整反馈图标位置
- vue结合bootstrap表单验证 FormValidation 图片验证
- 简单的 Bootstrap Jquery表单验证.js
- jQuery 表单验证插件formValidation实现个性化错误提示
- jQuery表单验证插件formValidation实现个性化错误提示(超实用)
- Bootstrap中表单控件状态(验证状态)
- bootstrap+springMVC中使用bootstrapValidator实现表单验证(附源码!!!)
- EasyUI表单验证,自定义插件验证,自定义js插件验证,远程验证,常见手机号,中英文,qq等验证规则验证
- bootstrap3-validation表单验证
- Bootstrap中表单控件状态(验证状态)
- 黄聪: Bootstrap之Form表单验证神器: BootstrapValidator(转)
- bootstrap表单验证插件 经验记录 与RSA加密事件配合修改
- 表单验证之BootstrapValidator
- Bootstrap+jquery.validate 提供一整套表单验证解决方案.md