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

?


回到頂部

本文內容:

?

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

?

首發日期: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" οnclick="return isVaildInfo()"></form></body>
</html>
復制代碼

?


轉載于:https://www.cnblogs.com/aliyunpang/p/9032571.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/254607.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/254607.shtml
英文地址,請注明出處:http://en.pswp.cn/news/254607.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Spring_01 spring容器、控制反轉(IOC)、依賴注入(DI)

目錄 1 什么是spring框架 2 spring框架的特點 3 spring容器 3.1 什么是spring容器 3.2 spring容器創建對象的編程步驟 3.4 spring容器創建對象的方式 3.5 bean元素的幾個重要屬性 4 IOC 4.1 什么是IOC 4.2 什么事DI 4.3 DI的三種方式 1 什么是spring框架 是一個開源的用來簡化企…

EntityFramework 插件之EntityFramework.Extended (批量處理)

接手了一個用EF來做的項目&#xff0c;由于項目中使用的原生處理&#xff0c;導致很多update都是采用先select 后 update的方式來實現&#xff0c;同時無法批量執行邏輯如&#xff1a;根據訂單類型統一更新狀態等。所以在經過了N多查找之后 發現了一個國外寫的擴展插件EntityFr…

一個傳值的問題”*”與”*”

1/********************************************************* 2* Desc:參數傳遞&#xff1a;使用引用傳遞指針和直接傳遞指針地址的區別 3* Author:charley 4* DateTime:2010-12-7 11:00 02***********************************************************/ 03#include <…

Classification分類halcon算子,持續更新

目錄ClassificationGaussian Mixture Models高斯混合模型add_class_train_data_gmmadd_sample_class_gmmclassify_class_gmmclear_class_gmmclear_samples_class_gmmcreate_class_gmmdeserialize_class_gmmevaluate_class_gmmget_class_train_data_gmmget_params_class_gmmget_…

spring boot 擴展之AutoConfigurationImportListener

最近閱讀spring boot源碼時發現&#xff0c;發現當spring使用ConfigurationClassParser加載使用Configuration注解類后&#xff0c;會使用AutoConfigurationImportSelector對加載的 Configuration注解的類進行一次過濾。當AutoConfigurationImportSelector過濾完成后會自動加載…

classpath: spring 中的查找方式

Spring可以通過指定classpath*:與classpath:前綴加路徑的方式從classpath加載文件,如bean的定義文件.classpath*:的出現是為了從多個jar文件中加載相同的文件.classpath:只能加載找到的第一個文件. 比如 resource1.jar中的package com.test.rs 有一個 jarAppcontext.xml 文件,內…

《高效程序員的45個習慣》-之一

敏捷開發是當下最流行的開發方法&#xff0c;它采用的是一種以人為核心、迭代、循序漸進的開發思想&#xff0c;值得你關注和學習。 最近我就閱讀了一本有關敏捷開發的書籍&#xff0c;《高效程序員的45個習慣》。 它以“舉反例”的方式來講述了敏捷開發中程序員應該運用的…

教你如何在 elasticsearch 中重建索引

序言 Elasticsearch 是一個實時的分布式搜索分析引擎。Teambition 使用 Elastisearch 作為搜索引擎&#xff0c;為用戶提供搜索服務&#xff0c;當我們決定存儲某種數據時&#xff0c;我們需要使用PUT /teambition創建索引&#xff0c;在創建索引的時候需要將數據結構完整確定下…

halcon控制算子Control,持續更新

目錄Controlassignassign_atbreakcasecatchcommentcontinueconvert_tuple_to_vector_1dconvert_vector_to_tupledefaultelseelseifendforendifendswitchendtryendwhileexecutable_expressionexitexport_defforglobalififelseimportinsertpar_joinrepeatreturnstopswitchthrowtr…

《CLR via C#》之線程處理——線程基礎

《CLR via C#》之線程處理——線程基礎 《CLR via C#》之線程處理——線程基礎windows為什么要支持線程線程開銷CPU發展趨勢CLR線程和Windows線程使用專用線程執行異步的計算限制操作線程調度和優先級windows為什么要支持線程 早期的操作系統只有一個執行線程&#xff0c;但同時…

