javascript表單驗證以及正則表達式舉例詳解
更新時間：2023年05月27日 09:14:48 作者：笑談子云亭
正則表達式描述了一種字符串匹配的模式,可以用來檢查一個串是否含有某種子串、將匹配的子串替換或者從某個串中取出符合某個條件的子串等,常用于表單驗證等,下面這篇文章主要給大家介紹了關(guān)于javascript表單驗證以及正則表達式的相關(guān)資料,需要的朋友可以參考下
1、表單驗證的場景與意義
1.1、降低服務(wù)器壓力
攔截不合格數(shù)據(jù)，避免直接提交到服務(wù)器，可以顯著降低服務(wù)器開銷
1.2、提升用戶體驗
早期的互聯(lián)網(wǎng)，表單項非常多，注冊賬號需要填寫20+字段。而其中有一個填寫不正確就需要等待幾十秒。如果有了表單驗證，反饋是實時的，而且腳本還能把你定位到填寫錯誤的具體字段。現(xiàn)在雖然無刷新技術(shù)早已普及，但是只依賴服務(wù)端進行驗證，還是會有幾百毫秒的延遲，實際使用時會有一種很嚴重的粘滯感。
2、表單驗證常用事件與屬性
表單經(jīng)常要做一些非空、長度、合法性驗證。
<head>
<meta charset="UTF-8">
<title>表單驗證</title>
<script>
function validateName(){
//所有的表單項元素都是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("性別為必選項！");
return false;
}
return true;
}
function register(){
return validateName()&&validatePwd()&&confirmPwd()&&validateGender();
}
</script>
</head>
<body>
<h1>英雄會</h1>
<form action="1.html" method="get" onsubmit="return register()">
*用戶名:<input type="text" id="userName" placeholder="請輸入用戶名" onblur="validateName()" />
<span id="nameMsg">用戶名長度至少6位</span><br/>
*密碼:<input type="password" id="password1" placeholder="請輸入密碼" onblur="validatePwd()" />
<span id="pwdMsg1">密碼長度至少8位</span><br/>
*確認密碼:<input type="password" id="password2" placeholder="請確認密碼" onblur="confirmPwd()" />
<span id="pwdMsg2">確認密碼與密碼一致</span><br/>
*性別:<select id="gender">
<option value="-1">請選擇性別</option>
<option value="0">女</option>
<option value="1">男</option>
</select><br/>
<button type="submit">注冊</button>
<button type="reset">重置</button>
</form>
</body>3、JavaScript的RegExp對象-正則表達式
3.1、概念
RegExp:正則表達式(regular expression)的簡寫
正則表達式(英語：Regular Expression,代碼中常常簡寫為regex、regexp或RE)使用單個字符串來描述、匹配符合某個句法規(guī)則的字符串搜索模式。搜索模式可用于文本搜索和文本替換。
3.2、語法
var reg=new RegExp(/正則表達式主體/,修飾符(可選)); 或者更簡單的方法 var reg=/正則表達式主體/修飾符(可選); 案例: var reg=new RegExp(/kaikeba/i); var reg=/kaikeba/i;//此處定義了一個一個正則表達式 kaikeba 是一個正則表達式主體(用于檢索) i 是一個修飾符(搜索不區(qū)分大小寫)
3.3 修飾符
可以在全局搜索中不區(qū)分大小寫
修飾符 | 描述 |
i | 執(zhí)行對大小寫不敏感的匹配 |
g | 執(zhí)行全局匹配（查找所有匹配而非在找到第一個匹配后停止） |
m | 執(zhí)行多行匹配 |
3.4 正則表達式模式
方括號用于查找某個范圍內(nèi)字符。
表達式 | 描述 |
[a-z] | 查找方括號之間的任何字符 |
[0-9] | 查找任何0-9之間的數(shù)字 |
(x|y) | 查找任何以|分隔的選項 |
元字符是擁有特殊含義的字符
元字符 | 描述 |
\d | 查找數(shù)字 |
\s | 查找空白字符 |
\b | 匹配單詞邊界 |
\uxxx | 查找以十六進制數(shù)XXX規(guī)定的unicode字符 |
量詞：
量詞 | 描述 |
n+ | 匹配任何包含至少一個n的字符串。 |
n* | 匹配任何包含0個或者多個n的字符串。 |
n? | 匹配任何包含0個或者一個n的字符串。 |
3.5 正則表達式的方法test(str)
test()用于檢測一個字符串是否匹配某個模式，如果字符串中含有匹配文本，則返回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、 常用正則表達式
/* 檢查輸入的身份證號是否正確 */
function checkCard(str){
/**
* 15位數(shù)身份證正則表達式：
* 編碼規(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} 順序碼三位，沒有校驗碼
*/
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ù)身份證正則表達式：
* 編碼規(guī)則順序從左至右依次為6位數(shù)字地址碼，8位數(shù)字出生年份日期碼，3位數(shù)字順序碼，1位數(shù)字校驗碼(可為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] 順序碼三位+一位校驗碼
*/
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);
}
/*校驗是否中文名稱組成*/
function ischina(str){
var reg=/^[\u4E00-\u9FA5]{2,4}$/;
return reg.test(str);
}
/*檢驗是否全由8位數(shù)字組成*/
function isNum(str){
var reg=/^[0-9]{8}$/;
return reg.test(str);
}
/*校驗手機號*/
function isPhoneNum(str){
//如果你要精準驗證手機號碼，那個你可以使用第一個正則。這是根據(jù)電信，移動，聯(lián)通目前發(fā)行的號碼來的，驗證比較精準。
var reg=/^1[3|4|5|7|8][0-9]{9}$/;
//如果因為現(xiàn)有號碼不能滿足市場需求，電信服務(wù)商會增大號碼范圍。所以一般情況下我們只要驗證手機號碼為11為并且以1開頭。
var reg=/^1[0-9]{10}$/;
return reg.test(str);
}
/*檢驗右鍵地址是否合法*/
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表單驗證以及正則表達式的文章就介紹到這了,更多相關(guān)js表單驗證及正則表達式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了javascript插件開發(fā)的一些感想和心得,需要的朋友可以參考下2016-02-02
方法重載是指在一個類中定義多個同名的方法，但要求每個方法具有不同的參數(shù)的類型或參數(shù)的個數(shù)。簡而言之就是：方法重載就是方法名稱重復(fù)，加載參數(shù)不同2018-04-04
這篇文章主要介紹了javascript定時器完整實現(xiàn)方法,以實例形式分析了定時器的嵌套調(diào)用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了Javascript文本框腳本實現(xiàn)方法解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-10-10
這篇文章主要介紹了javascript如何合并多層級數(shù)組問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
微信小程序彈窗是小程序在需要提示用戶的時候,顯示的一種交互形式,下面這篇文章主要給大家介紹了關(guān)于微信小程序四種彈窗方式的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了element-ui?dialog彈窗增加全屏功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細介紹了使用localStorage替代cookie做本地存儲，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
websocket是H5才開始提供的一種在單個TCP連接上進行全雙工通訊的協(xié)議,下面這篇文章主要給大家介紹了關(guān)于JS前端中WebSocket使用的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03
最近萌生了用ECMAScript6寫一個輪播圖的想法，以前就知道ECMAScript6，但是一直沒有學(xué)，現(xiàn)在終于下決心學(xué)了，本篇文章會總結(jié)在實踐中用到的ES6的知識。2016-08-08