javascript表單驗(yàn)證以及正則表達(dá)式舉例詳解
更新時(shí)間：2023年05月27日 09:14:48 作者：笑談子云亭
正則表達(dá)式描述了一種字符串匹配的模式,可以用來(lái)檢查一個(gè)串是否含有某種子串、將匹配的子串替換或者從某個(gè)串中取出符合某個(gè)條件的子串等,常用于表單驗(yàn)證等,下面這篇文章主要給大家介紹了關(guān)于javascript表單驗(yàn)證以及正則表達(dá)式的相關(guān)資料,需要的朋友可以參考下
1、表單驗(yàn)證的場(chǎng)景與意義
1.1、降低服務(wù)器壓力
攔截不合格數(shù)據(jù)，避免直接提交到服務(wù)器，可以顯著降低服務(wù)器開(kāi)銷
1.2、提升用戶體驗(yàn)
早期的互聯(lián)網(wǎng)，表單項(xiàng)非常多，注冊(cè)賬號(hào)需要填寫20+字段。而其中有一個(gè)填寫不正確就需要等待幾十秒。如果有了表單驗(yàn)證，反饋是實(shí)時(shí)的，而且腳本還能把你定位到填寫錯(cuò)誤的具體字段?，F(xiàn)在雖然無(wú)刷新技術(shù)早已普及，但是只依賴服務(wù)端進(jìn)行驗(yàn)證，還是會(huì)有幾百毫秒的延遲，實(shí)際使用時(shí)會(huì)有一種很嚴(yán)重的粘滯感。
2、表單驗(yàn)證常用事件與屬性
表單經(jīng)常要做一些非空、長(zhǎng)度、合法性驗(yàn)證。
<head>
<meta charset="UTF-8">
<title>表單驗(yàn)證</title>
<script>
function validateName(){
//所有的表單項(xiàng)元素都是value屬性
var name=document.getElementById("userName").value;
var msg=document.getElementById("nameMsg");
if(name==null||name==""){
msg.innerHTML="用戶名不能為空！";
msg.style.color="red";
return false;
}else if(name.length<6){
msg.innerHTML="用戶名長(zhǎng)度必須為大于6的！";
msg.style.color="red";
return false;
}
msg.innerHTML="用戶名可用";
msg.style.color="green";
return true;
}
function validatePwd(){
var password1=document.getElementById("password1").value;
var msg=document.getElementById("pwdMsg1");
if(password1==null||password1==""){
msg.innerHTML="密碼不能為空!";
msg.style.color="red";
return false;
}else if(password1.length<8){
msg.innerHTML="密碼長(zhǎng)度必須大于等于8";
msg.style.color="red";
return false;
}
msg.innerHTML="密碼合法";
msg.style.color="green";
return true;
}
function confirmPwd(){
var pwd1=document.getElementById("password1").value;
var pwd2=document.getElementById("password2").value;
var msg=document.getElementById("pwdMsg2");
if(pwd1!=pwd2){
msg.innerHTML="兩次輸入的密碼不一致！";
msg.style.color="red";
return false;
}
msg.innerHTML="兩次輸入的密碼一致";
msg.style.color="green";
return true;
}
function validateGender(){
var gender=document.getElementById("gender").value;
if(gender==-1){
alert("性別為必選項(xiàng)！");
return false;
}
return true;
}
function register(){
return validateName()&&validatePwd()&&confirmPwd()&&validateGender();
}
</script>
</head>
<body>
<h1>英雄會(huì)</h1>
<form action="1.html" method="get" onsubmit="return register()">
*用戶名:<input type="text" id="userName" placeholder="請(qǐng)輸入用戶名" onblur="validateName()" />
<span id="nameMsg">用戶名長(zhǎng)度至少6位</span><br/>
*密碼:<input type="password" id="password1" placeholder="請(qǐng)輸入密碼" onblur="validatePwd()" />
<span id="pwdMsg1">密碼長(zhǎng)度至少8位</span><br/>
*確認(rèn)密碼:<input type="password" id="password2" placeholder="請(qǐng)確認(rèn)密碼" onblur="confirmPwd()" />
<span id="pwdMsg2">確認(rèn)密碼與密碼一致</span><br/>
*性別:<select id="gender">
<option value="-1">請(qǐng)選擇性別</option>
<option value="0">女</option>
<option value="1">男</option>
</select><br/>
<button type="submit">注冊(cè)</button>
<button type="reset">重置</button>
</form>
</body>3、JavaScript的RegExp對(duì)象-正則表達(dá)式
3.1、概念
RegExp:正則表達(dá)式(regular expression)的簡(jiǎn)寫
正則表達(dá)式(英語(yǔ)：Regular Expression,代碼中常常簡(jiǎn)寫為regex、regexp或RE)使用單個(gè)字符串來(lái)描述、匹配符合某個(gè)句法規(guī)則的字符串搜索模式。搜索模式可用于文本搜索和文本替換。
3.2、語(yǔ)法
var reg=new RegExp(/正則表達(dá)式主體/,修飾符(可選)); 或者更簡(jiǎn)單的方法 var reg=/正則表達(dá)式主體/修飾符(可選); 案例: var reg=new RegExp(/kaikeba/i); var reg=/kaikeba/i;//此處定義了一個(gè)一個(gè)正則表達(dá)式 kaikeba 是一個(gè)正則表達(dá)式主體(用于檢索) i 是一個(gè)修飾符(搜索不區(qū)分大小寫)
3.3 修飾符
可以在全局搜索中不區(qū)分大小寫
修飾符 | 描述 |
i | 執(zhí)行對(duì)大小寫不敏感的匹配 |
g | 執(zhí)行全局匹配（查找所有匹配而非在找到第一個(gè)匹配后停止） |
m | 執(zhí)行多行匹配 |
3.4 正則表達(dá)式模式
方括號(hào)用于查找某個(gè)范圍內(nèi)字符。
表達(dá)式 | 描述 |
[a-z] | 查找方括號(hào)之間的任何字符 |
[0-9] | 查找任何0-9之間的數(shù)字 |
(x|y) | 查找任何以|分隔的選項(xiàng) |
元字符是擁有特殊含義的字符
元字符 | 描述 |
\d | 查找數(shù)字 |
\s | 查找空白字符 |
\b | 匹配單詞邊界 |
\uxxx | 查找以十六進(jìn)制數(shù)XXX規(guī)定的unicode字符 |
量詞：
量詞 | 描述 |
n+ | 匹配任何包含至少一個(gè)n的字符串。 |
n* | 匹配任何包含0個(gè)或者多個(gè)n的字符串。 |
n? | 匹配任何包含0個(gè)或者一個(gè)n的字符串。 |
3.5 正則表達(dá)式的方法test(str)
test()用于檢測(cè)一個(gè)字符串是否匹配某個(gè)模式，如果字符串中含有匹配文本，則返回true，否則返回false。
var reg=/kaikeba/i;
var res=reg.test("開(kāi)課吧的漢語(yǔ)拼音為kaikeba");
console.log(res);//true
var reg=/^[a-zA-Z]+[\u4e00-\u9fa5]*[0-9]$/;
var str="a公司拼音為9";
var res=reg.test(str);
console.log(res);//true
console.log(reg.test("a你好239"));//false4、 常用正則表達(dá)式
/* 檢查輸入的身份證號(hào)是否正確 */
function checkCard(str){
/**
* 15位數(shù)身份證正則表達(dá)式：
* 編碼規(guī)則順序從左至右依次為6位數(shù)字地址碼，6位數(shù)字出生年份后兩位及日期，3為數(shù)字順序碼。
* [1-9]\d{5} 前六位地區(qū)，非0打頭
* \d{2} 出生年份后兩位00-99
* ((0[1-9])|(10|11|12)) 月份，01-12月
* (([0-2][1-9])|10|20|30|31) 日期，01-31天
* \d{3} 順序碼三位，沒(méi)有校驗(yàn)碼
*/
if(str==null||(str.length!=15&&str.length!=18)){
return false;
}
var arg1=/^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$/;
if(str.length==15&&!arg1.test(str)){
return false;
}
/**
* 18位數(shù)身份證正則表達(dá)式：
* 編碼規(guī)則順序從左至右依次為6位數(shù)字地址碼，8位數(shù)字出生年份日期碼，3位數(shù)字順序碼，1位數(shù)字校驗(yàn)碼(可為X)。
* [1-9]\d{5} 前六位地區(qū)，非0打頭
* (18|19|([23]\d))\d{2} 出生年份，覆蓋范圍1800-3999年
* ((0[1-9])|(10|11|12)) 月份，01-12月
* (([0-2][1-9])|10|20|30|31) 日期，01-31天
* \d{3}[0-9Xx] 順序碼三位+一位校驗(yàn)碼
*/
var arg2=/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
if(str.length==18 && !arg2.test(str)){
return false;
}
return true;
}
/*是否是小數(shù)*/
function isDecimal(strValue){
var objRegExp=/^\d+\.\d+$/;
return objRegExp.test(strValue);
}
/*校驗(yàn)是否中文名稱組成*/
function ischina(str){
var reg=/^[\u4E00-\u9FA5]{2,4}$/;
return reg.test(str);
}
/*檢驗(yàn)是否全由8位數(shù)字組成*/
function isNum(str){
var reg=/^[0-9]{8}$/;
return reg.test(str);
}
/*校驗(yàn)手機(jī)號(hào)*/
function isPhoneNum(str){
//如果你要精準(zhǔn)驗(yàn)證手機(jī)號(hào)碼，那個(gè)你可以使用第一個(gè)正則。這是根據(jù)電信，移動(dòng)，聯(lián)通目前發(fā)行的號(hào)碼來(lái)的，驗(yàn)證比較精準(zhǔn)。
var reg=/^1[3|4|5|7|8][0-9]{9}$/;
//如果因?yàn)楝F(xiàn)有號(hào)碼不能滿足市場(chǎng)需求，電信服務(wù)商會(huì)增大號(hào)碼范圍。所以一般情況下我們只要驗(yàn)證手機(jī)號(hào)碼為11為并且以1開(kāi)頭。
var reg=/^1[0-9]{10}$/;
return reg.test(str);
}
/*檢驗(yàn)右鍵地址是否合法*/
function IsEmail(str){
var reg=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
return reg.test(str);
}
/*檢查輸入的URL地址是否正確*/
function checkURL(str){
if(str.match(/http(s)?:\/\/[\w.]+[\w\/]*[\w.]*\??[\w=&\+\%]*/i)==null){
return false;
}else{
return true;
}
}總結(jié)
到此這篇關(guān)于javascript表單驗(yàn)證以及正則表達(dá)式的文章就介紹到這了,更多相關(guān)js表單驗(yàn)證及正則表達(dá)式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- js 常用正則表達(dá)式表單驗(yàn)證代碼
- JavaScript 表單驗(yàn)證正則表達(dá)式大全[推薦]
- js正則表達(dá)式注冊(cè)頁(yè)面表單驗(yàn)證
- 最常用的15個(gè)前端表單驗(yàn)證JS正則表達(dá)式
- JavaScript 使用正則表達(dá)式進(jìn)行表單驗(yàn)證的示例代碼
- js正則表達(dá)式驗(yàn)證表單【完整版】
- js用正則表達(dá)式來(lái)驗(yàn)證表單(比較齊全的資源)
- JavaScript表單通過(guò)正則表達(dá)式驗(yàn)證電話號(hào)碼
- JS表單數(shù)據(jù)驗(yàn)證的正則表達(dá)式(常用)
- JavaScript常用的正則表達(dá)式表單驗(yàn)證代碼
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了多種方式實(shí)現(xiàn)js圖片預(yù)覽,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
uniapp?Android解決?APP菜單、按鈕權(quán)限控制方法
這篇文章主要介紹了uniapp?Android解決?APP菜單、按鈕權(quán)限控制方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
開(kāi)發(fā)人員在javascript類中為實(shí)例中需要的任何書(shū)籍創(chuàng)建屬性，但是如果實(shí)例中可用之前需要計(jì)算某些數(shù)據(jù)該如何處理呢，今天小編通過(guò)本文給大家分享JavaScript 中的延遲加載屬性模式，一起看看吧2021-06-06
下面小編就為大家?guī)?lái)一篇JavaScript數(shù)組去重的幾方法推薦。小編覺(jué)得聽(tīng)錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看2021-09-09
由于現(xiàn)在的很多用戶的分辨率問(wèn)題，導(dǎo)致很多廣告會(huì)遮擋內(nèi)容或者對(duì)于不同分辨率的用戶不同的css樣式，就可以參考下面的代碼2013-07-07
這篇文章給大家介紹IE6兼容透明背景圖片以及在IE6中的透明圖片不是透明顯示的解決方案,有需要的朋友可以參考下2015-08-08
js實(shí)現(xiàn)按一下刪除鍵刪除整個(gè)單詞附demo
使用代碼實(shí)現(xiàn)當(dāng)刪除單詞時(shí)就一次性刪除整個(gè)單詞，有個(gè)demo，相信大家看過(guò)之后就知道是什么意思了2014-09-09
JavaScript之class繼承_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了JavaScript之class繼承，新的關(guān)鍵字class從ES6開(kāi)始正式被引入到JavaScript中。class的目的就是讓定義類更簡(jiǎn)單，有興趣的可以了解一下2017-07-07
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)滑動(dòng)插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
JavaScript 早已不只是一門寫寫網(wǎng)頁(yè)特效的腳本語(yǔ)言了，如今廣泛用于網(wǎng)站的前端交互。2011-04-04