zoukankan      html  css  js  c++  java
  • 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}20d+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)?1d{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}20d+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)?1d{10}$/) != -1) {
                    check.style.color = "yellow";
                    check.innerText = "手机项填写正确!";
                }
                else {
                    check.style.color = "red";
                    check.innerText = "手机项格式错误!";
                }
                break;
        }
    }
  • 相关阅读:
    请求转发和重定向实现与Ajax实现表单登陆
    jquery学习:
    Ajax一目了然
    EL和JSTL
    jsp(java server pages):java服务器端的页面
    Vue 第二章 自定义修饰符、指令、生命周期函数
    Vue 第一章练习 列表的案例
    Vue 第一章练习 v-for
    第一章 Vue之代码基本结构、插值表达式、事件修饰符
    Vue之父组件传值给子组件
  • 原文地址:https://www.cnblogs.com/shaohuixia/p/5506696.html
Copyright © 2011-2022 走看看