JS中的表單驗證+正則表達式

時間 2019-11-12

原文原文鏈接

表單驗證+正則表達式javascript

1、非空驗證html

trim：去空格（去掉先後的空格），任何字符串均可以用這個方法。寫法爲：if(v.trim().length==0)，表示若是去掉空格後的字符串的長度爲0。java

<body>
<form action="Untitled-1.html" method="post">
<input type="text" name="uid" id="uid"  onblur="Check()" />//文本框，用戶輸入內容。onblur是鼠標失去焦點時觸發。
<input type="submit" value="肯定" id="btn" onclick="return Check()" />//提交按鈕，點擊事件執行的內容根據return的值判斷。
</form>
</body>
<script type="text/javascript">
function Check()
{
　　var v = document.getElementById("uid").value;//取到用戶輸入的值
　　if(v.trim().length==0)//對去掉空格後的值進行驗證
　　{
　　alert("用戶名不能爲空");//輸入值爲空
　　　　return false;//返回false
　　}
　　else//輸入值不爲空
　　{
　　　　return true;//返回true
　　}
}
</script>

2、對比驗證正則表達式

<input type="text" name="pw1" id="pw1" />//兩個文本框
<input type="text" name="pw2" id="pw2" />
<input type="submit" value="肯定" id="btn" onclick="return Check()" />//提交按鈕

</form>
</body>
<script type="text/javascript">
function Check()
{
　　var v1 = document.getElementById("pw1").value;//第一個文本框的值
　　var v2 = document.getElementById("pw2").value;//第二個文本框的值
　　if(v1==v2)//若是兩個文本框的值同樣
　　{
　　　　return true;//返回true
　　}
　　else//若是兩個文本框的值不同
　　{
　　　　alert("兩次輸入的密碼不相同");//輸出"兩次輸入的密碼不相同"
　　　　return false;//返回false
　　}
}

3、範圍驗證函數

<input type="text" name="age" id="age" />//輸入年齡的文本框
<input type="submit" value="肯定" id="btn" onclick="return Check()" />//提交按鈕
</form>
</body>
<script type="text/javascript">

function Check()
{
　　var v = parseInt(document.getElementById("age").value);//取年齡值
　　if(v>=18 && v<=50) //若是年齡在範圍內
　　{
　　　　return true;//返回true
　　}
　　else//若是不在範圍內
　　{
　　　　alert("輸入的年齡不在單位內");//輸出"輸入的年齡不在單位內"
　　return false;//返回false
　　}
}

4、固定格式驗證（正則驗證）post

固定格式驗證是指對輸入的內容是否符合格式要求的驗證，寫法爲if(v.match())，natch裏面放正則表達式，若是匹配成功，return的是輸入的內容，若是匹配失敗，return的是null。正則表達式是對輸入的內容的格式的要求，好比郵箱地址、電話號碼、身份證號碼等。經常使用的正則表達式符號有：ui

//：正則表達式的書寫規則，//中間寫正則表達式的內容，/內容/；編碼

^：匹配開頭，/^ve表示以ve開頭；spa

$：匹配結尾，ve$/表示以ve結束；code

\d：一個任意的數字，等於0-9；

\m：一個任意的數字或者字母，包括下劃線；

\s：任意的不可見的字符串，例如空格、換行；

\S：任意的可見的字符；

{n}：前面的表達式重複n變，n等於幾就是幾遍；

{m，n}：把前面的表達式重複至少m遍，最多n遍；
{m， }：把前面的表達式重複至少m遍，最多不限；

+：左邊的表達式，至少出現1次，至多不限，至關於{1, };

*：左邊的表達式，至少出現0次，至多不限，至關於{0, };

？：左邊的表達式，至少出現0次，最多出現1次，至關於{0,1}；

[a,b,c]：只能取方括號中內容之一；

[a-z]或[1-9]：在a-z或者0-9取值；

\r：表示換行；

\n：表示換行；

\t：表示Tab鍵；

\\：表示\；

\"："

x|y：能夠匹配x或者y；

[^xyz]：不匹配[]裏面的內容；

經常使用的正則表達式：

