BootStrap智能表单实战系列(七)验证的支持


Posted in Javascript onJune 13, 2016

但凡是涉及到用户编辑信息然后保存的页面,都涉及到一个数据是否符合要求的检查,需要客服端和服务器端的校验的问题;

客服端的校验主要是为了提高用户体验,而服务器端的校验为了数据的合格性

该插件也为您支持到了表单验证,在需要验证的列的配置中加一项required:true 再生成表单元素前面的label的时候会自动在label前面生成一个*,用于提示 改列数据会进行校验

验证是使用了jquery validation,具体使用方式请参照jquery validation的api

代码如下(页面地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form5-Validation.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/bootstrap.css">
<!--自定义站点样式-->
<link rel="stylesheet" href="../css/site.css">
<script src="../lib/jquery.js"></script>
<script src="../lib/jquery.validate.js"></script>
<script src="../lib/bootstrap.js"></script>
<!--工具方法-->
<script src="../scripts/global.js"></script>
<!--插件-->
<script src="../scripts/plugin.js"></script>
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">
<label>带验证的智能表单</label>
<div class="pull-right">
<button id="btnSubmit" class="btn btn-primary btn-xs">提交表单</button>
</div>
</div>
<div class="panel-body">
<form action="#" id="formContainer" class="form form-horizontal"></form>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading"><label>介绍</label></div>
<div class="panel-body">
<h3 class="lead">表单的验证</h3>
<blockquote>
<p>使用jquery validation验证,其他验证方法请参考jquery validation,自定义验证global.Fn.setDefaultValidator()方法在global.js文件中,改文件属于工具文件,里面定义了很多工具方法,包括表单序列化、日期格式化、数组判断、设置默认验证、显示消息、弹窗、初始化插件、初始化表单、文件下载、表单保存等</p>
</blockquote>
</div>
</div>
<script>
$(function () {
var eles=[
[
{label:{text:'自定义用户名:'},ele:{type:'text',name:'UserName',title:'用户名:',required:true}},
{ele:{type:'radio',name:'sex',title:'性别:',items:[{text:'男',value:1},{text:'女',value:2}]}},
{ele:{type:'checkbox', name:'plant',title:'使用平台:',items:[{text:'APP',value:'app'},{text:'web',value:'web'}]}} 
],
[
{ele:{type:'select',name:'province',title:'省份:',withNull:true,items:[{text:'广东',value:'GD'},{text:'湖南',value:'HN'}]}},
{ele:{pre:{text:'<input type="radio">'},type:'text',name:'displayName',title:'显示名称:'}},
{ele:{type:'search',title:'产品',id:'ProductName',required:true}}
],
[
{ele:{type:'datetime',name:'FromeDate',title:'有效期:'}},
{ele:{type:'datetime',name:'ToDate',title:'~'}},
]
];
//隐藏表单元素主要用于编辑时候后台可以区别开来
var hides = [{ id: 'primaryKey' }];
var bsForm = new BSForm({ eles: eles, hides: hides, autoLayout: '1,3' }).Render('formContainer',function(bf){
var model={primaryKey:1,UserName:'xxg',sex:1,plant:['app','web'],province:'GD',displayName:'TEST',ProductName:'笔记本',FromeDate:'2015-06-10',ToDate:'2015-08-08'};
bf.InitFormData(model);
});
$("#btnSubmit").bind('click',function () {
if (!$("#formContainer").valid()) {
alert("验证没通过!");
}
else{
var postData=bsForm.GetFormData();
alert("获取到的表达数据为:"+JSON.stringify(postData)); 
}
});
//使用自定义配置的验证样式处理
global.Fn.setDefaultValidator();
//定义验证规则
$("#formContainer").validate({
rules:{
UserName:{
required:true,
minlength:3,
maxlength:10
},
ProductName:{required:true}
}
});
});
</script>
</body></html>

代码中为UserName列配置了必填和长度验证,运行界面将UserName的值删除,提交表单可以看到效果:

效果图如下:

BootStrap智能表单实战系列(七)验证的支持

Javascript 相关文章推荐
IE与firefox下Dhtml的一些区别小结
Dec 02 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 Javascript
jQuery实现可用于博客的动态滑动菜单
Mar 09 Javascript
Js实现无刷新删除内容
Apr 29 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 Javascript
JS打印组合功能
Aug 04 Javascript
JavaScript省市级联下拉菜单实例
Feb 14 Javascript
vue使用axios时关于this的指向问题详解
Dec 22 Javascript
JavaScript修改注册表实例代码
Jan 05 Javascript
jquery传参及获取方式(两种方式)
Feb 13 jQuery
有趣的JavaScript隐式类型转换操作实例分析
May 02 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
Oct 31 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 #Javascript
js 截取或者替换字符串中的数字实现方法
Jun 13 #Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
Jun 13 #Javascript
BootStrap智能表单实战系列(四)表单布局介绍
Jun 13 #Javascript
JS/jQ实现免费获取手机验证码倒计时效果
Jun 13 #Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
Jun 13 #Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
Jun 13 #Javascript
You might like
自定义session存储机制避免会话保持问题
2014/10/08 PHP
Nginx+php配置文件及原理解析
2020/12/09 PHP
Tab页界面,用jQuery及Ajax技术实现
2009/09/21 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
2013/04/07 Javascript
js获取当前月的第一天和最后一天的小例子
2013/11/18 Javascript
Javascript 多物体运动的实现
2014/12/24 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
理解Javascript的动态语言特性
2015/06/17 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
2016/08/23 Javascript
微信小程序动态显示项目倒计时效果
2017/06/13 Javascript
vue2里面ref的具体使用方法
2017/10/27 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
2019/06/21 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
2020/07/16 Javascript
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
[01:01:36]Optic vs paiN 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python之eval()函数危险性浅析
2014/07/03 Python
Python os模块介绍
2014/11/30 Python
python中input()与raw_input()的区别分析
2016/02/27 Python
深入浅析Python中的yield关键字
2018/01/24 Python
Django 数据库同步操作技巧详解
2019/07/19 Python
Pytorch 多维数组运算过程的索引处理方式
2019/12/27 Python
python实现百度OCR图片识别过程解析
2020/01/17 Python
python等待10秒执行下一命令的方法
2020/07/19 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
Currentbody德国站:健康与美容技术专家
2020/04/05 全球购物
.net面试题
2015/12/22 面试题
sort命令的作用和用法
2013/08/25 面试题
双十佳事迹材料
2014/01/29 职场文书
销售人员职业生涯规划范文
2014/03/01 职场文书
网站推广策划方案
2014/06/04 职场文书
联谊活动总结
2014/08/28 职场文书
领导离职感言
2015/08/03 职场文书
JavaScript实现简单计时器
2021/06/22 Javascript
Python中使用tkFileDialog实现文件选择、保存和路径选择
2022/05/20 Python