bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
注意：jQuery报 Maximum call stack size exceeded
错误描述：超出最大调用堆栈大小
错误原因：内部形成递归
解决方案： html 写法不规范，更改 html 写法，可参考官网示例，或下面代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>validate</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-validator/0.5.3/css/bootstrapValidator.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<form id="inputForm">
<div class="form-group">
<label class="col-lg-4 control-label">姓名</label>
<div class="col-lg-8">
<input type="text" class="form-control" name="xm" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label">性别</label>
<div class="col-lg-8">
<input type="text" class="form-control" name="xb" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label">年龄</label>
<div class="col-lg-8">
<input type="text" class="form-control" name="nl" />
</div>
</div>
</form>
<div class="row">
<button id="btn1" class="btn btn-primary" >提交</button>
<button id="btn2" class="btn btn-primary" >更改校验状态</button>
<button id="btn3" class="btn btn-primary" >增加校验字段</button>
<button id="btn4" class="btn btn-primary" >移除校验字段</button>
<button id="btn5" class="btn btn-primary" >重置表单校验</button>
</div>
</div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>
<script>
$(function(){
var formValidator = function(){
$('#inputForm').bootstrapValidator({
fields:{
xm:{
validators:{
notEmpty:{
message: '姓名不能为空'
}
}
},
xb:{
validators:{
notEmpty:{
message: '性别不能为空'
}
}
}
}
});
}
formValidator();
// 提交表单
$('#btn1').on('click', function(){
var bootstrapValidator = $('#inputForm').data('bootstrapValidator');
bootstrapValidator.validate();
if(bootstrapValidator.isValid()){
alter('提交成功');
}
});
// 改变字段校验状态
$('#btn2').on('click', function(){
/*
NOT_VALIDATED 未校验的
VALIDATING 校验中的
INVALID 校验失败的
VALID 校验成功的
*/
// $('#inputForm').bootstrapValidator('updateStatus', 'xm', 'NOT_VALIDATED');
// 或
$('#inputForm').data('bootstrapValidator').updateStatus('xm', 'NOT_VALIDATED');
});
// 增加校验字段
$('#btn3').on('click', function(){
/*$('#inputForm').bootstrapValidator('addField', 'nl', {
validators:{
notEmpty:{
message: '年龄不能为空'
}
}
});*/
// 或
$('#inputForm').data('bootstrapValidator').addField('nl', {
validators:{
notEmpty:{
message: '年龄不能为空'
}
}
});
});
// 移除校验字段
$('#btn4').on('click', function(){
// 字段可以处于校验中，所以先处理校验状态
// $('#inputForm').bootstrapValidator('updateStatus', 'xm', 'NOT_VALIDATED');
// $('#inputForm').bootstrapValidator('removeField', 'xm');
// 或
$('#inputForm').data('bootstrapValidator').updateStatus('xm', 'NOT_VALIDATED');
$('#inputForm').data('bootstrapValidator').removeField('xm');
});
// 重置表单校验
$('#btn5').on('click', function(){
$('#inputForm').bootstrapValidator('resetForm', true);
// 或
//$('#inputForm').data('bootstrapValidator').resetForm(true);
});
});
</script>
</html>
总结
到此这篇关于bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码的文章就介绍到这了,更多相关bootstrapvalidator表单校验内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
BootStrap Validator使用注意事项(必看篇)
如果你使用的前端框架是bootstrap,那么前端验证框架就不必考虑了,bootstrapvalidator是最好的选择,它和bootstrap的结合最完美,不过要注意版本的问题,针对bootstrap2和bootstrap3有不同的版本. 下面是我遇到的两个注意事项,自己做个笔记: 1.为每个要验证的表单元素添加name属性 例如: <div class="form-group"> <input type="text" placeholder=&
-
jquery插件bootstrapValidator表单验证详解
Bootstrap Validator是为Bootstrap3设计的一款表单验证jQuery插件,非常适合基于Bootstrap框架的网站. 看作者的github,这款插件已经不再更新了,而推荐使用FormValidation,不过现在还是先介绍一下BootstrapValidator的使用. 准备工作 BootstrapValidator文档地址:http://bv.doc.javake.cn/ 下载源码后,将其中的bootstrapValidator.min.css和bootstapVali
-
BootstrapValidator超详细教程(推荐)
一.引入必要文件 下载地址:(https://github.com/nghuuphuoc/bootstrapvalidator/archive/v0.4.5.zip) <link rel="stylesheet" href="/path/to/bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="/path/to/dist/css/bootstrapVa
-
使用bootstrapValidator插件进行动态添加表单元素并校验
一.前言 实际工作中,要实现表单元素的动态增加,并使用bootstrapValidator插件对动态添加的表单元素进行前台校验.在以前的工作中也使用过bootstrapValidator对表单元素进行校验,但涉及到的表单元素都是固定的,所以在页面载入时,对表单元素进行初始化就可以实现.虽然思路很明确,但由于对bootstrapValidator的用法不熟悉,在这个问题上还是浪费了很多时间,现在就把解决方法和功能效果图贴出来,希望对大家有所帮助. 思路:动态添加表单元素,并调用bootstrapV
-
BootStrapValidator校验方式
做输入校验的时候如果你前端框架用的是bootstrap的话,首推bootstrapValidator校验方式,具体流程如下: 一.下载,导入js文件 <link type="text/css" rel="stylesheet" href="${ctx}/components/validate/css/bootstrapValidator.css" /> <script type="text/javascript&quo
-
Bootstrap中的表单验证插件bootstrapValidator使用方法整理（推荐）
本文给大家介绍如何判断表单验证的实例代码,在没给大家介绍正文之前,先给大家介绍下插件. 插件介绍 先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用提示 中文化: 下载插件后,将\js\bootstrapValidator\language\zh_CN.js 引入文件,即实现中文化 提交前验证表单: 更丰富一点的表单验证例子:http://www.jq22.com/yanshi522,直接上代码: <!DOCTYPE h
-
jquery插件bootstrapValidator数据验证详解
因为项目需要数据验证,看bootstrapValidator 还不错,就上手一直,完美兼容,话不多说. bootstrap:能够增加兼容性的强大框架. 需要引用css: bootstrap.min.css bootstrapValidator.min.css js: jquery-1.10.2.min.js bootstrap.min.js bootstrapValidator.min.js (下载实例) 以上这些都是必须的. 先上个简单的例子,只要导入相应的文件可以直接运行: <!DOCTYP
-
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
注意:jQuery报 Maximum call stack size exceeded 错误描述:超出最大调用堆栈大小 错误原因:内部形成递归 解决方案: html 写法不规范,更改 html 写法,可参考官网示例,或下面代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" conte
-
bootstrapValidator表单验证插件学习
本文实例为大家分享了bootstrapValidator表单验证的具体代码,供大家参考,具体内容如下 1.页面引入css.js <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/> &l
-
让axios发送表单请求形式的键值对post数据的实例
想要发送键值对,其实是需要做响应处理的,直接上代码 npm install --save axios vue-axios qs qs是必不可少的插件,安装完成后,在main.js插入一下代码 //载入axios import Qs from 'qs' import axios from 'axios' import VueAxios from 'vue-axios' var axios_instance = axios.create({ baseURL:'http://localhost', t
-
实用又漂亮的BootstrapValidator表单验证插件
本文推荐一款twitter做的bootstrapValidator.js,本身bootstrap就是twitter做的,那么使用原配的validator也就更值得信赖.从百度上搜bootstrapValidator会出现很多款,但我只推荐这款: 一.一睹为快 为了简便的介绍,这里只做为空的check. BootstrapValidator官方下载地址 二.资源引用 下载完资源包后,你可以看到如下的目录. 然后把以下三个文件引入到你项目. <link type="text/css"
-
vue表单验证rules及validator验证器的使用方法实例
目录 前言 表单验证rules 自定义校验规则 总结 前言 为防止用户犯错,尽可能更早地发现并纠正错误. Element中Form (表单)组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可. 注意:prop对应表单域 model 字段,使用 validate方法时,该属性是必填的. 表单验证rules 以官网给出的例子分析来看 将prop 属性设置为需校验的字段名. 在data里配置要校验字段和校验规则
-
JSP之表单提交get和post的区别详解及实例
JSP之表单提交get和post的详解及实例 一 get和post的区别 二 实战(post方式提交) 1.login.jsp <%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" %> <% String path = request.getContextPath(); String basePath = req
-
asp.net中Post表单保存页面状态并输出源码的实现方法
Html页面 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" ValidateRequest="false" %> <%@ Register Src="UserControl/Ucone.ascx" TagNam
-
vue form表单使用resetFields函数出现的问题
目录 form表单使用resetFields函数的问题 resetFields失效,死活不起作用的解决 分析 解决办法 form表单使用resetFields函数的问题 今天想使用新增和删除使用一个dialog,这就涉及到点击添加按钮需要清空表单数据的问题,我第一个想到的是调用resetFields方法. 我直接写了之后是这样的 this.$refs[formName].resetFields() 结果直接报错,于是我就上网上百度了后,发现改成这样就不报错了. this.$nextTick(fu