欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS簡單表單驗(yàn)證功能完整示例

 更新時間:2020年01月26日 12:48:32   作者:echo曦  
這篇文章主要介紹了JS簡單表單驗(yàn)證功能,結(jié)合完整實(shí)例形式分析了JavaScript表單驗(yàn)證相關(guān)的字符串判斷、正則驗(yàn)證、計(jì)算等相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了JS簡單表單驗(yàn)證功能。分享給大家供大家參考,具體如下:

簡單js表單驗(yàn)證demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>Document</title>
  <script>
    //當(dāng)用戶名獲取焦點(diǎn)時
    function focus_username(){
      document.getElementById("user_res").innerHTML="<font color='#f00'>請輸入用戶名</font>";
    }
    //當(dāng)用戶名失去焦點(diǎn)時
    function blur_username(){
      var user_value=document.getElementsByName("username")[0].value;
      if(user_value.length===0){
      document.getElementById("user_res").innerHTML="<font color='#f00'>你沒有輸入用戶名</font>";
          return false;
          //判斷其長度是否在5~18之間 如果不在就提示用戶
      }else if(user_value.length<5||user_value.length>18)
      {
      document.getElementById("user_res").innerHTML="<font color='#f00'>用戶名長度必須在5-18之間</font>";
          return false;
      }else if(!checkUser(user_value)){
        //用戶名還有特殊符號
      document.getElementById("user_res").innerHTML="<font color='#f00'>用戶名含有特殊符號</font>";
          return false;
      }else{
        //用戶名合法
      document.getElementById("user_res").innerHTML="<font color='#00f'>用戶名合法</font>";
          return true;
      }
    }
    //密碼獲取焦點(diǎn)時
    function focus_password(){
      document.getElementById("pass_res").innerHTML="<font color='#f00'>請輸入密碼</font>";
    }
    //密碼失去焦點(diǎn)時
    function blur_password(){
      var user_value=document.getElementsByName("password")[0].value;
      if(user_value.length===0){
      document.getElementById("pass_res").innerHTML="<font color='#f00'>你沒有輸入密碼</font>";
          return false;
          //判斷其長度是否在5~18之間 如果不在就提示用戶
      }else if(user_value.length<5||user_value.length>18)
      {
      document.getElementById("pass_res").innerHTML="<font color='#f00'>用密碼長度必須在5-18之間</font>";
          return false;
      }else{
        //密碼合法
      document.getElementById("pass_res").innerHTML="<font color='#00f'>密碼合法</font>";
          return true;
      }
    }
     function checkUser(user){
      var arr=["<",">","#","?","%"];
      var arr_length=arr.length;
      var user_length=user.length;
      for(var i=0;i<arr_length;i++){
        for(var j=0;j<user_length;j++){
          if(arr[i]===user.charAt(j)){
            return false;
          }
        }
      }
      //表示用戶名合法
       return true;
     }
     //提交提交表單驗(yàn)證
     function checkForm(){
      var user_flag=blur_username();
      var pass_flag=blur_password();
      if(user_flag && pass_flag){
        alert("提交合法表單");
         return true;
      }else{
        alert("輸入不合法");
        return false;
      }
     }
  </script>
</head>
<body>
                          <!--action 參數(shù)自定義跳轉(zhuǎn)頁面-->
  <form name='form1' onsubmit='return checkForm()' action='index.php'>
    <table width='600' align='center'>
      <tr>
        <td align='right' width='150'>用戶名:</td>
        <td width='100'><input type='text' name='username' onfocus='focus_username()' onblur = 'blur_username()'/></td>
        <td><span id="user_res"></span></td>
      </tr>
      <tr>
        <td align='right' width='100'>密碼:</td>
        <td width='100'><input type='password' name='password' onfocus='focus_password()' onblur = 'blur_password()'/></td>
        <td><span id="pass_res"></span></td>
      </tr>
      <tr>
        <td></td>
        <td><input type='submit' value='提交' /></td>
      </tr>
    </table>
  </form>
</body>
</html>

運(yùn)行結(jié)果:

PS:這里再為大家提供2款非常方便的正則表達(dá)式工具供大家參考使用:

