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

使用 jQuery 实现表单验证功能

Posted in jQuery onJuly 05, 2017

5.1.5 表单验证

      表单作为 HTML 最重要的一个组成部分，几乎在每个网页上都有体现，例如用户提交信息、用户反馈信息和用户查询信息等，因此它是网站管理者与浏览者之间沟通的桥梁。在表单中，表单验证的作用也是非常重要的，它能使表单更加灵活、美观和丰富。

      以一个简单的用户注册为例。首先新建一个表单， HTML 代码如下：

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <title>jQueryStudy</title>
 <style type="text/css">
 .int{ height: 30px; text-align: left; width: 600px; }
 label{ width: 200px; margin-left: 20px; }
 .high{ color: red; }
 .msg{ font-size: 13px; }
 .onError{ color: red; }
 .onSuccess{ color: green; }
 </style>
 <script type="text/javascript" src="jquery-1.10.2.js"></script> 
</head>
<body>
 <form method="post" action="">
 <div class="int">
  <label for="name">名称：</label>
  <input type="text" id="name" class="required" />
 </div>
 <div class="int">
  <label for="email">邮箱：</label>
  <input type="text" id="email" class="required" />
 </div>
 <div class="int">
  <label for="address">地址：</label>
  <input type="text" id="personinfo" />
 </div>
 <div class="int">
  <input type="submit" value="提交" id="send" style="margin-left: 70px;" />
  <input type="reset" value="重置" id="res" />
 </div>
 </form>
 <script type="text/javascript"></script>
</body>
</html>

      显示效果如图 1 所示。

使用 jQuery 实现表单验证功能

                             图 1 表单初始化

     在表单内 class 属性为 “required” 的文本框是必须填写的，因此需要将它与其他的非必须填写的表单元素加以区别，即在文本框后面追加一个红色的星号标识。可以使用 append() 方法来完成，代码如下：

<script type="text/javascript">
 //为表单的必填文本框添加提示信息（选择form中的所有后代input元素）
 $("form :input.required").each(function () {
 //创建元素
 var $required = $("<strong class='high'>*</strong>");
 //将它追加到文档中
 $(this).parent().append($required);
 });
</script>

      显示效果如图 2 所示。

使用 jQuery 实现表单验证功能

                           图 2 用小红星标识

      用户在“名称”文本框中填写完信息后，将光标的焦点从“名称”文本框中移出时，需要即时判断名称是否符合验证规则。当光标的焦点从“邮箱”文本框移出时，也需要即时判断“邮箱”填写是否正确，因此需要给表单元素添加失去焦点事件，即 blur 事件。 jQuery 代码如下：

<script type="text/javascript">
 //为表单的元素添加失去焦点事件
 $("form :input").blur(function () {
 // ...省略代码
 });
</script>

      验证表单元素步骤如下。

     （1）判断当前失去焦点的元素是“名称”还是“邮箱”，然后分别处理。   

     （2）如果是“名称”，判断元素的值的长度是否小于 6 ，如果小于 6 ，则用红色字体提醒用户输入不正确，反之，则用绿色提醒用户输入正确。

     （3）如果是“邮箱”，判断元素的值是否符合邮箱的格式，如果不符合，则用红色字体提醒用户输入不正确，反之，则用绿色字体提醒用户输入正确。   

     （4）将提醒信息追加到当前的父元素的最后。   

      【注】：为了使用方便，当 text 文本框中的内容格式错误时，程序应尽量把所有提示都显示出来，而不是每次验证一种格式后只与之相关的错误提醒信息。

       根据以上分析，可以写出如下 jQuery 代码：

<script type="text/javascript">
 //为表单的必填文本框添加提示信息（选择form中的所有后代input元素）
 $("form :input.required").each(function () {
 //创建元素
 var $required = $("<strong class='high'>*</strong>");
 //将它追加到文档中
 $(this).parent().append($required);
 });
 //为表单元素添加失去焦点事件
 $("form :input").blur(function(){
 var $parent = $(this).parent();
 //验证名称
 if($(this).is("#name")){
  if($.trim(this.value) == "" || $.trim(this.value).length < 6){
  var errorMsg = " 请输入至少6位的名称！";
  //class='msg onError' 中间的空格是层叠样式的格式
  $parent.append("<span class='msg onError'>" + errorMsg + "</span>");
  }
  else{
  var okMsg=" 输入正确";
  $parent.find(".high").remove();
  $parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
  }
 }
 //验证邮箱
 if($(this).is("#email")){
  if($.trim(this.value) == "" || ($.trim(this.value) != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test($.trim(this.value)))){
  var errorMsg = " 请输入正确的E-Mail地址！";
  $parent.append("<span class='msg onError'>" + errorMsg + "</span>");
  }
  else{
  var okMsg=" 输入正确";
  $parent.find(".high").remove();
  $parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
  }
 }
 });
