首页
所有分类
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将标签元素的高设为屏幕的百分比
Apr 19 jQuery
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
jQuery实现frame之间互通的方法
Jun 26 jQuery
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
jQuery实现网页拼图游戏
Apr 22 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
jquery实现上传文件进度条
Mar 26 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 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) 收信机(3) 77A(2) MOTOROLA(1) 66-XI(1) 音箱(1) 军机(1) 晶体管(2) VOLVO(1) BOSE(2)
You might like
使用PHP Socket写的POP3类
2013/10/30 PHP
PHP中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
PHP实现的XML操作类【XML Library】
2016/12/29 PHP
tp5实现微信小程序多图片上传到服务器功能
2018/07/16 PHP
PHP检测一个数组有没有定义的方法步骤
2019/07/20 PHP
php桥接模式应用案例分析
2019/10/23 PHP
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
js同比例缩放图片的小例子
2013/10/30 Javascript
Javascript实现返回上一页面并刷新的小例子
2013/12/11 Javascript
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
有关json_decode乱码及NULL的问题
2015/10/13 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
轻松理解Javascript变量的相关问题
2017/01/20 Javascript
写给小白看的JavaScript异步
2017/11/29 Javascript
快速解决brew安装特定版本flow的问题
2018/05/17 Javascript
nodejs express配置自签名https服务器的方法
2018/05/22 NodeJs
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
2019/01/19 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
简谈创建React Component的几种方式
2019/06/15 Javascript
Vue实现商品飞入购物车效果(电商项目)
2019/11/26 Javascript
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
对Python中列表和数组的赋值,浅拷贝和深拷贝的实例讲解
2018/06/28 Python
python random从集合中随机选择元素的方法
2019/01/23 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
Django实现任意文件上传（最简单的方法）
2020/06/03 Python
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
python 偷懒技巧——使用 keyboard 录制键盘事件
2020/09/21 Python
Python中Yield的基本用法
2020/10/18 Python
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
ghd澳大利亚官方网站：英国最受欢迎的美发工具品牌
2018/05/21 全球购物
英国哈罗德园艺：Harrod Horticultural
2020/03/31 全球购物
八一建军节活动方案
2014/02/10 职场文书
学校端午节活动方案
2014/08/23 职场文书
解决Laravel使用验证时跳转到首页的问题
2021/11/17 PHP
Python中time标准库的使用教程
2022/04/13 Python