首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于Bootstrap+jQuery.validate实现表单验证

Posted in Javascript onMay 30, 2016

这大概是一种惯例，学习前台后台最开始接触的业务都是用户注册和登录。现在社会坚持以人为本的理念，在网站开发过程同样如此。User是我们面对较多的对象，也是较核心的对象。最开始的用户注册和登陆这块，也就尤为重要。

用户注册和登录其实往往比我们想象的难。就比如表单校验，里面涵盖的内容其实挺多，就前台而言，你需要了解：

1.正则表达式的基本了解

其实正则并不难，并且在学会后能带给你极大的成就感，享受那种事半功倍的效果吧。

2.ajax异步请求

在验证用户名是否存在、用户登录时账号或者密码错误时给出相应的提示。

3.一些方便的验证库，比如jQuery.validate

正因为如此普遍的需求和一定的复杂性，bootstrap表单和jQuery.validate表单校验等一些优秀的类库专为人们解决UI、表单校验问题。

下面就是我用bootstrap+jQuery.validate做的界面：

基于Bootstrap+jQuery.validate实现表单验证

基于Bootstrap+jQuery.validate实现表单验证

一、bootstrap3基本表单和水平表单

1、基本表单

基本的表单结构是 Bootstrap 自带的，下面列出了创建基本表单的步骤：

向父元素<form> 添加 role="form"。
把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。

<form role="form">
 <div class="form-group">
  <label for="name">名称</label>
  <input type="text" class="form-control" id="name"
   placeholder="请输入名称">
 </div>
</form>

效果如下：

基于Bootstrap+jQuery.validate实现表单验证

2、水平表单

在了解水平表单之间，我们应该对bootstrap的网格系统有所了解。

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列,也就是说它是以百分比定义宽度的。

基于Bootstrap+jQuery.validate实现表单验证

水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：

步骤1：向父 <form> 元素添加 class .form-horizontal。
步骤2：把标签和控件放在一个带有 class .form-group 的 <div> 中。
步骤3：向标签添加 class .control-label。

<form class="form-horizontal" role="form">
 <div class="form-group">
  <label for="firstname" class="col-sm-2 control-label">名字</label>
  <div class="col-sm-10">
   <input type="text" class="form-control" id="firstname"
   placeholder="请输入名字">
  </div>
 </div>
</form>

效果如下：

基于Bootstrap+jQuery.validate实现表单验证

二、jQuery.validate 自定义校验方法

1、自定义校验方法

// 手机号码验证
jQuery.validator.addMethod("isPhone", function(value, element) {
 var length = value.length;
 return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value));
}, "请正确填写您的手机号码。");

2、调用自定义校验

rules : {
 phone : {
   required : true,
   isPhone : true
  }
}

3、自定义错误显示

基于Bootstrap+jQuery.validate实现表单验证

三、register.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>注册</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
 
<link type="text/css" href="jslib/bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet">
 
<script src="jslib/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="scripts/form.js" type="text/javascript"></script>
<script src="jslib/jQuery.validate/jquery.validate.js" type="text/javascript"></script>
<script src="jslib/bootstrap-3.3.5/bootstrap.min.js" type="text/javascript"></script>
<style type="text/css">
#register-form{
 border: 1px solid rgb(197, 197, 197);
 width: 1000px;
 margin: auto;
 border-image: none;
 padding: 30px;
 border-radius: 3px;
}
</style>
 
</head>
<body>
 <h1 class="text-center text-danger">用户注册</h1><br>
 <form id="register-form" role="form" class="form-horizontal" method="get">
  <div class="form-group">
   <label class="col-sm-2 control-label" for="firstname">用户名：</label>
   <div class="col-sm-5">
    <input class="form-control" id="firstname" name="firstname" />
   </div>
  </div>
  <div class="form-group">
   <label class="col-sm-2 control-label" for="password">密码：</label>
   <div class="col-sm-5">
    <input class="form-control" id="password" name="password" type="password" />
   </div>
  </div>
  <div class="form-group">
   <label class="col-sm-2 control-label" for="confirm_password">确认密码：</label>
   <div class="col-sm-5">
    <input class="form-control" id="confirm_password" name="confirm_password" type="password" />
   </div>
  </div>
  <div class="form-group">
   <label class="col-sm-2 control-label" for="email">E-Mail：</label>
   <div class="col-sm-5">
    <input class="form-control" id="email" name="email" />
   </div>
  </div>
  <div class="form-group">
   <label class="col-sm-2 control-label" for="phone">手机号码：</label>
   <div class="col-sm-5">
    <input class="form-control" id="phone" name="phone" />
   </div>
  </div>
  <div class="form-group">
   <label class="col-sm-2 control-label" for="tel">固定电话：</label>
   <div class="col-sm-5">
    <input class="form-control" id="tel" name="tel" />
   </div>
  </div>
  <div class="form-group">
   <label class="col-sm-2 control-label" for="address">家庭住址：</label>
   <div class="col-sm-5">
    <input class="form-control" id="address" name="address" />
   </div>
  </div>
  <div class="form-group">
   <div class="col-md-offset-2 col-md-10">
    <button type="submit" class="btn btn-primary btn-sm">注册</button>
    <button type="reset" class="btn btn-primary btn-sm">重置</button>
   </div>
  </div>
 </form>
</body>
</html>

四、form.js

