javascript表單驗證以及正則表達式舉例詳解
更新時間：2023年05月27日 09:14:48 作者：笑談子云亭
正則表達式描述了一種字符串匹配的模式,可以用來檢查一個串是否含有某種子串、將匹配的子串替換或者從某個串中取出符合某個條件的子串等,常用于表單驗證等,下面這篇文章主要給大家介紹了關于javascript表單驗證以及正則表達式的相關資料,需要的朋友可以參考下
1、表單驗證的場景與意義
1.1、降低服務器壓力
攔截不合格數據，避免直接提交到服務器，可以顯著降低服務器開銷
1.2、提升用戶體驗
早期的互聯網，表單項非常多，注冊賬號需要填寫20+字段。而其中有一個填寫不正確就需要等待幾十秒。如果有了表單驗證，反饋是實時的，而且腳本還能把你定位到填寫錯誤的具體字段。現在雖然無刷新技術早已普及，但是只依賴服務端進行驗證，還是會有幾百毫秒的延遲，實際使用時會有一種很嚴重的粘滯感。
2、表單驗證常用事件與屬性
表單經常要做一些非空、長度、合法性驗證。
<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 正則表達式模式
方括號用于查找某個范圍內字符。
表達式 | 描述 |
[a-z] | 查找方括號之間的任何字符 |
[0-9] | 查找任何0-9之間的數字 |
(x|y) | 查找任何以|分隔的選項 |
元字符是擁有特殊含義的字符
元字符 | 描述 |
\d | 查找數字 |
\s | 查找空白字符 |
\b | 匹配單詞邊界 |
\uxxx | 查找以十六進制數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位數身份證正則表達式：
* 編碼規(guī)則順序從左至右依次為6位數字地址碼，6位數字出生年份后兩位及日期，3為數字順序碼。
* [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位數身份證正則表達式：
* 編碼規(guī)則順序從左至右依次為6位數字地址碼，8位數字出生年份日期碼，3位數字順序碼，1位數字校驗碼(可為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;
}
/*是否是小數*/
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位數字組成*/
function isNum(str){
var reg=/^[0-9]{8}$/;
return reg.test(str);
}
/*校驗手機號*/
function isPhoneNum(str){
//如果你要精準驗證手機號碼，那個你可以使用第一個正則。這是根據電信，移動，聯通目前發(fā)行的號碼來的，驗證比較精準。
var reg=/^1[3|4|5|7|8][0-9]{9}$/;
//如果因為現有號碼不能滿足市場需求，電信服務商會增大號碼范圍。所以一般情況下我們只要驗證手機號碼為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;
}
}總結
到此這篇關于javascript表單驗證以及正則表達式的文章就介紹到這了,更多相關js表單驗證及正則表達式內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了javascript插件開發(fā)的一些感想和心得,需要的朋友可以參考下2016-02-02
方法重載是指在一個類中定義多個同名的方法，但要求每個方法具有不同的參數的類型或參數的個數。簡而言之就是：方法重載就是方法名稱重復，加載參數不同2018-04-04
這篇文章主要介紹了javascript定時器完整實現方法,以實例形式分析了定時器的嵌套調用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了Javascript文本框腳本實現方法解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-10-10
這篇文章主要介紹了javascript如何合并多層級數組問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
微信小程序彈窗是小程序在需要提示用戶的時候,顯示的一種交互形式,下面這篇文章主要給大家介紹了關于微信小程序四種彈窗方式的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了element-ui?dialog彈窗增加全屏功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細介紹了使用localStorage替代cookie做本地存儲，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
websocket是H5才開始提供的一種在單個TCP連接上進行全雙工通訊的協議,下面這篇文章主要給大家介紹了關于JS前端中WebSocket使用的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03
最近萌生了用ECMAScript6寫一個輪播圖的想法，以前就知道ECMAScript6，但是一直沒有學，現在終于下決心學了，本篇文章會總結在實踐中用到的ES6的知識。2016-08-08