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

Javascript 相关文章推荐
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
Jan 22 Javascript
De facto standard 世界上不可思议的事实标准
Aug 29 Javascript
JavaScript 变量作用域分析
Jul 04 Javascript
用jquery实现点击栏目背景色改变
Dec 10 Javascript
js 走马灯简单实例
Nov 21 Javascript
微信JS接口汇总及使用详解
Jan 09 Javascript
VueJS如何引入css或者less文件的一些坑
Apr 25 Javascript
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 Javascript
vue组件之间通信方式实例总结【8种方式】
Feb 22 Javascript
JavaScript使用canvas绘制随机验证码
Feb 17 Javascript
Vue快速实现通用表单验证的方法
Feb 24 Javascript
使用vue打包进行云服务器上传的问题
Mar 02 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
You might like
Ajax PHP简单入门教程代码
2008/04/25 PHP
常见PHP数据库解决方案分析介绍
2015/09/24 PHP
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
使用Post提交时须将空格转换成加号的解释
2013/01/14 Javascript
onmouseover和onmouseout的一些问题思考
2013/08/14 Javascript
js判断登录与否并确定跳转页面的方法
2015/01/30 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
jquery获取下拉框中的循环值
2017/02/08 Javascript
Javascript中的神器——Promise
2017/02/08 Javascript
jQuery实现拼图小游戏(实例讲解)
2017/07/24 jQuery
Servlet返回的数据js解析2种方法
2019/12/12 Javascript
[04:52]第二届DOTA2亚洲邀请赛主赛事第一天比赛集锦:OG娜迦海妖放大配合谜团大中3人
2017/04/02 DOTA
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
Python多进程编程技术实例分析
2014/09/16 Python
Python中用于去除空格的三个函数的使用小结
2015/04/07 Python
Python多线程下载文件的方法
2015/07/10 Python
Python数据分析之真实IP请求Pandas详解
2016/11/18 Python
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
解决python中 f.write写入中文出错的问题
2018/10/31 Python
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
使用python-cv2实现视频的分解与合成的示例代码
2020/10/26 Python
一款基于css3的列表toggle特效实例教程
2015/01/04 HTML / CSS
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
优良学风班总结材料
2014/02/08 职场文书
信息员培训方案
2014/06/12 职场文书
营销与策划实训报告
2014/11/05 职场文书
毕业生评语大全
2015/01/04 职场文书
PyTorch 实现L2正则化以及Dropout的操作
2021/05/27 Python
Go 语言结构实例分析
2021/07/04 Golang
Opencv实现二维直方图的计算及绘制
2021/07/21 Python
详解Oracle块修改跟踪功能
2021/11/07 Oracle
python如何查找列表中元素的位置
2022/05/30 Python
Win11 22H2 2022怎么更新? 获得Win1122H22022版本升级技巧
2022/09/23 数码科技