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

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

该插件也为您支持到了表单验证，在需要验证的列的配置中加一项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. PhotoShop-CS4使用-----如何对psd进行简单切图

    一.如何快速截图 1.如果图片为psd样式   2.要用放大器放大该图,选择放大器,放大后如图 3.开始切图  以其中一个为例,选中你所要选择切的图片 4. 选中后 5.选择文件---新建   6.此 ...

  2. 关于Linux Kernel 2.6.28 以上有缺陷，在第208.5天自行重啟的问题

        今天看到一转帖如下: Linux Kernel 2.6.28 以上有缺陷,在第208.5天自行重啟 https://access.redhat.com/knowledge/solutions/ ...

  3. 简易对象垃圾回收框架 for Delphi

    (一).缘起 1.1 我的一个出错程序 程序名称:呼叫处理模块的压力测试工具,分为客户端和服务端. 开发工具:Delhpi 5 相关技术:客户端通过与服务端建立Socket连接来模拟一组电话机的拨入. ...

  4. java积累

    数组的使用 package javaDemo; import java.util.*; /** * * @author Administrator * @version 1.0 * * */ publ ...

  5. libvirt C-API

    1,warming-up Specifying URIs to libVirt;name parameter to virConnectOpen or          virConnectOpenR ...

  6. poj2186 Popular Cows --- 强连通

    给一个有向图,问有多少结点是其它全部结点都能够到达的. 等价于,在一个有向无环图上,找出度为0 的结点.假设出度为0的结点仅仅有一个,那么这个就是答案.假设大于1个.则答案是0. 这题有环.所以先缩点 ...

  7. Windows7中搭建Android x86_64及armv8-a操作步骤

    1.        从https://developer.android.com/tools/sdk/ndk/index.html 下载android-ndk-r10d-windows-x86_64. ...

  8. java--jsp+ssh+select动态结合数据和选择(解)

    在三层体系结构和jsp合并项目,如何实现select动态绑定数据和动态选择指定的行?让我们来看看下面的: 1.首先定义一个Bean分类.它用于实例select的结合数据中的每一个id和name: pu ...

  9. 自己写的操作sql的公共类

    /* /' `\/ `. . .' : `. `. \\.' , `.` `. `. ,___/|\. `. : . \, .'./ ' '\ , ' .\ . \_.~ _; ; \/'. `\ . ...

  10. 重构HTML改善web应用设计

    本文从良构,有效性,布局三个角度,结合往日项目开发经历, 整理总结重构HTML改善Web应用设计的几点规则和做法.部分参考自<重构HTML改善Web应用设计>. 重构.什么是重构?为什么要 ...