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 相关文章推荐
扩展String功能方法
Sep 22 Javascript
jquery插件 cluetip 关键词注释
Jan 12 Javascript
jquery怎样实现ajax联动框(一)
Mar 08 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
Mar 05 Javascript
文字垂直滚动之javascript代码
Jul 29 Javascript
Bootstrap实现弹性搜索框
Jul 11 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
May 11 Javascript
Vue中保存数据到磁盘文件的方法
Sep 06 Javascript
socket在egg中的使用实例代码详解
May 30 Javascript
JS 封装父页面子页面交互接口的实例代码
Jun 25 Javascript
mui js控制开关状态、修改switch开关的值方法
Sep 03 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
Jul 27 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/07/22 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
2013/12/10 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
2016/03/11 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
JS读写CSS样式的方法汇总
2016/08/16 Javascript
jquery 抽奖小程序实现代码
2016/10/12 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
2017/05/24 Javascript
浅谈sass在vue注意的地方
2017/08/10 Javascript
详解Vuex中mapState的具体用法
2017/09/28 Javascript
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
详解如何使用 vue-cli 开发多页应用
2017/12/16 Javascript
JS运动特效之完美运动框架实例分析
2018/01/24 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
2018/05/13 Javascript
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
JS实现横向跑马灯效果代码
2020/04/20 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
2020/11/04 Javascript
Python中使用HTMLParser解析html实例
2015/02/08 Python
python3 requests库实现多图片爬取教程
2019/12/18 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
佐卡伊官网:中国知名珠宝品牌
2017/02/05 全球购物
美国著名的家居用品购物网站:Bed Bath & Beyond
2018/01/05 全球购物
美国购买体育、音乐会和剧院门票网站:SelectATicket
2019/09/08 全球购物
Nike瑞士官网:Nike CH
2021/01/18 全球购物
高中毕业生自我鉴定例文
2013/12/29 职场文书
即兴演讲稿
2014/01/04 职场文书
电气工程及其自动化专业毕业生自荐信
2014/06/21 职场文书
会计工作检讨书
2015/02/19 职场文书
乒乓球比赛通知
2015/04/27 职场文书
民事调解书范文
2015/05/20 职场文书
争做文明公民倡议书
2019/06/24 职场文书
广告文案的撰写技巧(实用干货)
2019/08/23 职场文书
新手入门Mysql--sql执行过程
2021/06/20 MySQL
JS数组去重详情
2021/11/07 Javascript
在js中修改html body的样式
2021/11/11 Javascript
http通过StreamingHttpResponse完成连续的数据传输长链接方式
2022/02/12 Python
Go并发4种方法简明讲解
2022/04/06 Golang