《高效程序員的45個習慣》-之二

請您在閱讀本文之前&#xff0c;先了解《高效程序員的45個習慣》-之一。 每一期都會涉及15個話題&#xff0c;用3期來列出這45個習慣&#xff0c;每次不貪多&#xff0c;貪精&#xff0c;大家如果有空&#xff0c;一定要細細品味這15個習慣。 注意&#xff1a;每一個好的習…

MIME Type的介紹

轉載自&#xff1a; http://www.cnblogs.com/jsean/articles/1610265.html 一、 首先&#xff0c;我們要了解瀏覽器是如何處理內容的。在瀏覽器中顯示的內容有 HTML、有 XML、有 GIF、還有 Flash ……那么&#xff0c;瀏覽器是如何區分它們&#xff0c;決定什么內容用什么形式來…

spring boot之從零開始開發自己的網站

概述 首先要感謝兩位大神&#xff0c;該項目的想法來源自tale和MyBlog。 做了一些改造&#xff0c;增加了一些功能和一些代碼的重構&#xff0c;并且更換了博客主題。 關于項目&#xff0c;對于開發的練手項目&#xff0c;能夠工程化&#xff0c;嚴謹一些。 關于文檔&#x…

halcon深度學習算子,持續更新

目錄Deep Learning 深度學習Classification&#xff1a;分類apply_dl_classifierclear_dl_classifierclear_dl_classifier_resultclear_dl_classifier_train_resultdeserialize_dl_classifierget_dl_classifier_paramget_dl_classifier_resultget_dl_classifier_train_resultre…

python day5--正則表達式

#----正則表達式 import re elink <a href"(.*)">(.*)</a> info <a href"http://www.baidu.com">baidu</a> cinfo re.findall(elink,info) print (cinfo) import re print(re.search (r^a,abc\neee)) #預期結果 ^匹配字符開…

WCF系列教程之WCF客戶端調用服務

1、創建WCF客戶端應用程序需要執行下列步驟 (1)、獲取服務終結點的服務協定、綁定以及地址信息 (2)、使用該信息創建WCF客戶端 (3)、調用操作 (4)、關閉WCF客戶端對象 二、操作實例 1、WCF服務層搭建:新建契約層、服務層、和WCF宿主,添加必須的引用(這里不會的參考本人前面的隨…

《高效程序員的45個習慣》-之三

請您在閱讀本文之前&#xff0c;先了解《高效程序員的45個習慣》-之二。 每一期都會涉及15個話題&#xff0c;用3期來列出這45個習慣&#xff0c;每次不貪多&#xff0c;貪精&#xff0c;大家如果有空&#xff0c;一定要細細品味這15個習慣。 注意&#xff1a;每一個好的習…

負載均衡的那些事?

什么是負載均衡&#xff1f;1、負載&#xff1a;就是后端系統的承載能力。比如同等條件下&#xff0c;一個1核cpu-1G內存的機器的承載能力一般會比8核cpu-8G內存的機器要差&#xff1b;相同配置下&#xff0c;一個cpu利用率為80%的機器比30%的承載能力一般要差等等。2、均衡&am…

Develop內部函數,持續更新

Develop內部函數 目錄Develop內部函數dev_clear_objdev_clear_windowdev_close_inspect_ctrldev_close_tooldev_close_windowdev_disp_textdev_displaydev_error_vardev_get_exception_datadev_get_preferencesdev_get_systemdev_get_windowdev_inspect_ctrldev_map_pardev_map…

短信認證方案,用手機短信進行上網認證如何實現?

WFilter NGF的“Web認證”模塊&#xff0c;提供了一系列的上網認證解決方案。包括如下認證方式&#xff1a;本地用戶名密碼認證AD域用戶名密碼認證企業郵箱用戶名密碼認證Radius用戶名密碼認證微信WiFi認證Facebook Wifi認證除此&#xff0c;WFilter NGF還有一個“其他”的選項…