javascript表單驗(yàn)證以及正則表達(dá)式舉例詳解
更新時(shí)間：2023年05月27日 09:14:48 作者：笑談子云亭
正則表達(dá)式描述了一種字符串匹配的模式,可以用來檢查一個(gè)串是否含有某種子串、將匹配的子串替換或者從某個(gè)串中取出符合某個(gè)條件的子串等,常用于表單驗(yàn)證等,下面這篇文章主要給大家介紹了關(guān)于javascript表單驗(yàn)證以及正則表達(dá)式的相關(guān)資料,需要的朋友可以參考下
1、表單驗(yàn)證的場景與意義
1.1、降低服務(wù)器壓力
攔截不合格數(shù)據(jù)，避免直接提交到服務(wù)器，可以顯著降低服務(wù)器開銷
1.2、提升用戶體驗(yàn)
早期的互聯(lián)網(wǎng)，表單項(xiàng)非常多，注冊(cè)賬號(hào)需要填寫20+字段。而其中有一個(gè)填寫不正確就需要等待幾十秒。如果有了表單驗(yàn)證，反饋是實(shí)時(shí)的，而且腳本還能把你定位到填寫錯(cuò)誤的具體字段。現(xiàn)在雖然無刷新技術(shù)早已普及，但是只依賴服務(wù)端進(jìn)行驗(yàn)證，還是會(huì)有幾百毫秒的延遲，實(shí)際使用時(shí)會(huì)有一種很嚴(yán)重的粘滯感。
2、表單驗(yàn)證常用事件與屬性
表單經(jī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="用戶名長度必須為大于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="密碼長度必須大于等于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">用戶名長度至少6位</span><br/>
*密碼:<input type="password" id="password1" placeholder="請(qǐng)輸入密碼" onblur="validatePwd()" />
<span id="pwdMsg1">密碼長度至少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)的簡寫
正則表達(dá)式(英語：Regular Expression,代碼中常常簡寫為regex、regexp或RE)使用單個(gè)字符串來描述、匹配符合某個(gè)句法規(guī)則的字符串搜索模式。搜索模式可用于文本搜索和文本替換。
3.2、語法
var reg=new RegExp(/正則表達(dá)式主體/,修飾符(可選)); 或者更簡單的方法 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("開課吧的漢語拼音為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} 順序碼三位，沒有校驗(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)碼來的，驗(yàn)證比較精準(zhǔn)。
var reg=/^1[3|4|5|7|8][0-9]{9}$/;
//如果因?yàn)楝F(xiàn)有號(hào)碼不能滿足市場需求，電信服務(wù)商會(huì)增大號(hào)碼范圍。所以一般情況下我們只要驗(yàn)證手機(jī)號(hào)碼為11為并且以1開頭。
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àn)證
- 最常用的15個(gè)前端表單驗(yàn)證JS正則表達(dá)式
- JavaScript 使用正則表達(dá)式進(jìn)行表單驗(yàn)證的示例代碼
- js正則表達(dá)式驗(yàn)證表單【完整版】
- js用正則表達(dá)式來驗(yàn)證表單(比較齊全的資源)
- JavaScript表單通過正則表達(dá)式驗(yàn)證電話號(hào)碼
- JS表單數(shù)據(jù)驗(yàn)證的正則表達(dá)式(常用)
- JavaScript常用的正則表達(dá)式表單驗(yàn)證代碼
相關(guān)文章
這篇文章主要介紹了javascript插件開發(fā)的一些感想和心得,需要的朋友可以參考下2016-02-02
妙用緩存調(diào)用鏈實(shí)現(xiàn)JS方法的重載
方法重載是指在一個(gè)類中定義多個(gè)同名的方法，但要求每個(gè)方法具有不同的參數(shù)的類型或參數(shù)的個(gè)數(shù)。簡而言之就是：方法重載就是方法名稱重復(fù)，加載參數(shù)不同2018-04-04
這篇文章主要介紹了javascript定時(shí)器完整實(shí)現(xiàn)方法,以實(shí)例形式分析了定時(shí)器的嵌套調(diào)用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
Javascript文本框腳本實(shí)現(xiàn)方法解析
這篇文章主要介紹了Javascript文本框腳本實(shí)現(xiàn)方法解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
這篇文章主要介紹了javascript如何合并多層級(jí)數(shù)組問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
微信小程序彈窗是小程序在需要提示用戶的時(shí)候,顯示的一種交互形式,下面這篇文章主要給大家介紹了關(guān)于微信小程序四種彈窗方式的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
這篇文章主要介紹了element-ui?dialog彈窗增加全屏功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-11-11
使用localStorage替代cookie做本地存儲(chǔ)
這篇文章主要為大家詳細(xì)介紹了使用localStorage替代cookie做本地存儲(chǔ)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
websocket是H5才開始提供的一種在單個(gè)TCP連接上進(jìn)行全雙工通訊的協(xié)議,下面這篇文章主要給大家介紹了關(guān)于JS前端中WebSocket使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
ECMAScript6輪播圖實(shí)踐知識(shí)總結(jié)
最近萌生了用ECMAScript6寫一個(gè)輪播圖的想法，以前就知道ECMAScript6，但是一直沒有學(xué)，現(xiàn)在終于下決心學(xué)了，本篇文章會(huì)總結(jié)在實(shí)踐中用到的ES6的知識(shí)。2016-08-08