“這裡是雲端源想IT，幫你輕松學IT”
嗨~ 今天的你過得還好嗎？
如果你趕不上淩晨五點的日出
你不妨看看傍晚六點的夕陽
我的意思是
你可以選擇後者
- 2023.06.30 -
說起正規表達式大家應該都不陌生，今天小編給大家找了一個JavaScript正規表達式的練習，利用正規表達式進行注冊資訊格式驗證，快打開你的電腦一起來練習試試吧！
注冊資訊界面如下：
需求格式要求如下，開始練習前，大家要仔細閱讀要求哦！
格式要求：
1、學号項不能為空，必須為純數字，不能與資料庫中的重複，正規表達式/^\d+$/g；
2、姓名項不能為空；
3、密碼不能為空且無空格判斷空格text.split(" ").length != 1，安全等級分為3個等級：
- 若全為字母或者數字為1級，正規表達式(text.search(/^[a-zA-Z]+$/g) != -1) || (text.search(/^[0-9]+$/g) != -1，
- 若隻有标點符号或标點與字母或者數字同時出現則為2級，正規表達式text.search(/^[a-zA-Z0-9]+$/g) != -1，
- 若字母、數字和标點同時出現則為3級；
4、确認密碼項要求與密碼項填寫的密碼一緻；
5、年級項不能為空，且格式必須為第20**級，正規表達式text.search(/^\u7B2C{1}20\d+\u7EA7{1}$/) != -1；
6、專業項不能為空，且隻能以漢字開頭，結尾可以為漢字或者字母正規表達式text.search(/^[\u4e00-\u9fa5]+[a-zA-Z]*$/g) != -1；
7、班級項不能為空且格式為專業+班級即類似電信1001格，正規表達式text.search(/^[\u4e00-\u9fa5]+\d{4}$/) != -1；
8、手機項可以為空，格式為(+86)1*********正規表達式text.search(/^(\+86)?1\d{10}$/) != -1。
運作效果：
正确格式輸入後運作效果：
下面小編将參考代碼奉上，聽我的！先自己試着敲代碼運作試試，實在不會了再看答案哦！
html代碼：
<!--register-->
<div style="display:block">
<div>
<span style=" font-weight: bold;"><label>注冊</label></span>
</div>
<div>
<span class="input_span"><label class="text_label">學号</label><label class="text_label" style="color:Red;">*</label></span>
<span class="input_span"><input type="text" id="studentNum_input" οnblur="checkRegisterInfo(1)"/></span>
<span><label id="studentNumCheck_label"></label></span>
</div>
<div>
<span class="input_span"><label class="text_label">姓名</label><label class="text_label" style="color:Red;">*</label></span>
<span class="input_span"><input type="text" id="name_input" οnblur="checkRegisterInfo(2)"/></span>
<span><label id="nameCheck_label"></label></span>
</div>
<div>
<span class="input_span"><label class="text_label">密碼</label><label class="text_label" style="color:Red;">*</label></span>
<span class="input_span"><input type="password" id="passwd_rigester_input" οnblur="checkRegisterInfo(3)"/></span>
<span><label id="passwdCheck_label"></label></span>
</div>
<div>
<span class="input_span" id="confirmpasswd_span"><label>确認密碼</label><label class="text_label" style="color:Red;"> *</label></span>
<span class="input_span"><input type="password" id="confirmPasswd_input" οnblur="checkRegisterInfo(4)"/></span>
<span><label id="confirmPasswdCheck_label"></label></span>
</div>
<div>
<span class="input_span"><label class="text_label">年級</label><label class="text_label" style="color:Red;">*</label></span>
<span class="input_span"><input type="text" id="grade_input" οnblur="checkRegisterInfo(5)"/></span>
<span><label id="gradeCheck_label">格式:第20**級</label></span>
</div>
<div>
<span class="input_span"><label class="text_label">專業</label><label class="text_label" style="color:Red;">*</label></span>
<span class="input_span"><input type="text" id="major_input" οnblur="checkRegisterInfo(6)"/></span>
<span><label id="majorCheck_label"></label></span>
</div>
<div>
<span class="input_span"><label class="text_label">班級</label><label class="text_label" style="color:Red;">*</label></span>
<span class="input_span"><input type="text" id="class_input" οnblur="checkRegisterInfo(7)"/></span>
<span><label id="classCheck_label">格式:電信1001</label></span>
</div>
<div>
<span class="input_span" id="phone_span"><label class="text_label">手機</label></span>
<span class="input_span"><input type="text" id="phone_input" οnblur="checkRegisterInfo(8)"/></span>
<span><label id="phoneCheck_label"></label></span>
</div>
<div class="button_div"><span><input id="register_button" type="button" οnclick="summitRegisterInfo()" value="使用者注冊"/></span></div>
</div>
<!--end register-->
</div>
就知道有的人會直接看答案~
代碼比較長，大家有耐心一點，看了答案也要自己再敲一遍哦，這樣你的體會将更深刻。
JS驗證源代碼：
/*
* 功能： 驗證注冊資訊是否合法，在每次<input>控件失去聚焦時調用
* 參數： num 控件編号，訓示是哪個控件觸發了該函數
* 傳回值： 如果全部合法傳回true,否則給予響應的錯誤提示并傳回false
*/
function checkRegisterInfo(num) {
var text;
switch (num) {
//當點選送出按鈕時校驗必填項是否為空,防止直接點選送出按鈕
case 0:
if (document.getElementById("studentNum_input").value == ""
|| document.getElementById("name_input").value == ""
|| document.getElementById("passwd_rigester_input").value == ""
|| document.getElementById("confirmPasswd_input").value == ""
|| document.getElementById("grade_input").value == ""
|| document.getElementById("major_input").value == ""
|| document.getElementById("class_input").value == "") {
alert("注冊失敗,打*号的項不能為空!");
return false;
}
else
return true;
break;
//驗證學号
case 1:
text = document.getElementById("studentNum_input").value;
var check = document.getElementById("studentNumCheck_label");
//驗證是否為空
if (text == "") {
check.style.color = "red";
check.innerText = "學号項不能為空!";
}
//驗證格式
else if (text.search(/^\d+$/g) == -1) {
check.style.color = "red";
check.innerText = "學号應為純數字!";
}
else {
//驗證學号的唯一性
var xmlHttp = createXmlHttp();
xmlHttp.open("get", "Ajax.aspx?met=rigesterInfo&data=" + escape(text), true);
xmlHttp.send(null);
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 & xmlHttp.status == 200) {
//伺服器傳回true表示該學号可用
if (xmlHttp.responseText) {
check.style.color = "yellow";
check.innerText = "恭喜您,該學号可用!";
}
else {
check.style.color = "red";
check.innerText = "您輸入的學号已存在，請重新輸入!";
}
}
}
}
break;
//驗證姓名
case 2:
text = document.getElementById("name_input").value;
var check = document.getElementById("nameCheck_label");
if (text == "") {
check.style.color = "red";
check.innerText = "名字項不能為空!";
}
else {
check.style.color = "yellow";
check.innerText = "名字項填寫正确!";
}
break;
//驗證密碼
case 3:
text = document.getElementById("passwd_rigester_input").value;
var check = document.getElementById("passwdCheck_label");
if (text == "") {
check.style.color = "red";
check.innerText = "密碼項不能為空!";
}
//密碼中隻能有數字、字母和标點符号
else if (text.split(" ").length != 1) {
check.style.color = "red";
check.innerText = "密碼中不能出現空格!";
}
else {
//驗證密碼的安全級數,純數字或純字母或純标點為1級，字母+數字為2級，字母或數字任意一個+标點為3級
if ((text.search(/^[a-zA-Z]+$/g) != -1) || (text.search(/^[0-9]+$/g) != -1)) {
check.style.color = "yellow";
check.innerText = "密碼安全級别為1級!";
}
else if (text.search(/^[a-zA-Z0-9]+$/g) != -1) {
check.style.color = "yellow";
check.innerText = "密碼安全級别為2級!";
}
else {
check.style.color = "yellow";
check.innerText = "密碼安全級别為3級!";
}
}
break;
//驗證确認密碼
case 4:
text = document.getElementById("confirmPasswd_input").value;
var check = document.getElementById("confirmPasswdCheck_label");
if (text != document.getElementById("passwd_rigester_input").value) {
check.style.color = "red";
check.innerText = "兩次密碼輸入不一緻!";
}
else {
check.style.color = "yellow";
check.innerText = "密碼确認正确!";
}
break;
//驗證年級
case 5:
text = document.getElementById("grade_input").value;
var check = document.getElementById("gradeCheck_label");
if (text == "") {
check.style.color = "red";
check.innerText = "年級項不能為空!";
}
else if (text.search(/^\u7B2C{1}20\d+\u7EA7{1}$/) != -1) {
check.style.color = "yellow";
check.innerText = "年級項填寫正确!";
}
else {
check.style.color = "red";
check.innerText = "年級項格式為:第20**級!";
}
break;
//驗證專業
case 6:
text = document.getElementById("major_input").value;
var check = document.getElementById("majorCheck_label");
if (text == "") {
check.style.color = "red";
check.innerText = "專業項不能為空!";
}
else if (text.search(/^[\u4e00-\u9fa5]+[a-zA-Z]*$/g) != -1) {
check.style.color = "yellow";
check.innerText = "專業項填寫正确!";
}
else {
check.style.color = "red";
check.innerText = "專業項填寫不正确!";
}
break;
//驗證班級
case 7:
text = document.getElementById("class_input").value;
var check = document.getElementById("classCheck_label");
if (text == "") {
check.style.color = "red";
check.innerText = "班級項不能為空!";
}
else if (text.search(/^[\u4e00-\u9fa5]+\d{4}$/) != -1) {
check.style.color = "yellow";
check.innerText = "班級項填寫正确!";
}
else {
check.style.color = "red";
check.innerText = "班級項格式為:電信1001!";
}
break;
//驗證電話
case 8:
text = document.getElementById("phone_input").value;
var check = document.getElementById("phoneCheck_label");
if (text == "") {
break;
}
else if (text.search(/^(\+86)?1\d{10}$/) != -1) {
check.style.color = "yellow";
check.innerText = "手機項填寫正确!";
}
else {
check.style.color = "red";
check.innerText = "手機項格式錯誤!";
}
break;
}
}
利用正規表達式進行注冊資訊格式驗證是非常重要的一個知識點，希望這個小練習能夠幫助你更快地掌握！
我們下期再見！
END
文案編輯|雲端學長
文案配圖|雲端學長
内容由：雲端源想分享