js正則表達式進行格式校驗


今天做了個js正則表達式的練習,利用正則表達式進行注冊信息格式驗證,注冊信息界面如下:


格式要求:

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" onblur="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" onblur="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" onblur="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" onblur="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" onblur="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" onblur="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" onblur="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" onblur="checkRegisterInfo(8)"/></span>
<span><label id="phoneCheck_label"></label></span>
</div>
<div class="button_div"><span><input id="register_button" type="button" onclick="summitRegisterInfo()" value="用戶注冊"/></span></div>
</div>
<!--end register-->
</div>


JS驗證源代碼:

/*
* 功能:    驗證注冊信息是否合法,在每次<input>控件失去聚焦時調用
* 參數:    num 控件編號,指示是哪個控件觸發了該函數
* 返回值:  如果全部合法返回true,否則給予響應的錯誤提示並返回false
* 創建人:  Lixam
* 創建時間:2013-9-14
* 修改人:  
* 修改時間:
*/
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;
    }
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM