首页
所有分类
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编写textarea输入字数限制代码
Mar 23 jQuery
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
jquery网页加载进度条的实现
Jun 01 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
jQuery实现增删改查
Dec 22 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) SHARP(1) ICF-SW7600(1) PL450(1) 乐信(1) GF515(1) BCL3000(2) RP2100(1) PL550(1) H-501(1)
You might like
php在线打包程序源码
2008/07/27 PHP
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
php与Mysql的一些简单的操作
2015/02/26 PHP
php有效防止同一用户多次登录
2015/11/19 PHP
100多行PHP代码实现socks5代理服务器[2]
2016/05/05 PHP
php中替换字符串函数strtr()和str_repalce()的用法与区别
2016/11/25 PHP
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
两个比较有用的Javascript工具函数代码
2010/02/17 Javascript
Javascript 键盘事件的组合使用实现代码
2012/05/04 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
js模仿php中strtotime()与date()函数实现方法
2015/08/11 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
2015/09/04 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
Vue开发中遇到的跨域问题及解决方法
2020/02/11 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
2020/09/24 Javascript
vue项目开启Gzip压缩和性能优化操作
2020/10/26 Javascript
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
python通过pil模块获得图片exif信息的方法
2015/03/16 Python
Python中isnumeric()方法的使用简介
2015/05/19 Python
Python实现数据可视化看如何监控你的爬虫状态【推荐】
2018/08/10 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
几个适合python初学者的简单小程序，看完受益匪浅！(推荐)
2019/04/16 Python
详解python内置模块urllib
2020/09/09 Python
python 代码运行时间获取方式详解
2020/09/18 Python
HTML5和CSS3让网页设计提升到下一个高度
2009/08/14 HTML / CSS
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
赔偿协议书范本
2014/09/12 职场文书
2014法制宣传日活动总结范文
2014/11/01 职场文书
教师节主持词开场白
2015/05/29 职场文书
家装电话营销开场白
2015/05/29 职场文书
现实表现证明材料
2015/06/19 职场文书
教师听课学习心得体会
2016/01/15 职场文书