</script>

      当连续几次输入错误的格式后，会出现如图 3 所示的效果

使用 jQuery 实现表单验证功能

                                    图 3 操作多次的提示效果

      由于每次在元素失去焦点后，都会创建一个新的提醒元素，然后将它追加到文档中，最后就出现了多次的提醒信息。因此，需要在创建提醒元素之前，将当前元素以前的提醒元素都删除。可以使用 remove() 方法来完成，代码如下： 

//为表单元素添加失去焦点事件
$("form :input").blur(function(){ 
 var $parent = $(this).parent();
 $parent.find(".msg").remove(); //删除以前的提醒元素
 // ...省略代码
});

      显示效果如图 4 所示。

使用 jQuery 实现表单验证功能

                               图 4 正确的效果

      当鼠标在表单元素中多次失去焦点时，都可以提醒用户填写是否正确。但是，如果用户无视错误提醒，执意要单击“提交”按钮时，为了使表单填写准确，在表单提交之前，需要对表单的必须填写元素进行一次整体的验证。可以直接用 trigger() 方法来触发blur事件，从而达到验证效果。如果填写错误，就会以红色提醒用户；如果名称和邮箱都不符合规则，那么就有两处错误，即有两个 class 为 “onError” 的元素，因此可以根据 class 为 “onError” 元素的长度来判断是否可以提交。如果长度为 0 ，即 true ，说明已经可以提交了；如果长度大于0，即 false ，说明有错误，需要阻止表单提交。阻止表单提交可以直接用 “return false” 语句。     

      根据上面的分析，可以在提交事件中写出如下jQuery代码： 

//点击重置按钮时，触发文本框的失去焦点事件
$("#send").click(function(){
 //trigger 事件执行完后，浏览器会为submit按钮获得焦点
 $("form .required:input").trigger("blur"); 
 var numError = $("form .onError").length;
 if(numError){
 return false;
 }
 alert("注册成功，密码已发到你的邮箱");
});

      显示效果如图 5 所示。

使用 jQuery 实现表单验证功能

                          图 5 正确提交

      用户也许会提出：为什么每次都要等字段元素失去焦点后，才提醒是否正确？如果输入时就可以提醒，这样就可以更加即时了。

      为了达到用户提出的需求，需要给表单元素绑定 keyup 事件和 focus 事件，keyup 事件能在用户每次松开按键时触发，实现即时提醒；focus 事件能在元素得到焦点的时候触发，也可以实现即时提醒。

      代码如下：

$("form :input").blur(function(){ 
 //失去焦点处理函数
 //代码省略...
}).keyup(function(){
 //triggerHandler 防止事件执行完后，浏览器自动为标签获得焦点
 $(this).triggerHandler("blur"); 
}).focus(function(){
 $(this).triggerHandler("blur");
});

      这样当用户将光标定位到文本框上和改变文本框的值时，表单就会即时提醒用户填写是否正确，从而符合了用户的需求。     

      在前面的章节已经提过，trigger（“blur”）不仅会触发为元素绑定的blur事件，也会触发浏览器默认的 blur 事件，即不能讲光标定位到文本框上。而 triggerHandler（“blur”）只会触发为元素绑定的 blur 事件，而不触发浏览器默认的 blur 事件。     

      至此，表单验证过程就全部完成。读者可以根据自己的实际需求修改验证规则。

     【注】：客户端的验证仅用于提升用户的操作体验，而服务器仍需对用户输入的数据的合法性进行校验。对于禁用了脚本的用户和用户自制的网页提交操作，必须在服务器端验证。

完整代码：

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <title>jQueryStudy</title>
 <style type="text/css">
 .int{ height: 30px; text-align: left; width: 600px; }
 label{ width: 200px; margin-left: 20px; }
 .high{ color: red; }
 .msg{ font-size: 13px; }
 .onError{ color: red; }
 .onSuccess{ color: green; }
 </style>
 <script type="text/javascript" src="jquery-1.10.2.js"></script> 
