jQuery实现多层验证后的表单验证-js教程-PHP中文网

首页

web前端

js教程

jQuery实现多层验证后的表单验证

php中世界最好的语言

Mar 15, 2018 pm 05:32 PM

jquery 验证

这次给大家带来jQuery实现多层验证后的表单验证，jQuery实现多层验证后表单验证的注意事项有哪些，下面就是实战案例，一起来看一下。

本文实例为大家分享了jQuery实现表单验证的具体代码，供大家参考，具体内容如下

<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Reg</title>
  <style>
   .state1{
    color:#aaa;
   }
   .state2{
    color:#000;
   }
   .state3{
    color:red;
   }
   .state4{
    color:green;
   }
  </style>
  <script src="jquery.js"></script>
  <script>
   $(function(){
    var ok1=false;
    var ok2=false;
    var ok3=false;
    var ok4=false;
    // 验证用户名
    $('input[name="username"]').focus(function(){
     $(this).next().text('用户名应该为3-20位之间').removeClass('state1').addClass('state2');
    }).blur(function(){
     if($(this).val().length >= 3 && $(this).val().length <=12 && $(this).val()!=&#39;&#39;){
      $(this).next().text(&#39;输入成功&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state4&#39;);
      ok1=true;
     }else{
      $(this).next().text(&#39;用户名应该为3-20位之间&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state3&#39;);
     }    
    }); 
    //验证密码
    $(&#39;input[name="password"]&#39;).focus(function(){
     $(this).next().text(&#39;密码应该为6-20位之间&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state2&#39;);
    }).blur(function(){
     if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!=&#39;&#39;){
      $(this).next().text(&#39;输入成功&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state4&#39;);
      ok2=true;
     }else{
      $(this).next().text(&#39;密码应该为6-20位之间&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state3&#39;);
     }    
    });
    //验证确认密码
     $(&#39;input[name="repass"]&#39;).focus(function(){
     $(this).next().text(&#39;输入的确认密码要和上面的密码一致,规则也要相同&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state2&#39;);
    }).blur(function(){
     if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!='' && $(this).val() == $('input[name="password"]').val()){
      $(this).next().text('输入成功').removeClass('state1').addClass('state4');
      ok3=true;
     }else{
      $(this).next().text('输入的确认密码要和上面的密码一致,规则也要相同').removeClass('state1').addClass('state3');
     }    
    }); 
    //验证邮箱
    $('input[name="email"]').focus(function(){
     $(this).next().text('请输入正确的EMAIL格式').removeClass('state1').addClass('state2');
    }).blur(function(){
     if($(this).val().search(/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/)==-1){
      $(this).next().text('请输入正确的EMAIL格式').removeClass('state1').addClass('state3');
     }else{     
      $(this).next().text('输入成功').removeClass('state1').addClass('state4');
      ok4=true;
     }      
    });
    //提交按钮,所有验证通过方可提交
 
    $('.submit').click(function(){
     if(ok1 && ok2 && ok3 && ok4){
      $('form').submit();
     }else{
      return false;
     }
    });   
   });
  </script>
 </head>
<body> 
<form action=&#39;do.php&#39; method=&#39;post&#39; >
 用 户 名:<input type="text" name="username">
    <span class=&#39;state1&#39;>请输入用户名</span><br/><br/>
 密　　码:<input type="password" name="password">
    <span class=&#39;state1&#39;>请输入密码</span><br/><br/>
 确认密码:<input type="password" name="repass">
    <span class=&#39;state1&#39;>请输入确认密码</span><br/><br/>
 邮　　箱:<input type="text" name="email">
    <span class=&#39;state1&#39;>请输入邮箱</span><br/><br/> 
 <a href="javascript:;" rel="external nofollow" ><img class=&#39;submit&#39; type=&#39;image&#39; src=&#39;./images/reg.gif&#39; /></a>
</form>
</body>
</html>

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7722

Java教程

1642

CakePHP 教程

1396

Laravel 教程

1289

PHP教程

1233

显示更多

Related knowledge

微信好友辅助验证进行解封的详细方法 Mar 25, 2024 pm 01:26 PM

1、打开微信进入后，点击搜索图标，输入微信团队，点击下方的服务进入。2、进入后，点击左下方的自助工具的选项。3、点击后，在上方的选项内，点击解封/申诉辅助验证的选项。

PHP 8 新特性：增加了验证和签名 Mar 27, 2024 am 08:21 AM

PHP8是PHP的最新版本，为程序员带来了更多的便利和功能。这个版本特别关注安全性和性能，其中一个值得注意的新特性是增加了验证和签名功能。在本文中，我们将深入了解这些新的功能及其用途。验证和签名是计算机科学中非常重要的安全概念。它们通常用于确保传输的数据是完整和真实的。在处理在线交易和敏感信息时，验证和签名变得尤为重要，因为如果有人能够篡改数据，可能会对

jQuery中如何使用PUT请求方式？ Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT请求方式？在jQuery中，发送PUT请求的方法与发送其他类型的请求类似，但需要注意一些细节和参数设置。PUT请求通常用于更新资源，例如更新数据库中的数据或更新服务器上的文件。以下是在jQuery中使用PUT请求方式的具体代码示例。首先，确保引入了jQuery库文件，然后可以通过以下方式发送PUT请求：$.ajax({u

jQuery如何移除元素的height属性？ Feb 28, 2024 am 08:39 AM

jQuery如何移除元素的height属性？在前端开发中，经常会遇到需要操作元素的高度属性的需求。有时候，我们可能需要动态改变元素的高度，而有时候又需要移除元素的高度属性。本文将介绍如何使用jQuery来移除元素的高度属性，并提供具体的代码示例。在使用jQuery操作高度属性之前，我们首先需要了解CSS中的height属性。height属性用于设置元素的高度

jQuery小技巧：快速修改页面所有a标签的文本 Feb 28, 2024 pm 09:06 PM

标题：jQuery小技巧：快速修改页面所有a标签的文本在网页开发中，我们经常需要对页面中的元素进行修改和操作。在使用jQuery时，有时候需要一次性修改页面中所有a标签的文本内容，这样可以节省时间和精力。下面将介绍如何使用jQuery快速修改页面所有a标签的文本，同时给出具体的代码示例。首先，我们需要引入jQuery库文件，确保在页面中引入了以下代码：&lt

使用jQuery修改所有a标签的文本内容 Feb 28, 2024 pm 05:42 PM

标题：使用jQuery修改所有a标签的文本内容jQuery是一款流行的JavaScript库，被广泛用于处理DOM操作。在网页开发中，经常会遇到需要修改页面上链接标签（a标签）的文本内容的需求。本文将介绍如何使用jQuery来实现这个目标，并提供具体的代码示例。首先，我们需要在页面中引入jQuery库。在HTML文件中添加以下代码：

steam登录卡在手机令牌验证怎么解决？ Mar 14, 2024 pm 07:35 PM

　　steam是一款游戏爱好者都在使用的平台，这里能够领取购买很多的游戏，而近期有很多用户在登录Steam的时候出现了卡在手机令牌验证的界面，无法登录成功，面对这种情况，大多数用户都是不知道怎么解决的，没有关系，今日软件教程就来为广大用户们进行解答，有需要的朋友可到查看操作方法。　　steam手机令牌报错？　　解决办法一：软件问题　　首先在手机上找到steam软件设置，请求协助页面，并确认使用该设备网络运行正常，再次单击确定，点击发送短信，即可在手机页面收取到验证码，即可完成验证，解决处理请求时

了解jQuery中eq的作用及应用场景 Feb 28, 2024 pm 01:15 PM

jQuery是一种流行的JavaScript库，被广泛用于处理网页中的DOM操作和事件处理。在jQuery中，eq()方法是用来选择指定索引位置的元素的方法，具体使用方法和应用场景如下。在jQuery中，eq()方法选择指定索引位置的元素。索引位置从0开始计数，即第一个元素的索引是0，第二个元素的索引是1，依此类推。eq()方法的语法如下：$("s

See all articles

jQuery实现多层验证后的表单验证

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题