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 相关文章推荐
鼠标图片振动代码
Jul 06 Javascript
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
Dec 25 Javascript
jQuery写的日历(包括日历的样式及功能)
Apr 23 Javascript
JS+CSS实现精美的二级导航效果代码
Sep 17 Javascript
浅谈Node.js:fs文件系统模块
Dec 08 Javascript
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
JS实现左边列表移到到右边列表功能
Mar 28 Javascript
简单的vuex 的使用案例笔记
Apr 13 Javascript
vue配置多页面的实现方法
May 22 Javascript
浅谈vue.use()方法从源码到使用
May 12 Javascript
详解将微信小程序接口Promise化并使用async函数
Aug 05 Javascript
基于脚手架创建Vue项目实现步骤详解
Aug 03 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
建立文件交换功能的脚本(二)
2006/10/09 PHP
php中防止SQL注入的最佳解决方法
2013/04/25 PHP
PHP向浏览器输出内容的4个函数总结
2014/11/17 PHP
Yii框架上传图片用法总结
2016/03/28 PHP
PHP采用超长(超大)数字运算防止数字以科学计数法显示的方法
2016/04/01 PHP
Ajax+Json 级联菜单实现代码
2009/10/27 Javascript
IE bug table元素的innerHTML
2010/01/11 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
2011/09/26 Javascript
Google的跟踪代码 动态加载js代码方法应用
2012/11/12 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
基于jquery实现表格无刷新分页
2016/01/07 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
2016/09/16 Javascript
NodeJS处理Express中异步错误
2017/03/26 NodeJs
nginx配置React静态页面的方法教程
2017/11/03 Javascript
详解Node 定时器
2018/02/26 Javascript
js中getter和setter用法实例分析
2018/08/14 Javascript
JS实现查找数组中对象的属性值是否存在示例
2019/05/24 Javascript
JavaScript前端开发时数值运算的小技巧
2020/07/28 Javascript
[49:40]2018DOTA2亚洲邀请赛小组赛 A组加赛 TNC vs Newbee
2018/04/03 DOTA
200 行python 代码实现 2048 游戏
2018/01/12 Python
详解利用Python scipy.signal.filtfilt() 实现信号滤波
2019/06/05 Python
基于python-opencv3的图像显示和保存操作
2019/06/27 Python
Python3离线安装Requests模块问题
2019/10/13 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
商务英语求职自荐信范文
2013/12/24 职场文书
热门专业求职信
2014/05/24 职场文书
促销活动总结怎么写
2014/06/25 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
工地食品安全责任书
2015/05/09 职场文书
《观潮》教学反思
2016/02/17 职场文书
python如何查找列表中元素的位置
2022/05/30 Python
Java实现HTML转为Word的示例代码
2022/06/28 Java/Android