BootStrap 智能表单系列七验证的支持

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

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

该插件也为您支持到了表单验证，在需要验证的列的配置中加一项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的值删除，提交表单可以看到效果：

效果图如下：

至于消息提示的问题，请参照jquery validation的api

上一章：BootStrap 智能表单系列六表单数据绑定(编辑页面的数据绑定)

下一章：BootStrap 智能表单系列八表单配置json详解

本系列首页：BootStrap 智能表单系列首页 (已完结)

BootStrap 智能表单系列七验证的支持的更多相关文章

BootStrap 智能表单系列首页 (持续更新中...)
背景:本码农.NET后端工程师,在项目开发中发现写了很多重复的代码, 于是自己整了一套根据配置来生成form表单的插件,针对表单的改动仅需要修改配置的json即可使用中发现还是蛮实用的,于是开源出来 ...
BootStrap 智能表单系列六表单数据绑定(编辑页面的数据绑定)
本章介绍如何在生成表单后,将一个model的数据展示到form表单中(一般用于编辑页面) 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartF ...
BootStrap 智能表单系列八表单配置json详解
本章属于该系列的高级部分,将介绍表单中一些列的配置 1.config列的配置: 主要用于控制布局 :config:{autoLayout:true|'1,2,2,4'} true:根据配置项最里层的数 ...
BootStrap 智能表单系列十一级联下拉的支持
像省市县选择的这种,但凡是个人肯定都见过,实现方式有很多种 1.有在第一级选择的时候去加载或者从本地对象中拿第一级对应的数据源显示到列表中,第二级以此类推 2.也有将所有的项都加载到select中,然 ...
BootStrap 智能表单系列十自动完成组件的支持
web开发中,肯定遇到像百度.google这种搜索的功能吧,那智能表单中的自动完成可以做什么呢,下面来揭晓: 1.包含像google.百度等类似的简单搜索 2.复杂结构的支持,比如说输入产品编号,需 ...
BootStrap 智能表单系列九表单图片上传的支持
本章介绍如何在生成表单后,可以支持上传图片后可以及时预览图片代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/maste ...
BootStrap 智能表单系列五表单依赖插件处理
这一章比较简单哦,主要就是生产表单元素后的一些后续处理操作,比如日期插件的渲染.一些autocomplete的处理等,在回调里面处理就可以了, demo: $("input.date-pic ...
BootStrap 智能表单系列四表单布局介绍
表单的布局分为自动布局和自定义布局两种: 自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格,通过设置autoLayout为true可以实现自动布局自动以布局就是 ...
BootStrap 智能表单系列三分块表单配置的介绍
相信广大博友肯定碰到过一个编辑页面分了很多块的情况,智能表单插件已经为您支持了这种情况, 代码如下(链接地址:https://github.com/xiexingen/Bootstrap-SmartF ...

随机推荐

linux下flashplayer更新_最新版传送
http://get.adobe.com/cn/flashplayer/ 官网地址,全部最新的flash都在这了,左边选择你要下载的类型,右边点击下载就行了. 最简单的方法就是下载rpm包,命令rp ...
织梦DEDECMS 首页列表页内容也时间日期调用标签
DEDECMS利用strftime()函数格式化时间的所有参数详解,包括年份日期进制.小时格式等,大家收藏吧,呵. 日期时间格式 (利用strftime()函数格式化时间)0 dedecms首页时间标 ...
Android开发实例之闹钟提醒
本实例通过TimePickerDialog时间选择对话框让用户设置闹钟.并通过AlarmManager全局定时器在指定的时间启动闹钟Activity . 程序执行效果图: 实例代码: package ...
黑马程序员_<<String类>>
--------------------ASP.Net+Android+IOS开发..Net培训.期待与您交流! -------------------- 1. String类 1.概述 String ...
iOS深入学习（Block全面分析）
本文翻译自苹果的文档,有删减,也有添加自己的理解部分. 如果有Block语法不懂的,可以参考fuckingblocksyntax,里面对于Block 为了方便对比,下面的代码我假设是写在ViewCon ...
JS学习笔记（一）基本数据类型和对象类型
js是一种弱类型的语言,所有的变量都用var进行声明,字符串用双引号或单引号括起来,常见基本数据类型为number,string,boolean等.如 var num = 123;或var num = ...
debug jdk
1.解压jdk安装路径中的src.zip如:c:\src. 注意一般只选择编译java javax org 三个文件夹就足够了,剩余的文件夹删除掉 2.列出要编译的源文件:dir /B /S /X c ...
C++类的常成员函数
让一个成员函数带上常量性是什么意思呢?通常的答案是,一个常成员函数不会更改其class对象.这是一种平凡的表述,而编译器实现的手法也相当平凡. 任何非静态成员函数其实都被编译器隐式插入了一个指针类型的 ...
[C#技术参考]在PictureBox 中绘图防止闪烁的办法
开篇之前说点别的,马上年终了,好希望年终奖大大的,但是好像这次项目的展示很重要,所以这几天绷得比较近,但是真的没有感觉烦,就是害怕来不及.所以抓紧了.下面直接正题.说一下用到的东西,都是Google搜 ...
解决全站ie6下PNG图片不透明问题只要几行代码
解决全站ie6下PNG图片不透明问题只要复制下面这几行代码粘贴在你的文档最底部,需要用到的包DD_belatedPNG_0.0.8a.js自己网上下载吧代码走起 /*在文档底部加入以下代码*/ &l ...

BootStrap 智能表单系列 七 验证的支持

BootStrap 智能表单系列 七 验证的支持的更多相关文章

随机推荐

热门专题

BootStrap 智能表单系列七验证的支持

BootStrap 智能表单系列七验证的支持的更多相关文章