html input validator,BootstrapValidator 表单验证超详要怎么做?表单验证超详细教程 !...
我们在接触Bootstrap的时候总会遇到不同的问题和困难,今天我们就来说说有关于“BootstrapValidator 表单验证超详要怎么做?”这个问题。下面是小编整理的有关于这个问题的相关内容,希望对大家的学习和了解有所帮助。
一、引入 js 和 css 文件
在我们开始项目的时候我们需要导入下面这两个文件:bootstrapValidator.js、bootstrapValidator.css。我们需要在有jquery和bootstrap的页面里引入。
二、编写html
我们在项目中的 html文件中编写 form表单,添加表单控件,如果我们想对某一字段添加验证规则的话,则默认需要以
标签必须要有name属性,里面的值用来匹配字段。代码如下所示:
Username
Email address
三、添加规则验证
1、在html标签中添加,代码如下所示:
Username
data-bv-message="The username is not valid"
required
data-bv-notempty-message="The username is required and cannot be empty"
pattern="[a-zA-Z0-9]+"
data-bv-regexp-message="The username can only consist of alphabetical, number" />
2、添加 js 文件,代码如下:$(function () {
$("#form-test").bootstrapValidator({
live: 'disabled',//验证时机,enabled是内容有变化就验证(默认),disabled和submitted是提交再验证
excluded: [':disabled', ':hidden', ':not(:visible)'],//排除无需验证的控件,比如被禁用的或者被隐藏的
submitButtons: '#btn-test',//指定提交按钮,如果验证失败则变成disabled,但我没试成功,反而加了这句话非submit按钮也会提交到action指定页面
message: '通用的验证失败消息',//好像从来没出现过
feedbackIcons: {//根据验证结果显示的各种图标
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
text: {
validators: {
notEmpty: {//检测非空,radio也可用
message: '文本框必须输入'
},
stringLength: {//检测长度
min: 6,
max: 30,
message: '长度必须在6-30之间'
},
regexp: {//正则验证
regexp: /^[a-zA-Z0-9_\.]+$/,
message: '所输入的字符不符要求'
},
remote: {//将内容发送至指定页面验证,返回验证结果,比如查询用户名是否存在
url: '指定页面',
message: 'The username is not available'
},
different: {//与指定文本框比较内容相同
field: '指定文本框name',
message: '不能与指定文本框内容相同'
},
emailAddress: {//验证email地址
message: '不是正确的email地址'
},
identical: {//与指定控件内容比较是否相同,比如两次密码不一致
field: 'confirmPassword',//指定控件name
message: '输入的内容不一致'
},
date: {//验证指定的日期格式
format: 'YYYY/MM/DD',
message: '日期格式不正确'
},
choice: {//check控件选择的数量
min: 2,
max: 4,
message: '必须选择2-4个选项'
}
}
}
}
});
$("#btn-test").click(function () {//非submit按钮点击后进行验证,如果是submit则无需此句直接验证
$("#form-test").bootstrapValidator('validate');//提交验证
if ($("#form-test").data('bootstrapValidator').isValid()) {//获取验证结果,如果成功,执行下面代码
alert("yes");//验证成功后的操作,如ajax
}
});
});
四、前端自定义验证规则
1、回调自定义验证
通过Bootstrapvalidator的前端自定义验证为callback,代码如下所示:"rowkey": {
message: 'rowkey验证失败',
validators: {
stringLength:{
max: 1000,
message: 'rowkey不能超过1000个字符'
},
callback:{
callback : function(value, validator, $field) {
if ($('input:radio[name="databaseType"]:checked').val() == "Hbase" &&
value == ""){
return {
valid: false,
message: 'rowkey不能为空'
}
}
else{
return true
}
}
}
}
}
2、拓展插件的validators方法
这个方法是将项目中常用的方法放到了一个单独js中从而实现我们需要的效果的,代码如下所示:$(function () {
$.fn.bootstrapValidator.validators.checkIdCard = {
/**
* @param {BootstrapValidator} 表单验证实例对象
* @param {jQuery} $field jQuery 对象
* @param {Object} 表单验证配置项值
* @returns {boolean}
*/
validate: function (validator, $field, options) {
// debugger;
try {
return checkIdCardNo($field.val());
}catch (e){
console.error(e);
}
return false;
}
};
}(window.jQuery));
3、remote 后端自定义验证
我们知道在Bootstrapvalidator的前端自定义验证为remote,这个我们在数据库验重时经常会用到 ,代码如下所示:"tableName": {
message: '表名称验证失败',
validators: {
notEmpty: {
message: '表名称不能为空'
},
stringLength:{
max: 100,
message: '表名称不能超过100个字符'
},
remote: {
message: '表名重复',
url: 'check',
data : '',//这里默认会传递该验证字段的值到后端
delay: 2000 //这里特别要说明,必须要加此属性,否则用户输入一个字就会访问后台一次,会消耗大量的系统资源,
}
}
},
后端部分代码://检测新增metaTableName是否重复
def check(){
def map = new HashMap()
def result = service.check(params.name)
if(result){
map.put("valid",true)
}else{
map.put("valid",false)
}
render(map as JSON) // 注意后端传到前端的格式必须是带有valid属性的json对象才会被validator识别, // 如果返回任何其他的值,页面验证将获取不到验证结果导致无法验证
}
{"valid":false} //表示不合法,验证不通过
{"valid":true} //表示合法,验证通过
五、常用事件
1、获取validator对象或实例
我们这个方法一般是使用直接调用 $(form).bootstrapValidator(options)来初始化validator。在初始后之后有两种方法来获取我们的validator对象或实例,方法如下所示:
方法一:// Get plugin instance
var bootstrapValidator = $(form).data('bootstrapValidator');
// and then call method
bootstrapValidator.methodName(parameters)
方法二:$(form).bootstrapValidator(methodName, parameters);
这种方式获取的是代表当前form的jquery对象,调用方式是将方法名和参数分别传入到bootstrapValidator方法中,可以链式调用。
两种方法使用如下所示:
// The first way
$(form)
.data('bootstrapValidator')
.updateStatus('birthday', 'NOT_VALIDATED')
.validateField('birthday');
// The second one
$(form)
.bootstrapValidator('updateStatus', 'birthday', 'NOT_VALIDATED')
.bootstrapValidator('validateField', 'birthday');
2、重置某一单一验证字段验证规则$(formName).data(“bootstrapValidator”).updateStatus("fieldName", "NOT_VALIDATED", null );
3、重置表单所有验证规则$(formName).data("bootstrapValidator").resetForm();
4、手动触发表单验证//触发全部验证
$(formName).data(“bootstrapValidator”).validate();
//触发指定字段的验证
$(formName).data(“bootstrapValidator”).validateField('fieldName');
5、获取当前表单状态var flag = $(formName).data(“bootstrapValidator”).isValid();
6、根据指定字段名称获取验证对象// element = jq对象 / null
var element = $(formName).data(“bootstrapValidator”).getFieldElements('fieldName');
总结:
这些内容就是我们今天小编分享的有关于“BootstrapValidator 表单验证超详要怎么做?”这个问题的相关内容,如果你有更好的方法也可以和大家一同分享学习,更多有关于bootstrap的相关学习内容和知识我们都可以在W3cschool中进行学习和了解。
html input validator,BootstrapValidator 表单验证超详要怎么做?表单验证超详细教程 !...相关推荐
- mysql 多表 查询慢_详解Mysql多表联合查询效率分析及优化
1. 多表连接类型1. 笛卡尔积(交叉连接) 在MySQL中可以为CROSS JOIN或者省略CROSS即JOIN,或者使用',' 如: SELECT * FROM table1 CROSS JOI ...
- mysql教程详解之多表联合查询_详解数据库多表连接查询的实现方法
详解数据库多表连接查询的实现方法 通过连接运算符可以实现多个表查询.连接是关系数据库模型的主要特点,也是它区别于其它类型数据库管理系统的一个标志. 在关系数据库管理系统中,表建立时各数据之间的关系不必 ...
- 利用jQuery.validator来做表单验证,不要太轻松(全攻略)
1.介绍 jQuery.validator是给我们用来做表单验证提交时的一个插件,你可以直接去官网下载,也可以通过菜鸟教程学习和下载该插件 菜鸟教程(jQuery.validator) 2.使用 2. ...
- [vue-element] ElementUI是怎么做表单验证的?在循环里对每个input验证怎么做呢?
[vue] ElementUI是怎么做表单验证的?在循环里对每个input验证怎么做呢? model 绑定表单数据,通过prop取表单数值,通过编写ref进行后台API验证 ,根据rules进行表单内 ...
- jQuery Validate表单验证框架详解
jQuery表单验证框架总结 jQuery Validate验证框架详解 jQuery校验官网地址:bassistance.de » jQuery plugin: Validation 一.导入js库 ...
- angular js创建表单_如何优雅的使用 Angular 表单验证
随便说说,这一节可以跳过 去年参加 ngChine 2018 杭州开发者大会的时候记得有人问我: Worktile 是什么时候开始使用 Angular 的,我说是今年(2018年) 3 月份开始在新模 ...
- JS表单验证(HTML+CSS+JS)小实例【详细教程】
前言 大家好,分享一个HTML+CSS+JS表单校验,包括页面的简单布局,样式渲染,还有基础的JS校验方法.希望大家喜欢!哈哈 一.效果图 二.介绍 图标库使用Element-UI <!-- 引 ...
- table中加表单元素怎么验证_element-ui 解决 table 里包含表单验证的问题!
实际项目中的场景,需要在table里做表单的验证,如图效果: 其实问题关键就在于如何给el-form-item动态绑定prop :prop="'tableData.' + scope.$in ...
- vue 表单验证正则_vue elementUI如何自定义表单验证规则
一.elementUI自带了一部分表单验证规则,本文讲解如何使用自定义验证规则来完成密码的二次验证. 1.1.首先添加验证邮箱和电话规则和正则表达式// 验证邮箱的规则 var checkEmail ...
最新文章
- MySQL优化篇:单表索引失效
- NR 5G 安全与秘钥简述
- Mac zsh切换bash bash切换zsh
- BZOJ 1269: [AHOI2006]文本编辑器editor Splay
- php函数内调用类的变量,php - 如何调用一个类变量的闭包?
- 采访《以魂为中心的领导力》作者之问答
- 当你写爬虫遇到APP的请求有加密参数时该怎么办?【初级篇-常规模式】
- 关于C#中动态加载AppDomain的问题
- matlab求解数学题,实验二Matlab求解数学问题
- 电脑五笔,电脑键盘五笔指法练习表
- 视频教程-VB程序设计入门基础-其他
- Solidworks 3D Onshape 3D 繪圖自學分享
- 经纬财富:莆田炒现货白银技巧
- 战略变了 IBM服务器由产品到解决方案的转变
- ubuntu 如何放大终端窗口字体
- 如何解决VS下载速度慢
- iOS安全攻与防(总篇)
- 《数字图像处理》读书笔记2:数字图像处理基础
- 苹果手机忘记Appid怎么办
- sizzle.js学习笔记利用闭包模拟实现数据结构:字典(Map)