程序员之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap 智能表单 验证

BootStrap智能表单实战系列(七)验证的支持

 更新时间：2016年06月13日 14:50:57   作者：程序有Bug  
这篇文章主要介绍了BootStrap智能表单实战系列(七)验证的支持 ,凡是涉及到用户编辑信息然后保存的页面，都涉及到一个数据是否符合要求的检查，需要客服端和服务器端的校验的问题，本文介绍非常详细，具有参考价值，需要的朋友可以参考下
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）

（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）

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

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

该插件也为您支持到了表单验证，在需要验证的列的配置中加一项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="http://9i0i.com/pic.php?p=../lib/jquery.js"></script>
<script src="http://9i0i.com/pic.php?p=../lib/jquery.validate.js"></script>
<script src="http://9i0i.com/pic.php?p=../lib/bootstrap.js"></script>
<!--工具方法-->
<script src="http://9i0i.com/pic.php?p=../scripts/global.js"></script>
<!--插件-->
<script src="http://9i0i.com/pic.php?p=../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的值删除，提交表单可以看到效果：

效果图如下：

您可能感兴趣的文章:

相关文章

  • layer弹出层框架alert与msg详解

    layer弹出层框架alert与msg详解

    本文主要介绍了layer弹出层框架alert与msg的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • JavaScript仿百度图片浏览效果

    JavaScript仿百度图片浏览效果

    这篇文章主要为大家详细介绍了JavaScript仿百度图片浏览效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-11-11
  • JavaScript如何从listbox里同时删除多个项目

    JavaScript如何从listbox里同时删除多个项目

    要从列表框同时删除多个项目只能从下向上删除，这样就不会出现索引号乱变的问题了，下面有个不错的示例，大家可以感受下
    2013-10-10
  • 原来JS还可以这样拆箱转换详解

    原来JS还可以这样拆箱转换详解

    这篇文章主要给大家介绍了关于JS拆箱转换的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-02-02
  • JavaScript 如何在线解压 ZIP 文件

    JavaScript 如何在线解压 ZIP 文件

    本文将介绍浏览器解压和服务器解压两种在线解压ZIP文件的方案。帮助大家用JavaScript实现在线解压，感兴趣的朋友可以参考下
    2021-05-05
  • JavaScript中各种二进制对象关系的深入讲解

    JavaScript中各种二进制对象关系的深入讲解

    JavaScript中用于表示二进制对象有,Blob对象、和 ArrayBuffer 对象,这篇文章主要给大家介绍了关于JavaScript中各种二进制对象关系的相关资料,需要的朋友可以参考下
    2021-09-09
  • js中el表达式的使用和非空判断方法

    js中el表达式的使用和非空判断方法

    下面小编就为大家分享一篇js中el表达式的使用和非空判断方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Echarts之悬浮框中的数据排序问题

    Echarts之悬浮框中的数据排序问题

    Echarts非常强大，配置也非常的多，有很多细节需要深入研究。这篇文章主要介绍了Echarts之悬浮框中的数据排序问题,需要的朋友可以参考下
    2018-11-11
  • 微信小程序实现文字无限轮播效果

    微信小程序实现文字无限轮播效果

    这篇文章主要为大家详细介绍了微信小程序实现文字无限轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-12-12
  • JS获取当前脚本文件的绝对路径

    JS获取当前脚本文件的绝对路径

    这篇文章主要介绍了JS获取当前脚本文件的绝对路径的相关资料，感兴趣的小伙伴们可以参考一下
    2016-03-03

最新评论

?


http://www.vxiaotou.com