javascript:正則表達式、一個表單驗證的例子

来源:https://www.cnblogs.com/progor/archive/2018/05/13/9032281.html
-Advertisement-
Play Games

本文內容: 正則表達式 正則表達式的使用方法 正則表達式的特殊匹配字元 正則表達式修飾符 利用正則表達式進行表單驗證的例子 首發日期:2018-05-13 正則表達式: 正則表達式的使用方法: 首先創建正則表達式對象: 【正則表達式的字元規則:如果是沒有特殊意義的字元,直接寫;如果是有特殊意義的,直... ...



本文內容:

 

  • 正則表達式
    • 正則表達式的使用方法
    • 正則表達式的特殊匹配字元
    • 正則表達式修飾符
  • 利用正則表達式進行表單驗證的例子

 

首發日期:2018-05-13

 


正則表達式:

 

正則表達式的使用方法:

  1. 首先創建正則表達式對象: 【正則表達式的字元規則:如果是沒有特殊意義的字元,直接寫;如果是有特殊意義的,直接寫;如果想將特殊意義的字元轉成非特殊意義的,前面使用\】
    1. 可以通過RegExp對象創建正則表達式對象: var 變數名=new RegExp("表達式"[,修飾符])image
    2. 也可以使用按照一定的格式(以斜杠( / )開頭和結尾)的字元組合來創建正則表達式對象【稱為字面量創建法】:var 變數名=/表達式/修飾符image【正則表達式修飾符寫在正則表達式結束符/後面,是可選的,定義一些比如匹配忽略大小寫等規則】
  2. 其次字元串使用正則表達式來獲取匹配結果:
    1. 使用正則對象提供的方法:
      1. re.test(string):符合就返回true,不然返回falseimage
      2. re.exec(string):不符合返回null,找得到就返回符合的字元和開始位置image
    2. 使用字元串對象提供的方法:
      1. search(正則表達式):查找符合正則表達式的字元串,返回結果是字元串開始的位置,如果沒有找到任何匹配的子串,則返回 -1image
      2. match(正則表達式):查找符合正則表達式的字元串,返回結果是匹配出的字元串,如果沒有找到任何匹配的文本, match() 將返回 nullimage
      3. replace(正則表達式,用來替換的字元串):查找符合正則表達式的字元串,然後使用另一個字元串替換,返回結果是替換後的字元串,如果沒有查找成功,返回的是原本的字元串。image
      4. split(正則表達式):查找符合正則表達式的字元串,然後根據它來分割整個字元串。返回結果是多個字元串。image

 

 

正則表達式的特殊匹配字元:

字元 意義
\ 屏蔽使用字元的特殊意義,比如\$代表不使用$來匹配,而僅僅把它當作一個普通字元
^ 代表^後面跟著的字元必須是字元串的開頭
$ 代表$前面的字元必須是字元串的結尾
* 匹配*前面的字元0次或多次(貪婪的,多多益善的)
+ 匹配+前面的字元1次或多次(貪婪的多多益善的)
? 匹配?前面的字元0次或1次
. 匹配除換行符\n之外的所有字元
\d 匹配0~9的所有數字一次
\D 匹配非數字的所有字元一次
\s 匹配一個空字元,比如換行符、空格、縮進符
\w 匹配任何字母、數字以及下劃線
\W 匹配除數字、字母及下劃線外的其他字元
   
[0-9] 匹配從 0 至 9 的數字一次
[a-z] 匹配從 a 至 z 的字母一次
[幾個字母],比如[abcd] 匹配[]中的任意一個字母一次(從左到右優先)
[一個範圍或幾個範圍],比如[a-z0-9] 匹配[]幾個範圍中的一個字元一次(從左到右優先)
[^範圍] 匹配非範圍內的字元
   
{n} 匹配前面的字元n次
{n,} 匹配前面的字元至少n次
{n,m} 匹配前面的字元n~m次
   
x|y 匹配x或y,(從左到右優先)
   
(一串特殊字元) 把一串特殊字元當成一組來匹配

 

正則表達式修飾符

(寫在正則表達式結束符/後面,image):

字元 意義  
g 全局匹配,不是僅僅匹配一處  
i 匹配忽略字元大小寫  

