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使用,重置校验的更多相关文章

  1. bootstrapvalidator的简单校验【必填校验、长度校验、是否存在校验(remote)】

    需求:输入框的"供应商编码"不能为空而且不能与数据库重复,供应商名称不能为空. 解决: 1.input如下 <input id="ssupplierNo" ...

  2. $(formName).data(“bootstrapValidator”).getFieldElements('fieldName'); 校验单个字段

    问题也出自于业务系统后台,应该来说也比较常见吧 房产类型分为一抵和二抵,二抵的时候用户必须填写一抵债权金额,一抵的时候则不显示一抵债权金额也不校验,因为我所有的校验都是写在标签上,哪些必填直接写在标签 ...

  3. bootstrap重置校验方法

    $(function (){ $("select").change(function(){ $('#DepartForm').bootstrapValidator('resetFo ...

  4. bootstrapvalidator之API学习

    最近项目用到了bootstrap框架,其中前端用的校验,采用的是bootstrapvalidator插件,也是非常强大的一款插件.我这里用的是0.5.2版本.下面记录一下使用中学习到的相关API,不定 ...

  5. bootstrapValidator 使用(包含入门demo,常用方法,以及常用的规则)

    一   什么是bootstrapValidator?    -- 一个基于 jquery,boostrap 的表单验证框架....简单实用上手快,页面美观还过得去,不废话了,直接撸. 二  boots ...

  6. bootstrapValidator表单验证插件

    bootstrapValidator——一个很好用的表单验证插件,再也不用手写验证规则啦! bootstrapValidator官方文档:http://bootstrapvalidator.votin ...

  7. 用bootstrapValidator来验证UEditor

    我们的项目使用了bootstrapValidator来作为前端校验,但是表单里面有一个UEditor,它用bootstrapValidator是没有效果的,为了页面风格统一,只好修修改改咯 首先来看一 ...

  8. vue.js基础知识篇(7):表单校验详解

    目录 网盘 第12章:表单校验 1.npm安装vue-validator $ npm install vue-validator 代码示例: var Vue=require("vue&quo ...

  9. 【转】vue.js表单校验详解

    官方文档:https://monterail.github.io/vuelidate/ https://github.com/monterail/vuelidate 1.npm安装vue-valida ...

随机推荐

  1. Automatic Tuning of Memory Management

    4.2.2 Automatic Tuning of Memory Management Two memory management initialization parameters, MEMORY_ ...

  2. POJ2116 Death to Binary?

    /* POJ2116 Death to Binary? http://poj.org/problem?id=2116 齐肯多夫定理 */ #include <cstdio> #includ ...

  3. SQLSERVER--存储过程--示例

    存储过程 CREATE PROCEDURE addUser --Add the parameters for the stored procedure here (--存储过程参数 @系统类别 nva ...

  4. C#版winform实现UrlEncode

    在Asp.net中可以使用Server.HTMLEncode和Server.URLEncode 将文本或URL的特殊字符编码,但在控制台或Winform程序中没有办法使用到这些方法, 解决办法:右击项 ...

  5. Android--真机调试程序方法

    方法例如以下: (1)手机通过数据线连接到手机上. (2)在手机中设置:设置-->应用程序-->开发-->USB调试 (3)在CMD中測试一下.连接是否正常,CMD中命令例如以下: ...

  6. Java异常的处理机制(二)

    1.throw的作用 class Usre { private int age; public void setAge (int age) { if(age < 0) { RuntimeExce ...

  7. 自己定义控件三部曲之动画篇(七)——ObjectAnimator基本使用

    前言: 假如生活欺骗了你, 不要悲伤,不要心急! 忧郁的日子里须要镇静: 相信吧,快乐的日子终将会来临! 心儿永远向往着未来: 如今却常是忧郁. 一切都是瞬息,一切都将会过去: 而那过去了的,就会成为 ...

  8. vue组件的3种书写形式

    第一种使用script标签 <!DOCTYPE html> <html> <body> <div id="app"> <my- ...

  9. hdu 1002(大数)

    A + B Problem II Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  10. Ajax+Java实现大文件切割上传

    技术体系:html5(formdata) + java + servlet3.0+maven + tomcat7 <!DOCTYPE html> <html> <head ...