JavaScript正則表達(dá)式在線測試工具:
http://tools.jb51.net/regex/javascript

正則表達(dá)式在線生成工具:
http://tools.jb51.net/regex/create_reg

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript正則表達(dá)式技巧大全》、《JavaScript表單(form)操作技巧大全》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)

希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • 微信小程序?qū)崿F(xiàn)頂部下拉菜單欄

    微信小程序?qū)崿F(xiàn)頂部下拉菜單欄

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)頂部下拉菜單欄,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-11-11
  • 詳解微信小程序——自定義圓形進(jìn)度條

    詳解微信小程序——自定義圓形進(jìn)度條

    這篇文章主要介紹了詳解微信小程序——自定義圓形進(jìn)度條,具有一定的參考價值,感興趣的小伙伴們可以參考一下。
    2016-12-12
  • JS+canvas實(shí)現(xiàn)的五子棋游戲【人機(jī)大戰(zhàn)版】

    JS+canvas實(shí)現(xiàn)的五子棋游戲【人機(jī)大戰(zhàn)版】

    這篇文章主要介紹了JS+canvas實(shí)現(xiàn)的五子棋游戲,是采用比較強(qiáng)的AI實(shí)現(xiàn)的人機(jī)大戰(zhàn)版游戲,涉及javascript結(jié)合HTML5實(shí)現(xiàn)圖形繪制與人工智能相關(guān)操作技巧,需要的朋友可以參考下
    2017-07-07
  • JavaScript Perfection kill 測試及答案

    JavaScript Perfection kill 測試及答案

    近日,在Perfection kill上看到有關(guān)javascript quiz。并做了一下,最終錯了2個(#2,#9),但是,這2道題,在Ie和ff下的答案是不一樣的?!
    2010-03-03
  • 原生JS實(shí)現(xiàn)貪吃蛇小游戲

    原生JS實(shí)現(xiàn)貪吃蛇小游戲

    這篇文章主要為大家詳細(xì)介紹了原生JS貪吃蛇小游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-03-03
  • Typescript井字棋的項(xiàng)目實(shí)現(xiàn)

    Typescript井字棋的項(xiàng)目實(shí)現(xiàn)

    本文主要介紹了Typescript井字棋的項(xiàng)目實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-08-08
  • JS判斷是否長按某一鍵的方法

    JS判斷是否長按某一鍵的方法

    這篇文章主要介紹了JS判斷是否長按某一鍵的方法,涉及JavaScript針對鍵盤按鍵的判斷及響應(yīng)操作技巧,需要的朋友可以參考下
    2016-03-03
  • JS箭頭函數(shù)和常規(guī)函數(shù)之間的區(qū)別實(shí)例分析【 5 個區(qū)別】

    JS箭頭函數(shù)和常規(guī)函數(shù)之間的區(qū)別實(shí)例分析【 5 個區(qū)別】

    這篇文章主要介紹了JS箭頭函數(shù)和常規(guī)函數(shù)之間的區(qū)別,結(jié)合實(shí)例形式分析了JS箭頭函數(shù)和常規(guī)函數(shù)之間的 5 個區(qū)別與相關(guān)使用注意事項(xiàng),需要的朋友可以參考下
    2020-05-05
  • Javascript 的addEventListener()及attachEvent()區(qū)別分析

    Javascript 的addEventListener()及attachEvent()區(qū)別分析

    大家都知道事件的用法就是當(dāng)某個事件(狀況)被觸發(fā)了之后就會去執(zhí)行某個Function, 尤其是Javascript, 在當(dāng)紅AJAX的催化下, 了解Javascript的Event用法更加重要, 在這里就大概介紹一下avascript的Event用法.
    2009-05-05
  • JS+Canvas實(shí)現(xiàn)上傳圖片截圖功能

    JS+Canvas實(shí)現(xiàn)上傳圖片截圖功能

    在我們平時開發(fā)圖片上傳時,有時需要實(shí)現(xiàn)圖片的裁剪功能,這篇文章主要為大家介紹了如何使用Canvas實(shí)現(xiàn)上傳圖片截圖功能,希望對大家有所幫助
    2023-10-10

最新評論