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

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

该插件也为您支持到了表单验证，在需要验证的列的配置中加一项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 智能表单系列 七 验证的支持的更多相关文章

  1. BootStrap 智能表单系列 首页 (持续更新中...)

    背景:本码农.NET后端工程师,在项目开发中发现写了很多重复的代码, 于是自己整了一套根据配置来生成form表单的插件,针对表单的改动仅需要修改配置的json即可 使用中发现还是蛮实用的,于是开源出来 ...

  2. BootStrap 智能表单系列 六 表单数据绑定(编辑页面的数据绑定)

    本章介绍如何在生成表单后,将一个model的数据展示到form表单中(一般用于编辑页面) 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartF ...

  3. BootStrap 智能表单系列 八 表单配置json详解

    本章属于该系列的高级部分,将介绍表单中一些列的配置 1.config列的配置: 主要用于控制布局 :config:{autoLayout:true|'1,2,2,4'} true:根据配置项最里层的数 ...

  4. BootStrap 智能表单系列 十一 级联下拉的支持

    像省市县选择的这种,但凡是个人肯定都见过,实现方式有很多种 1.有在第一级选择的时候去加载或者从本地对象中拿第一级对应的数据源显示到列表中,第二级以此类推 2.也有将所有的项都加载到select中,然 ...

  5. BootStrap 智能表单系列 十 自动完成组件的支持

    web开发中,肯定遇到像百度.google这种搜索的功能吧,那智能表单中的自动完成可以做什么呢,下面来揭晓: 1.包含像google.百度等类似的简单搜索 2.复杂结构的支持,比如说 输入产品编号,需 ...

  6. BootStrap 智能表单系列 九 表单图片上传的支持

    本章介绍如何在生成表单后,可以支持上传图片后可以及时预览图片 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/maste ...

  7. BootStrap 智能表单系列 五 表单依赖插件处理

    这一章比较简单哦,主要就是生产表单元素后的一些后续处理操作,比如日期插件的渲染.一些autocomplete的处理等,在回调里面处理就可以了, demo: $("input.date-pic ...

  8. BootStrap 智能表单系列 四 表单布局介绍

    表单的布局分为自动布局和自定义布局两种: 自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格,通过设置autoLayout为true可以实现自动布局 自动以布局就是 ...

  9. BootStrap 智能表单系列 三 分块表单配置的介绍

    相信广大博友肯定碰到过一个编辑页面分了很多块的情况,智能表单插件已经为您支持了这种情况, 代码如下(链接地址:https://github.com/xiexingen/Bootstrap-SmartF ...

随机推荐

  1. HTML知识点摘记

    HTML HTML:(Hype Text Markup Language)超文本标记语言,是最基本的网页语言.代码由标签组成,不区分大小写. 由<html>开始,</html> ...

  2. Office 2010 SP2简体中文正式版下载

    此次发布的SP2包含最新的更新,提高安全性.性能和稳定性,此外SP2还是之前发布的所有更新.累积性更新的汇总.SP2还改善了Office 2010与IE10.Windows 8.Windows Ser ...

  3. 十度好友问题（DFS经典应用）

    问题: 在社交网络里(比如 LinkedIn),如果A和B是好友,B和C是好友,但是A和C不是好友,那么C是A的二度好友,给定一个社交网络的关系图,如何找到某一个人的所有十度好友.

  4. 柯南君：看大数据时代下的IT架构（6）消息队列之RabbitMQ--案例（Publish/Subscribe起航）

    二.Publish/Subscribe(发布/订阅)(using the Java Client) 为了说明这个模式,我们将构建一个简单的日志系统.它将包括两个项目: 第一个将发出日志消息 第二个将接 ...

  5. openstack core components use 总结

    1,附加volume(块存储,云硬盘)到vmInstances(虚拟机实列)

  6. 从麦肯锡到小黑裙－Project Gravitas |华丽志

    从麦肯锡到小黑裙-Project Gravitas |华丽志 从麦肯锡到小黑裙-Project Gravitas

  7. 排序方法之标准库中的快排 qsort （）函数

    C标准库qsort()函数的用法(快排) 使用快速排序例程进行排序 头文件:stdlib.h 用 法: void qsort(void *base, int  nelem, int  width, i ...

  8. 指定html内容下载为word文档

    解决思路是:获取html内容并传到后台,后台把html内容转换为输入流再传给浏览器,浏览器直接下载 1.获取html内容并传到后台 $("#zxjdck .ad-xzzy-anniu&quo ...

  9. lua IDE for cocos2d-x development

    原文链接:http://hi.baidu.com/balduc0m/item/648093dad238bd2a39f6f78e lua IDE for cocos2d-x development -- ...

  10. 提高你的Java代码质量吧：使用构造函数协助描述枚举项

    一.分析 一般来说,我们经常使用的枚举项只有一个属性,即排序号,其默认值是从0.1.2... ....但是除了排序号外,枚举还有一个(或多个)属性. 二.场景 比如,可以通过枚举构造函数声明业务值,定 ...