基於Jquery實作表單驗證_jquery-js教程-PHP中文網

首頁

web前端

js教程

基於Jquery實作表單驗證_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:47 PM

有時在我們註冊帳戶、登陸系統時，當所有驗證通過方可提交這就需要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()!=''){
            $(this).next().text('输入成功').removeClass('state1').addClass('state4');
            ok1=true;
          }else{
            $(this).next().text('用户名应该为3-20位之间').removeClass('state1').addClass('state3');
          }
           
        });
 
        //验证密码
        $('input[name="password"]').focus(function(){
          $(this).next().text('密码应该为6-20位之间').removeClass('state1').addClass('state2');
        }).blur(function(){
          if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!=''){
            $(this).next().text('输入成功').removeClass('state1').addClass('state4');
            ok2=true;
          }else{
            $(this).next().text('密码应该为6-20位之间').removeClass('state1').addClass('state3');
          }
           
        });
 
        //验证确认密码
          $('input[name="repass"]').focus(function(){
          $(this).next().text('输入的确认密码要和上面的密码一致,规则也要相同').removeClass('state1').addClass('state2');
        }).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='do.php' method='post' >
  用 户 名:<input type="text" name="username">
        <span class='state1'>请输入用户名</span><br/><br/>
  密　　码:<input type="password" name="password">
        <span class='state1'>请输入密码</span><br/><br/>
  确认密码:<input type="password" name="repass">
        <span class='state1'>请输入确认密码</span><br/><br/>
  邮　　箱:<input type="text" name="email">
        <span class='state1'>请输入邮箱</span><br/><br/> 
  <a href="javascript:;"><img class='submit' type='image' src='./images/reg.gif' /></a>
</form>
</body>
</html>

登入後複製

以上就是本文的全部內容，希望大家可以喜歡。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7657

CakePHP 教程

1393

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT迷你填字遊戲答案

111

Related knowledge

前端熱敏紙小票打印遇到亂碼問題怎麼辦？ Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中，小票打印是一個常見的需求。然而，很多開發者在實...

誰得到更多的Python或JavaScript？ Apr 04, 2025 am 12:09 AM

Python和JavaScript開發者的薪資沒有絕對的高低，具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大，薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。

神秘的JavaScript：它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。