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 ...
随机推荐
- c++0x11新特性:delete删除函数
c_plus_plus_0x11.cpp: // c_plus_plus_0x11.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #inc ...
- hdu 1250 简单大整数加法
#include<stdio.h> #include<string.h> #define N 3100 int a[N],b[N],c[N],d[N],e[N]; int ma ...
- Ajax跨域访问的问题
在本机调试Ajax的时候如果服务器在另外的网址,Chrome会出现 Origin is not allowed by Access-Control-Allow-Origin. 解决方案是禁用Chro ...
- [bzoj2529][Poi2011]Sticks_贪心
Sticks bzoj-2529 Poi-2011 题目大意:给你n根木棒,每种木棒有长度和颜色,颜色共有k种,求满足条件的3根木棒使得这3根木棒颜色互不相同且可以围成三角形. 注释:$1\le n ...
- hdu - 3498 - whosyourdaddy(反复覆盖DLX)
题意:N(2 ≤ N ≤ 55)个点,M(0 ≤ M ≤ N*N)条无向边,删除一个点会把与其相邻的点一起删掉.问最少删几次能够删掉全部点. 题目链接:pid=3498">http:/ ...
- <图形图像,动画,多媒体> 读书笔记 --- 录制与编辑视频
使用UIImagePickerController 进行录制 #import "ViewController.h" #import <MobileCoreServices/M ...
- 关于使用chrome插件改动全部的站点的响应responseHeaders头的注意
1 眼下我掌握的调试技巧非常不方便,如今使用的是浏览器动作,每次都须要点击那个popup页面弹出,然后右键->查看元素,才干显示它的调试面板.一点击某些位置它又没有了; 2 改动响应报头的值时, ...
- 黑马day07 登录注冊案例(一)
简单介绍:依据三层架构的思想设计本案例. 1.搭建好开发环境 准备好须要的包和模拟数据库配置文件users.xml -->cn.itheima.dao -->cn.itheima.serv ...
- python+Android+uiautomator的环境
Python+Android+uiautomator的环境搭建 Python 下载适合系统的版本并安装,安装时勾选把路径加入path 验证:windows下打开cmd输入python 出现以下界面说明 ...
- JavaScript --晋级--优
https://zhuanlan.zhihu.com/p/23412169 总计划 JavaScript 教程 http://www.w3school.com.cn/js/ JavaScr ...