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

基于BootStrap与jQuery.validate实现表单提交校验功能

Posted in Javascript onDecember 22, 2016

谈谈表单校验

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

直接看demo：http://www.suchso.com/code/bootstrapvalidate/

基于BootStrap与jQuery.validate实现表单提交校验功能

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

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

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

2.ajax异步请求

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

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

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

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

基于BootStrap与jQuery.validate实现表单提交校验功能

bootstrap3基本表单和水平表单

基本表单

基本的表单结构是 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实现表单提交校验功能

水平表单

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

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

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

基于BootStrap与jQuery.validate实现表单提交校验功能

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

向父 <form> 元素添加 class .form-horizontal。

把标签和控件放在一个带有 class .form-group 的 <div> 中。

向标签添加 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 自定义校验方法

自定义校验方法

// 手机号码验证
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));
}, "请正确填写您的手机号码。");

调用自定义校验

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

自定义错误显示

参数 类型 描述 默认值
errorClass String 指定错误提示的 css 类名，可以自定义错误提示的样式。 "error"
errorElement String 用什么标签标记错误，默认是 label，可以改成 em。 "label"
errorPlacement function 跟一个函数，可以自定义错误放到哪里。 input元素之后
success   要验证的元素通过验证后的动作，如果跟一个字符串，会当作一个 css 类，也可跟一个函数。 无
highlight function 可以给未通过验证的元素加效果、闪烁等。 无

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实现表单提交校验功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

基于BootStrap与jQuery.validate实现表单提交校验功能

- Author -

IT小兵

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

Javascript 相关文章推荐
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
Sep 26 Javascript
JavaScript splice()方法详解
Sep 22 Javascript
jquery ajax 局部无刷新更新数据的实现案例
Feb 08 Javascript
JQuery实现带排序功能的权限选择实例
May 18 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
May 25 Javascript
JS控制TreeView的结点选择
Nov 11 Javascript
jquery实现图片轮播器
May 23 jQuery
详解vue-cli脚手架build目录中的dev-server.js配置文件
Nov 24 Javascript
JS监听事件的叠加和移除功能
Nov 19 Javascript
pm2启动ssr失败的解决方法
Jun 29 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
Aug 04 Javascript
javascript解析json格式的数据方法详解
Aug 07 Javascript
详解js的事件代理（委托）
Dec 22 #Javascript
HTML页面定时跳转方法解析（2种任选）
Dec 22 #Javascript
vue双向绑定的简单实现
Dec 22 #Javascript
jQuery使用Layer弹出层插件闪退问题
Dec 22 #Javascript
深入理解jquery中extend的实现
Dec 22 #Javascript
jQuery插件DataTable使用方法详解(.Net平台)
Dec 22 #Javascript
JS实现间歇滚动的运动效果实例
Dec 22 #Javascript
Servlet面试题(20) 自我评价(886) 自我鉴定(671) Ruby面试题(15) UNIX面试题(27) 自荐信(981) J2EE面试题(19) Delphi面试题(13) MySQL面试题(19) SOA面试题(9)
You might like
Win2003服务器安全加固设置－-进一步提高服务器安全性
2007/05/23 PHP
如何给phpcms v9增加类似于phpcms 2008中的关键词表
2013/07/01 PHP
php float不四舍五入截取浮点型字符串方法总结
2013/10/28 PHP
PHP技术开发微信公众平台
2015/07/22 PHP
javascript实现 在光标处插入指定内容
2007/05/25 Javascript
IE事件对象（The Internet Explorer Event Object）
2012/06/27 Javascript
JavaScript中的标签语句用法分析
2015/02/10 Javascript
Javascript实现div的toggle效果实例分析
2015/06/09 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
全面介绍javascript实用技巧及单竖杠
2016/07/18 Javascript
微信端开发--登录小程序步骤
2017/01/11 Javascript
详解React-Native解决键盘遮挡问题（Keyboard遮挡问题）
2017/07/13 Javascript
layui使用form表单实现post请求页面跳转的方法
2019/09/14 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
解决vant-UI库修改样式无效的问题
2020/11/03 Javascript
python 写的一个爬虫程序源码
2016/02/28 Python
python中常用的九种预处理方法分享
2016/09/11 Python
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
python tkinter控件布局项目实例
2019/11/04 Python
Pyecharts 动态地图 geo()和map()的安装与用法详解
2020/03/25 Python
CSS3 animation实现逐帧动画效果
2016/06/02 HTML / CSS
英国豪华家具和经典家居饰品购物网站：OKA
2020/06/05 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ？
2014/07/21 面试题
综合办公室主任职责
2013/12/16 职场文书
商场中秋节活动方案
2014/02/07 职场文书
《小小雨点》教学反思
2014/02/18 职场文书
幼儿园清明节活动总结
2014/07/04 职场文书
基层党员群众路线整改措施及努力方向
2014/10/28 职场文书
故宫的导游词
2015/01/31 职场文书
2015年实习生工作总结报告
2015/04/28 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
2016年世界人口日宣传活动总结
2016/04/05 职场文书
2019最新企业员工考勤管理制度（通用版）！
2019/07/02 职场文书
python批量更改目录名/文件名的方法
2021/04/18 Python
利用python调用摄像头的实例分析
2021/06/07 Python
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
2021/07/16 HTML / CSS