$(document).ready(function() {
 // 手机号码验证
 jQuery.validator.addMethod("isPhone", function(value, element) {
  var length = value.length;
  return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value));
 }, "请正确填写您的手机号码。");
 
 // 电话号码验证
 jQuery.validator.addMethod("isTel", function(value, element) {
  var tel = /^(\d{3,4}-)?\d{7,8}$/g; // 区号－3、4位 号码－7、8位
  return this.optional(element) || (tel.test(value));
 }, "请正确填写您的电话号码。");
 // 匹配密码，以字母开头，长度在6-12之间，必须包含数字和特殊字符。
 jQuery.validator.addMethod("isPwd", function(value, element) {
  var str = value;
  if (str.length < 6 || str.length > 18)
   return false;
  if (!/^[a-zA-Z]/.test(str))
   return false;
  if (!/[0-9]/.test(str))
   return fasle;
  return this.optional(element) || /[^A-Za-z0-9]/.test(str);
 }, "以字母开头，长度在6-12之间，必须包含数字和特殊字符。");
 
 $("#register-form").validate({
  errorElement : 'span',
  errorClass : 'help-block',
 
  rules : {
   firstname : "required",
   email : {
    required : true,
    email : true
   },
   password : {
    required : true,
    isPwd : true
   },
   confirm_password : {
    required : true,
    isPwd : true,
    equalTo : "#password"
   },
   phone : {
    required : true,
    isPhone : true
   },
   tel : {
    isTel : true
   },
   address : {
    minlength : 10
   }
  },
  messages : {
   firstname : "请输入姓名",
   email : {
    required : "请输入Email地址",
    email : "请输入正确的email地址"
   },
   password : {
    required : "请输入密码",
    minlength : jQuery.format("密码不能小于{0}个字 符")
   },
   confirm_password : {
    required : "请输入确认密码",
    minlength : "确认密码不能小于5个字符",
    equalTo : "两次输入密码不一致不一致"
   },
   phone : {
    required : "请输入手机号码"
   },
   tel : {
    required : "请输入座机号码"
   },
   address : {
    required : "请输入家庭地址",
    minlength : jQuery.format("家庭地址不能少于{0}个字符")
   }
  },
  //自定义错误消息放到哪里
  errorPlacement : function(error, element) {
   element.next().remove();//删除显示图标
   element.after('<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>');
   element.closest('.form-group').append(error);//显示错误消息提示
  },
  //给未通过验证的元素进行处理
  highlight : function(element) {
   $(element).closest('.form-group').addClass('has-error has-feedback');
  },
  //验证通过的处理
  success : function(label) {
   var el=label.closest('.form-group').find("input");
   el.next().remove();//与errorPlacement相似
   el.after('<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>');
   label.closest('.form-group').removeClass('has-error').addClass("has-feedback has-success");
   label.remove();
  },
 
 });
});

源码下载：Bootstrap+jQuery.validate实现表单验证

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

以上就是Bootstrap+jQuery.validate实现表单验证相关知识介绍，希望大家可以熟练掌握，设计自己的表单验证。

基于Bootstrap+jQuery.validate实现表单验证

- Author -

klguang

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
判断JS对象是否拥有某种属性的两种方式
Dec 02 Javascript
node.js中的fs.realpath方法使用说明
Dec 16 Javascript
jQuery之简单的表单验证实例
Jul 07 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
Nov 17 Javascript
微信小程序 数组中的push与concat的区别
Jan 05 Javascript
AngularJS自定义指令实现面包屑功能完整实例
May 17 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 Javascript
快速解决vue-cli在ie9+中无效的问题
Sep 04 Javascript
详解JavaScript中的函数、对象
Apr 01 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
vue实现鼠标经过动画
Oct 16 Javascript
ant-design-vue 实现表格内部字段验证功能
Dec 16 Javascript
jquery获取form表单input元素值的简单实例
May 30 #Javascript
实用又漂亮的BootstrapValidator表单验证插件
May 30 #Javascript
使用JQuery 加载页面时调用JS的实现方法
May 30 #Javascript
Bootstrap开关(switch)控件学习笔记分享
May 30 #Javascript
jquery获取复选框checkbox的值实现方法
May 30 #Javascript
JS在onclientclick里如何控制onclick的执行
May 30 #Javascript
JS获取复选框的值,并传递到后台的实现方法
May 30 #Javascript
代理(2) 选择器(1) flex-shrink(1) canvas(2) 追加文本(1) 文字识别(1) 匹配文本(1) GNN(1) flex(1) 图片模糊(1)
You might like
无数据库的详细域名查询程序PHP版(2)
2006/10/09 PHP
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
Joomla开启SEF的方法
2016/05/04 PHP
PHP精确计算功能示例
2016/11/29 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
php利用ob_start()清除输出和选择性输出的方法
2018/01/18 PHP
通过PHP实现获取访问用户IP
2020/05/09 PHP
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
js判断undefined变量类型使用typeof
2013/06/03 Javascript
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
JS 使用for循环遍历子节点查找元素
2014/09/06 Javascript
js实现精确到秒的倒计时效果
2016/05/29 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
jquery实现左右轮播切换效果
2018/01/01 jQuery
vue 设置路由的登录权限的方法
2018/07/03 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
python的正则表达式re模块的常用方法
2013/03/09 Python
Python基本语法经典教程
2016/03/11 Python
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
Python使用selenium实现网页用户名 密码 验证码自动登录功能
2018/05/16 Python
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
Python中生成一个指定长度的随机字符串实现示例
2019/11/06 Python
CSS3实现淘宝留白的方法
2020/06/05 HTML / CSS
Hobbs官方网站：英国奢华女性时尚服装
2020/02/22 全球购物
节水倡议书范文
2014/04/15 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
教师学习群众路线心得体会
2014/11/04 职场文书
2015年妇女工作总结
2015/05/14 职场文书
培训计划通知
2015/07/15 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
详解Python牛顿插值法
2021/05/11 Python
Spring Boot配合PageHelper优化大表查询数据分页
2022/04/20 Java/Android