使用g之後,對於exec可以重覆執行來獲取結果,對於字元串提供的方法,會一次性返回多個結果:

image

imageimage

 

 


利用正則表達式進行表單驗證的例子:

 

這是一個簡單的例子,僅僅做匹配動作,不做效果,這隻是一個小架子,想要增加效果可以自己來增加。

 

準備工作:

一個用來匹配郵箱的正則表達式:/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i

一個用來匹配世界手機號碼的正則表達式:/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/

一個用來匹配密碼的正則表達式(長度在6~18之間,只能包含字母和數字):/^[a-zA-Z0-9]{6,18}$/

image

獲取值:

image

 

 

建立表單,綁定觸發函數:

  • action指向一個不存在的網址,如果提交失敗,則不會跳轉

image

 

如果三個輸入框都符合條件,那麼返回true,使得sumbit的事件能進行下去,從而進行跳轉;如果任意一個不符合條件,那麼返回false,從而阻止submit的事件進行

image

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>表單驗證</title>
    <script>
        function isVaildInfo(){
            var emailReg=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
            var telReg=/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
            var pwdReg=/^[a-zA-Z0-9]{6,18}$/;

            var email=document.getElementById("email").value;
            var tel=document.getElementById("tel").value;
            var pwd=document.getElementById("pwd").value;

            if (emailReg.test(email)&&telReg.test(tel)&&pwdReg.test(pwd)) {
                return true;
            }
            else{
                return false;
            }
        }


    </script>
</head>
<body>
    <form action="555.html" method="get" >
        <input id="email" type="text" name="" placeholder="請輸入郵箱">
        <input id="tel" type="text" name=""  placeholder="請輸入手機號">
        <input id="pwd" type="password" name=""  placeholder="請輸入密碼">
        <input type="submit" value="確定" id="btn" onclick="return isVaildInfo()">

    </form>

</body>
</html>

 



您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 公司產品需要一個雷達圖來展示各維度的比重,網上找了一波,學到不少,直接自己上手來擼一記 無圖言虛空 簡單分析一波,確定雷達圖正幾邊形的 正五邊形 int count=5,分為幾個層數 4 層 int layerCount=4 主要這幾步,開擼! 自定義RadarView繼承View 確定需要使用的變 ...
  • xml java: ...
  • 一,數據的“濾波” 直接從加速度計獲得的原始數據,往往不能直接使用,而是需要去除一些干擾數據,這個過程稱為“濾波”。“濾波”一詞來源於無線電技術中對無線電信號的處理過程。事實上從數學角度而言它們是一樣的,它們都是某種採樣信號,這個“濾波”的過程很複雜,要通過傅里葉變換實現“濾波". 二,陀螺儀 加速 ...
  • 1、Default模式,也是沒有設置緩存模式時的預設模式 這個模式實現http協議中的內容,比如響應碼是304時,當然還會結合E-Tag和LastModify等頭。 StringRequest request = new StringRequest(url, method); request.set ...
  • >>> JQuery 事件處理 >>> JQuery 事件處理 一、事件綁定方式 一、事件綁定方式 1、事件綁定的快捷方式: 缺點:綁定的事件,無法取消 2、使用on進行事件綁定 ① 使用on進行單事件綁定 ② 使用on,同時給多個事件綁定同一函數 ③ 使用on,同時給多個事件分別綁定不同的函數 ④ ...
  • 總述 我對於網頁這部分的理解吧,對於靜態網頁來說,無非分為三部分:第一部分、HTML,第二部分、CSS,第三部分、JavaScript(這部分暫且放一邊)。這倆個給我的第一印象就是,這你妹的都是一串串英文字母啊!一大堆的標簽,頭疼...但是如果我們仔細去想一下自己以前寫的這些英文字母,其實就好比在去 ...
  • 數組的2種創建方式: 1:數組直接量,在方括弧中將數組元素用逗號隔開即可。 數組直接量不一定要是常量,也可以是任意表達式。 數組也可以是包含對象直接量或者其他數組直接量 2,使用Array()構造函數 二維數組: 定義:整體上看是一個數組,一中一個元素又是一個數組,即數組中的數組。 數組的遍歷: 方 ...
  • 看書看到的一個jQuery小例子,分享給大家。(jquery引入可以選擇下載引入或者在jQuery官網找CDN) ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...