溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹JS怎么使用正則表達式判斷輸入框失去焦點事件，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
效果圖
項目的正則表達式規則
1:用戶名: 大寫字母開頭 6-20位字符(不允許有符號但是允許有_)
2:密碼 大寫開頭 數字字母符號混合 8-15位
3:確認密碼 大寫開頭 數字字母符號混合 8-15位
4:郵箱 郵箱格式
5:手機號 手機號格式
6:身份證號 身份證號格式
7:地址 中文開頭 數字 - 字母 中文混合
項目目錄
html代碼
由于無法上傳bootstrap.min.css
需要樣式的需要前往官網下載
bootstrap中文網
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="js/reg.js"></script>
</head>
<body>
<form class="form-horizontal col-md-offset-3" role="form">
<div class="form-group">
<div class="col-md-offset-3">
<h3>正則表達式</h3>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">用戶名</label>
<div class="col-lg-3">
<input class="form-control" id="UserName" name="UserName" type="text" onfocusout="verify(UserName)">
</div>
<span id="UserNames" ></span>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">密碼</label>
<div class="col-lg-3">
<input class="form-control" id="pwd" name="pwd" type="text" onfocusout="verify(pwd)">
</div>
<span id="pwds" ></span>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">確認密碼</label>
<div class="col-lg-3">
<input class="form-control" id="affirmPwd" name="affirmPwd" type="text" onfocusout="verify(affirmPwd)">
</div>
<span id="affirmPwds" ></span>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">郵箱</label>
<div class="col-lg-3">
<input class="form-control" type="text" id="email" name="email" onfocusout="verify(email)">
</div>
<span id="emails" ></span>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">手機號</label>
<div class="col-lg-3">
<input class="form-control" type="text" id="cellPhone" name="cellPhone" onfocusout="verify(cellPhone)">
</div>
<span id="cellPhones" ></span>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">身份證號</label>
<div class="col-lg-3">
<input class="form-control" id="identityCard" name="identityCard" type="text" onfocusout="verify(identityCard)">
</div>
<span id="identityCards" ></span>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">地址</label>
<div class="col-lg-3">
<input class="form-control" id="site" name="site" type="text" onfocusout="verify(site)">
</div>
<span id="sites" ></span>
</div>
<div class="form-group">
<div class="col-lg-3 col-md-offset-3">
<input type="button" class="btn btn-primary btn-lg" value="校驗" onclick="OnClick()">
</div>
</div>
</form>
<script type="text/javascript">
var ID = "";
function verify(ID) {
//設置一個ID用來傳參
switch (ID) {
//根據傳過來的input的"ID"判斷進行不同的正則表達式驗證
//用戶名驗證
case UserName:
//用戶名的正則表達式
var UserNameRule = /^[A-Z][a-zA-Z0-9_]{6,20}$/;
//調用下面的編寫的js方法,傳入input的id和正則表達式
reg("UserName", UserNameRule);
break;
case pwd:
//密碼驗證
var pwdRule = /^[A-Z][a-zA-Z0-9_]{8,15}$/;
reg("pwd", pwdRule);
break;
case affirmPwd:
//密碼確認驗證
var affirmPwdRule = /^[A-Z][a-zA-Z0-9_]{8,15}$/;
reg("affirmPwd", affirmPwdRule);
break;
case email:
//郵箱驗證
var emailRule = /^[A-z0-9]+@[a-z0-9]+.com$/;
reg("email", emailRule);
break;
case cellPhone:
// 手機號驗證
var cellPhoneRule = /^(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}$/;
reg("cellPhone", cellPhoneRule);
break;
case identityCard:
//身份證號驗證
var identityCardRule = /^([1-9]){1}[0-9]{17}|[1-9]{1}[0-9]{16}(x|X)?$/;
reg("identityCard", identityCardRule);
break;
case site:
//地址驗證
var siteRule = /^[\u4e00-\u9fa5]+[\u4E00-\u9FA5A-Za-z0-9_]+$/;
reg("site", siteRule);
break;
//設置特殊情況
default:
alert("操作錯誤！請關閉網頁")
break;
}
}
//提交驗證判斷是否都符合正則表達式
function OnClick(){
//獲取所有的span標簽
var a = document.getElementsByTagName("span");
var str = "";
//循環獲取span的內容
for (var i = 0; i < a.length; i++) {
str+=a[i].innerText;
}
if(str == "√√√√√√√"){
alert("輸入正確");
}else{
alert("輸入錯誤");
}
}
</script>
</body>
</html>js代碼
//輸入框的校驗
/**輸入框的校驗 消息顯示區域的ID 必須按照eleId+"s"
* @param {Object} eleId
* @param {Object} rule
*/
function reg(eleId,rule){
//動態的添加一個消息顯示標簽
var inputValue = document.getElementById(eleId).value;
var result = rule.test(inputValue.trim());
if(result && inputValue != ""){
document.getElementById(eleId+"s").innerHTML="√";
document.getElementById(eleId+"s").style.color="green";
}else{
document.getElementById(eleId+"s").innerHTML="×";
document.getElementById(eleId+"s").style.color="red";
}
}以上是“JS怎么使用正則表達式判斷輸入框失去焦點事件”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
