基于Bootstrap+jQuery.validate Form表单验证实践
基于Bootstrap jQuery.validate Form表单验证实践
1、form 表单代码
- <!DOCTYPE html>
- <html>
- <head>
- <title>Bootstrap Form Template</title>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="stylesheet" type="text/css" href="plugins/bootstrap/css/bootstrap.css"/>
- </head>
- <body>
- <div class="container">
- <h1 class="text-center text-danger">Form 示例</h1>
- <form role="form" class="form-horizontal" action="javascript:alert('验证成功,可以提交.');" method="post">
- <div class="form-group">
- <label class="col-md-2 control-label" for="name">Name</label>
- <div class="col-md-10">
- <input class="form-control" name="name" type="text" id="name" placeholder="Name" value="" />
- </div>
- </div>
- <div class="form-group">
- <label class="col-md-2 control-label" for="exampleInputPassword1">Password</label>
- <div class="col-md-10">
- <input type="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
- </div>
- </div>
- <div class="form-group">
- <label for="intro" class="control-label col-md-2">Intro</label>
- <div class="col-md-10">
- <textarea id="intro" class="form-control" rows="3" name="intro" placeholder="Intro"></textarea>
- </div>
- </div>
- <div class="form-group">
- <label class="control-label col-md-2">Gender</label>
- <div class="col-md-10">
- <label class="radio-inline">
- <input type="radio" name="gender" value="男" />
- boy </label>
- <label class="radio-inline">
- <input type="radio" name="gender" value="女" />
- gril </label>
- </div>
- </div>
- <div class="form-group">
- <label for="hobby" class="control-label col-md-2">Hobby</label>
- <div class="col-md-10">
- <div class="checkbox">
- <label>
- <input type="checkbox" name="hobby" value="Music">
- Music</label>
- </div>
- <div class="checkbox">
- <label>
- <input type="checkbox" name="hobby" id="" value="Game" />
- Game </label>
- </div>
- <label class="checkbox-inline">
- <input type="checkbox" id="inlineCheckbox1" value="option1">
- option1 </label>
- <label class="checkbox-inline">
- <input type="checkbox" id="inlineCheckbox2" value="option2">
- option3</label>
- <label class="checkbox-inline">
- <input type="checkbox" id="inlineCheckbox3" value="option3">
- option3 </label>
- </div>
- </div>
- <div class="form-group">
- <label for="sel" class="control-label col-md-2">Select</label>
- <div class="col-md-10">
- <select multiple="" id="sel" name="sel" class="form-control">
- <option value="1">1</option>
- <option value="2">2</option>
- <option value="3">3</option>
- </select>
- </div>
- </div>
- <div class="form-group">
- <div class="col-md-offset-2 col-md-10">
- <button type="submit" class="btn btn-primary btn-sm">
- Submit
- </button>
- <button type="reset" class="btn btn-primary btn-sm">
- Reset
- </button>
- </div>
- </div>
- </form>
- </div>
- <script src="plugins/jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>
- <script src="plugins/bootstrap/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
- <script src="plugins/jquery-validation/dist/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
- <script src="scripts/form.js" type="text/javascript" charset="utf-8"></script>
- <script type="text/javascript" charset="utf-8">
- MyValidator.init();
- </script>
- </body>
- </html>
需要引用 jquery.js,bootstrap.js,jquery.validate.js 库
2、form.js 代码
- var MyValidator = function() {
- var handleSubmit = function() {
- $('.form-horizontal').validate({
- errorElement : 'span',
- errorClass : 'help-block',
- focusInvalid : false,
- rules : {
- name : {
- required : true
- },
- password : {
- required : true
- },
- intro : {
- required : true
- }
- },
- messages : {
- name : {
- required : "Username is required."
- },
- password : {
- required : "Password is required."
- },
- intro : {
- required : "Intro is required."
- }
- },
- highlight : function(element) {
- $(element).closest('.form-group').addClass('has-error');
- },
- success : function(label) {
- label.closest('.form-group').removeClass('has-error');
- label.remove();
- },
- errorPlacement : function(error, element) {
- element.parent('div').append(error);
- },
- submitHandler : function(form) {
- form.submit();
- }
- });
- $('.form-horizontal input').keypress(function(e) {
- if (e.which == 13) {
- if ($('.form-horizontal').validate().form()) {
- $('.form-horizontal').submit();
- }
- return false;
- }
- });
- }
- return {
- init : function() {
- handleSubmit();
- }
- };
- }();
效果 :
基于Bootstrap+jQuery.validate Form表单验证实践的更多相关文章
- 基于Jquery Validate 的表单验证
基于Jquery Validate 的表单验证 jquery.validate.js是jquery下的一个验证插件,运用此插件我们可以很便捷的对表单元素进行格式验证. 在讲述基于Jquery Vali ...
- 异步提交form的时候利用jQuery validate实现表单验证
异步提交form的时候利用jQuery validate实现表单验证相信很多人都用过jquery validate插件,非常好用,并且可以通过下面的语句来自定义验证规则 // 电话号码验证 ...
- Jquery.validate.js表单验证插件的使用
作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...
- jQuery.validate.js表单验证插件
jQuery.validate.js表单验证插件的使用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...
- jquery.validate.js 表单验证简单用法
引入jquery.validate.js插件以及Jquery,在最后加上这个插件的方法名来引用.$('form').validate(); <!DOCTYPE html PUBLIC " ...
- jquery.validate.js表单验证 jquery.validate.js的用法
jquery.validate.js这个插件已经用了2年多了,是一个不可多得的表单验证最方便快捷的插件.基于jquery的小插件,基本小白一学就会上手,对于项目表单页面比较多,元素比较多的校验,该插件 ...
- jquery.validate.js表单验证
一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...
- 表单验证代码实例:jquery.validate.js表单验证插件
jquery.validate.js是JQuery旗下的一个验证插件,借助JQuery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法.使用前请先下载必要的JQuery插件:jq ...
- jQuery Validate 插件[表单验证]
在客户端添加信息提交表单时我们经常需要做一些验证,比如验证不能为空,验证客户输入手机格式,验证客户输入email,url等的格式,我们可以通过EL表达式结合js 进行自主验证,今天总结一个JQuery ...
随机推荐
- [POI2014]Rally
OJ题号:BZOJ3832.洛谷3573 思路: 建立超级源汇$S$和$T$,DP求出分别以$S$和$T$为源点的最长路$diss$和$dist$. 对于每条边$i$,设定一个权值$w_i=diss_ ...
- Google的开源C++单元测试框架Google Test
玩转Google开源C++单元测试框架Google Test系列(gtest)(总) 前段时间学习和了解了下Google的开源C++单元测试框架Google Test,简称gtest,非常的不错. 我 ...
- 【BZOJ】1854: [Scoi2010]游戏【二分图】
1854: [Scoi2010]游戏 Time Limit: 5 Sec Memory Limit: 162 MBSubmit: 6759 Solved: 2812[Submit][Status] ...
- C# 读取CSV和EXCEL文件示例
我们习惯了直接连到数据库上面读取数据表的数据内容: 如果有一天我们需要读取CSV,EXCEL文件的内容的时候,可不可以也像读数据表的方式一样呢?当然可以,使用OleDB ADO.NET是很简单的事情 ...
- delete void pointer
delete void pointer是否会有内存泄漏? 看下面一个简单例子 class Test{ public: Test(){ printf ("constructor\n" ...
- JDK 动态代理的简单理解
动态代理 代理模式是 Java 中的常用设计模式,代理类通过调用被代理类的相关方法,提供预处理.过滤.事后处理等服务,动态代理及通过反射机制动态实现代理机制.JDK 中的 java.lang.refl ...
- 新手学cocos2dx,centos7下的安装过程
背景 打算学写游戏,新手向,当然从cocos2d-x开始. 看了cocos的文档,安装是针对ubuntu的,这里记录下centos7上安装.编译.运行测试的过程. 如果你已经有ubuntu,不推荐看此 ...
- ant design select 坑总结
1.保持Option的value和select绑定的value一致,这样在select框中显示的才是Option中的节点文本label 2.labelInValue属性可以使选中项的文本label包装 ...
- CentOS下使用LVM进行分区(转)
说明:为什么抄,因为这篇文章图文并茂,所有测试都在CentOS 6和7测试过. 许多Linux使用者安装操作系统时都会遇到这样的困境:如何精确评估和分配各个硬盘分区的容量,如果当初评估不准确,一旦系统 ...
- Linux虚拟主机管理系统---wdcp
关于WDCP这款虚拟主机管理系统,是疯子使用的第二款Linux虚拟主机管理系统,使用是挺简单的,以前好像是因为编码问题而放弃这款面板. WDCP功能比较完善,基本上需要的功能都能满足,例如:在线下载. ...