</head>
<body>
 <form method="post" action="">
 <div class="int">
  <label for="name">名称：</label>
  <input type="text" id="name" class="required" />
 </div>
 <div class="int">
  <label for="email">邮箱：</label>
  <input type="text" id="email" class="required" />
 </div>
 <div class="int">
  <label for="address">地址：</label>
  <input type="text" id="personinfo" />
 </div>
 <div class="int">
  <input type="submit" value="提交" id="send" style="margin-left: 70px;" />
  <input type="reset" value="重置" id="res" />
 </div>
 </form>
 <script type="text/javascript">
 $(document).ready(function(){
 //为表单的必填文本框添加提示信息（选择form中的所有后代input元素）
 $("form :input.required").each(function(){ 
  //创建元素
  var $required = $("<strong class='high'>*</strong>");
  //将它追加到文档中
  $(this).parent().append($required);
 });
 //为表单的必填文本框添加相关事件（blur、focus、keyup）
 $("form :input").blur(function(){
  //注意：这里的this是DOM对象，$(this)才是jQuery对象
  var $parent = $(this).parent();
  //删除之前的错误提醒信息
  $parent.find(".msg").remove();
  //验证“名称”
  if($(this).is("#name")){
  //运用jQuery中的$.trim()方法，去掉首位空格
  if($.trim(this.value) == "" || $.trim(this.value).length < 6){
   var errorMsg = " 请输入至少6位的名称！";
   //class='msg onError' 中间的空格是层叠样式的格式
   $parent.append("<span class='msg onError'>" + errorMsg + "</span>"); 
  }
  else{
   var okMsg=" 输入正确";
   $parent.find(".high").remove();
   $parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
  }  
  }
  //验证邮箱
  if($(this).is("#email")){
  if($.trim(this.value) == "" || ($.trim(this.value) != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test($.trim(this.value)))){
   var errorMsg = "请输入正确的E-Mail地址！";
   $parent.append("<span class='msg onError'>" + errorMsg + "</span>");
  }
  else{
   var okMsg=" 输入正确";
   $parent.find(".high").remove();
   $parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
  }
  }
 }).keyup(function(){
  //triggerHandler 防止事件执行完后，浏览器自动为标签获得焦点
  $(this).triggerHandler("blur");
 }).focus(function(){
  $(this).triggerHandler("blur");
 });
 //点击重置按钮时，触发文本框的失去焦点事件
 $("#send").click(function(){
  //trigger 事件执行完后，浏览器会为submit按钮获得焦点
  $("form .required:input").trigger("blur"); 
  var numError = $("form .onError").length;
  if(numError){
  return false;
  }
  alert("注册成功，密码已发到你的邮箱");
 });
 });
 </script>
</body>
</html>

 jQuery 官方 API： http://api.jquery.com/

以上所述是小编给大家介绍的使用 jQuery 实现表单验证功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

使用 jQuery 实现表单验证功能

- Author -

hellowzl

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

jQuery 相关文章推荐
纯jQuery实现前端分页功能
Mar 23 jQuery
jQuery自定义多选下拉框效果
Jun 19 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
jQuery实现简单飞机大战
Jul 05 jQuery
jquery实现有过渡效果的tab切换
Jul 17 jQuery
jQuery制作input提示内容（兼容IE8以上）
Jul 05 #jQuery
jQuery常见面试题之DOM操作详析
Jul 05 #jQuery
jQuery使用ajax_动力节点Java学院整理
Jul 05 #jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 #jQuery
jQuery选择器_动力节点Java学院整理
Jul 05 #jQuery
jQuery事件_动力节点Java学院整理
Jul 05 #jQuery
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 #jQuery
继承(1) promise(2) AOP(2) XDM(3) gRPC(3) redis(3) Kotlin(1) 构造函数(1) 验证表达式(1) PyAutoGUI(1)
You might like
ThinkPHP在新浪SAE平台的部署实例
2014/10/31 PHP
php中stdClass的用法分析
2015/02/27 PHP
手把手编写PHP框架 深入了解MVC运行流程
2016/09/19 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
div+css布局的图片连续滚动js实现代码
2010/05/04 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
2011/01/12 Javascript
appendChild() 或 insertBefore()使用与区别介绍
2013/10/11 Javascript
Jquery操作js数组及对象示例代码
2014/05/11 Javascript
JavaScript编程中容易出BUG的几点小知识
2015/01/31 Javascript
基于BootStrap环境写jQuery tabs插件
2016/07/12 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
完美解决JS文件页面加载时的阻塞问题
2016/12/18 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
2017/02/16 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
2017/06/21 Javascript
微信小程序 五星评分的实现实例
2017/08/04 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
2020/02/14 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
如何通过Python实现标签云算法
2019/07/02 Python
python使用sklearn实现决策树的方法示例
2019/09/12 Python
python实现最短路径的实例方法
2020/07/19 Python
英国优质家居用品网上品牌：URBANARA
2018/06/01 全球购物
Why do we need Unit test
2013/01/03 面试题
大学毕业生通用求职信
2013/09/28 职场文书
环境工程毕业生自荐信
2013/11/17 职场文书
水果超市创业计划书
2014/01/27 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
婚礼秀策划方案
2014/05/19 职场文书
党员教师个人对照检查材料范文
2014/09/25 职场文书
2014年六五普法工作总结
2014/11/25 职场文书
工程部文员岗位职责
2015/02/04 职场文书
事业单位财务人员岗位职责
2015/04/14 职场文书
2015年公司国庆放假通知
2015/07/30 职场文书
对象析构函数__del__在Python中何时使用
2022/03/22 Python