基于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 ...
随机推荐
-
Unity3D设计原则
原则1:单一职责 原则2:里氏替换原则(子类扩展但不改变父类功能) 原则3:依赖倒置原则 原则4:接口隔离原则 原则5:迪米特法则(最少知道原则) 原则6:开闭原则 原则1:单一职责原则 说到单一职责 ...
-
bug-android之INSTALL_FAILED_NO_MATCHING_ABIS
bug描述: 经常在网络上下载一些实例,自己研究 ,运行时不时会出现这个bug: Installation error: INSTALL_FAILED_NO_MATCHING_ABIS bug解决方案 ...
-
sqlserver定時備份
通常备份的方式有两种:手动备份和自动备份,如果数据库服务器中有这么多的数据库需要备份,那么手动备份必定是一个很大的工作量,这个时候我们可以采用另外一种备份方式---定时自动备份. SQLServer的 ...
-
Photoshop:不起眼的背景橡皮擦
背景橡皮擦工具是通过颜色的容差来进行工作的,“+”是定位点,当“+”光标位置在要擦除的位置上的时候,就能擦出比较好的效果. 取样连续:擦除的效果比较连续. 取样一次:不松开鼠标键,也不用担心“+”字中 ...
-
乐观锁--CAS
悲观锁与乐观锁的区别 悲观锁会把整个对象加锁占为已有后才去做操作,Java中的Synchronized属于悲观锁.悲观锁有一个明显的缺点就是:它不管数据存不存在竞争都加锁,随着并发量增加,且如果锁的时 ...
-
CentOS(一)--CentOS6.4环境搭建
一.前言 作为一个想从事j2ee后台开发的程序猿,linux系统怎能不学呢?所以,这几天自己准备学习一下linux操作系统.废话不多说,直奔主题. 要学linux开发,首先得要安装linux系统吧,这 ...
-
vim下编写html的超级利器emmet
GitHub:里面有详细的文档说明 https://github.com/mattn/emmet-vim 下载地址: http://www.vim.org/scripts/script.php?scr ...
-
【HTML5】音频视频
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
-
velocity map list 数组操作
Velocity生成模板的时候,经常需要使用到map.list对象,然后遍历输出对象的属性值.当你需要遍历的时候记录遍历的步长的时候,可以使用$velocityCount内置变量进行输出.下面demo ...
-
360电影主页和详情页爬去入Mysql库链表读取--lowbiprogrammer
import requests,os,jsonfrom lxml import etreefrom pymysql import *class Movie(object):def __init__(s ...