bootstrapvalidator使用,重置校验
1.html页面需要注意的是验证字段需要用form-group包裹。需要引用相应的css和js。
<form id="jobForm" role="form" class="form-horizontal">
<input type="hidden" id="jobId" name="jobId" value="">
<div class="row">
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right"><i class="red fa fa-asterisk font-80"></i>作业分类</label>
<div class="col-sm-8">
<input type="text" id='jobType' class="form-control" name="jobType" >
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right"><i class="red fa fa-asterisk font-80"></i>项目</label>
<div class="col-sm-8">
<input type="text" id='projectName' class="form-control" name="projectName" >
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right">作业下发状态</label>
<div class="col-sm-8">
<select class="selectpicker form-control" id='issuedState' name="issuedState" tabindex="-98">
<option value="0">未下发</option>
<option value="1">已下发</option>
<option value="2">已更新</option>
</select>
</div>
</div>
<div class="form-group">
<button type="button" class="btn btn-primary" id="saveBtn" onclick="saveInfo()">保存</button>
<button style='margin-left:20px;' type="button" name="submit" onclick="self.location=document.referrer;" class="btn btn-default">返回</button>
</div>
</div>
</form>
2.js代码
这是验证输出的文字
function formValidator(fm) {
// 表单验证
fm.bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
jobType: {
message: '作业分类不能为空!',
validators: {
notEmpty: {
message: '作业分类不能为空!'
}
}
},
projectName: {
message: '项目不能为空!',
validators: {
notEmpty: {
message: '项目不能为空!'
}
}
}
}
});
}
一般在页面加载完时,我们要启动第一次校验
$(document).ready(function(){
formValidator($("#jobForm"));
});
经过一系列操作后,我们需对表单验证的内容进行清空处理,并且重新启用验证。
例如,我将form表单放入一个模态框中,在我每次打开模态框时,初始化form表单,并且重置表单中已经校验过的值。

在点击图片中的加号时,我进行的操作
//移除上一次的校验结果,重新添加表单校验。
$("#jobForm").data('bootstrapValidator').destroy();
$('#jobForm').data('bootstrapValidator',null);
formValidator($("#jobForm"));
关闭时重置表单
$('#jobForm')[0].reset();//$("#jobForm")获取的是数组,所以需要取出数组的第一项。重置表单
bootstrapvalidator使用,重置校验的更多相关文章
- bootstrapvalidator的简单校验【必填校验、长度校验、是否存在校验(remote)】
需求:输入框的"供应商编码"不能为空而且不能与数据库重复,供应商名称不能为空. 解决: 1.input如下 <input id="ssupplierNo" ...
- $(formName).data(“bootstrapValidator”).getFieldElements('fieldName'); 校验单个字段
问题也出自于业务系统后台,应该来说也比较常见吧 房产类型分为一抵和二抵,二抵的时候用户必须填写一抵债权金额,一抵的时候则不显示一抵债权金额也不校验,因为我所有的校验都是写在标签上,哪些必填直接写在标签 ...
- bootstrap重置校验方法
$(function (){ $("select").change(function(){ $('#DepartForm').bootstrapValidator('resetFo ...
- bootstrapvalidator之API学习
最近项目用到了bootstrap框架,其中前端用的校验,采用的是bootstrapvalidator插件,也是非常强大的一款插件.我这里用的是0.5.2版本.下面记录一下使用中学习到的相关API,不定 ...
- bootstrapValidator 使用(包含入门demo,常用方法,以及常用的规则)
一 什么是bootstrapValidator? -- 一个基于 jquery,boostrap 的表单验证框架....简单实用上手快,页面美观还过得去,不废话了,直接撸. 二 boots ...
- bootstrapValidator表单验证插件
bootstrapValidator——一个很好用的表单验证插件,再也不用手写验证规则啦! bootstrapValidator官方文档:http://bootstrapvalidator.votin ...
- 用bootstrapValidator来验证UEditor
我们的项目使用了bootstrapValidator来作为前端校验,但是表单里面有一个UEditor,它用bootstrapValidator是没有效果的,为了页面风格统一,只好修修改改咯 首先来看一 ...
- vue.js基础知识篇(7):表单校验详解
目录 网盘 第12章:表单校验 1.npm安装vue-validator $ npm install vue-validator 代码示例: var Vue=require("vue&quo ...
- 【转】vue.js表单校验详解
官方文档:https://monterail.github.io/vuelidate/ https://github.com/monterail/vuelidate 1.npm安装vue-valida ...
随机推荐
- 【ACM】hdu_1862_EXCEL排序_201308091948
EXCEL排序 Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Su ...
- 【ACM】hdu_2115_I Love This Game_201308021517
I Love This GameTime Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)T ...
- 【ACM】hdu_1170_Balloon Comes!_201307261946
Balloon Comes!Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tot ...
- C#--async-await的用法
NET 中的 async/await 异步编程 MSDN上的文章 **async与await最佳实践 需要先理解thread的用法,再掌握task的用法,才能力理解async和await的用法 usi ...
- 邮箱smtpserver及port收集
网易 163邮箱 POP3:pop.126.com SMTP:smtp.126.com SMTPport号:25 126邮箱 POP3:pop.126.com SMTP:smtp.126.co ...
- HDU 2604 Queuing,矩阵高速幂
题目地址:HDU 2604 Queuing 题意: 略 分析: 易推出: f(n)=f(n-1)+f(n-3)+f(n-4) 构造一个矩阵: 然后直接上板子: /* f[i] = f[i-1] ...
- Linux下叹号!的用法
在定义包含!的字符串变量时,出现了以下提示错误. 注意:在centos系统下错误,在Fedora系统可以正常运行. 修正方法有以下几种: (1)将整个字符串用单引号引起来. (2)在!后添加空格. ( ...
- POJ3614 Sunscreen 贪心入门
题目大意 给出一些区间和一些点,一个点如果在一个区间内,那么此两者可以匹配.问匹配数最大是多少. 题解 这样的题我们一般都是站在区间上去找与其配对的点.我们可以得到如下性质: 对于一段区间\([l_1 ...
- oc17--点语法
// // Person.h // day13 #import <Foundation/Foundation.h> @interface Person : NSObject { // @p ...
- DNS tunnel的原理及实战
DNS tunnel的原理及实战 摘自:http://netsec.ccert.edu.cn/zhengming/2011/11/01/%E8%BD%AC%E8%BD%BD%EF%BC%9Adns-t ...