Email地址：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?
InternetURL：[a-zA-z]+://[^\s]* 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$
手機號碼：^(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}$
電話號碼(「XXX-XXXXXXX」、」XXXX-XXXXXXXX」、」XXX-XXXXXXX」、」XXX-XXXXXXXX」、」XXXXXXX」和」XXXXXXXX)：^($$\d{3,4}-)|\d{3.4}-)?\d{7,8}$
國內電話號碼(0511-440522二、021-87888822)：\d{3}-\d{8}|\d{4}-\d{7}
身份證號(18位數字)：/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
身份證號(15位數字)：/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/
短身份證號碼(數字、字母x結尾)：^([0-9]){7,18}(x|X)?$ 或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$
賬號是否合法(字母開頭，容許5-16字節，容許字母數字下劃線)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
密碼(以字母開頭，長度在6~18之間，只能包含字母、數字和下劃線)：^[a-zA-Z]\w{5,17}$
強密碼(必須包含大小寫字母和數字的組合，不能使用特殊字符，長度在8-10之間)：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$
日期格式：^\d{4}-\d{1,2}-\d{1,2}
一年的12個月(01～09和1～12)：^(0?[1-9]|1[0-2])$
一個月的31天(01～09和1～31)：^((0?[1-9])|((1|2)[0-9])|30|31)$
錢的輸入格式：
- 有四種錢的表示形式咱們能夠接受:」10000.00″ 和「10,000.00」, 和沒有「分」的「10000」和「10,000」：^[1-9][0-9]*$
- 這表示任意一個不以0開頭的數字，可是，這也意味着一個字符」0″不經過，因此咱們採用下面的形式：^(0|[1-9][0-9]*)$
- 一個0或者一個不以0開頭的數字.咱們還能夠容許開頭有一個負號：^(0|-?[1-9][0-9]*)$
- 這表示一個0或者一個可能爲負的開頭不爲0的數字.讓用戶以0開頭好了.把負號的也去掉，由於錢總不能是負的吧.下面咱們要加的是說明可能的小數部分：^[0-9]+(.[0-9]+)?$
- 必須說明的是，小數點後面至少應該有1位數，因此」10.」是不經過的，可是「10」和「10.2」是經過的：^[0-9]+(.[0-9]{2})?$
- 這樣咱們規定小數點後面必須有兩位，若是你認爲太苛刻了，能夠這樣：^[0-9]+(.[0-9]{1,2})?$
- 這樣就容許用戶只寫一位小數。下面咱們該考慮數字中的逗號了，咱們能夠這樣：^[0-9]{1,3}(,[0-9]{3})*(.[0-9]{1,2})?$
- 1到3個數字，後面跟着任意個逗號+3個數字，逗號成爲可選，而不是必須：^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$
- 備註：這就是最終結果了，別忘了」+」能夠用」*」替代。若是你以爲空字符串也能夠接受的話(奇怪，爲何?)最後，別忘了在用函數時去掉去掉那個反斜槓，通常的錯誤都在這裏
xml文件：^([a-zA-Z]+-?)+[a-zA-Z0-9]+\\.[x|X][m|M][l|L]$
中文字符的正則表達式：[\u4e00-\u9fa5]
雙字節字符：[^\x00-\xff] (包括漢字在內，能夠用來計算字符串的長度(一個雙字節字符長度計2，ASCII字符計1))
空白行的正則表達式：\n\s*\r (能夠用來刪除空白行)
HTML標記的正則表達式：<(\S*?)[^>]*>.*?</\1>|<.*? /> (網上流傳的版本太糟糕，上面這個也僅僅能部分，對於複雜的嵌套標記依舊無能爲力)
首尾空白字符的正則表達式：^\s*|\s*$或(^\s*)|(\s*$) (能夠用來刪除行首行尾的空白字符(包括空格、製表符、換頁符等等)，很是有用的表達式)
騰訊QQ號：[1-9][0-9]{4,} (騰訊QQ號從10000開始)
中國郵政編碼：[1-9]\d{5}(?!\d) (中國郵政編碼爲6位數字)
IP地址：\d+\.\d+\.\d+\.\d+ (提取IP地址時有用)
IP地址：((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?