JavaScript+CSS+html【练习题】JS正则表达式验证表单

题目

程序猿小明需要为公司员工的个人信息录入编写前端代码,效果如下图。
需求:要保证信息录入格式正确无遗漏(输入有误要给到对应提示)。
使用 HTML+CSS 布局出如上图所示页面效果;
嵌入 JS 代码,添加表单提交和表单项失去焦点等事件处理;
在事件处理中按照表单项后面提示的信息完成对应表单验证操作。
注意:单选和下拉框无须添加失去焦点事件(因为只有输入框需要)。
在这里插入图片描述

JS正则表达式

使用正则的3种方式

  • 向String对象的方法(search,match,replace,split)传入参数:/正则表达式/。
  • 先new一个正则表达式对象RegExp,再将其传入String对象的方法(search,match,replace,split)。
  • 先new一个正则表达式对象RegExp,使用RegExp自身的方法。
    //正则的使用
    var str = "wert45678yuiytrew";
    //使用正则匹配子串str中的数字
    console.log(str.match(/[0-9]+/));

    //使用RegExp创建一个正则对象
    var pat = new RegExp("[0-9]+");
    console.log(str.match(pat));
    console.log(pat.exec(str));
    //以上三个返回结果一致:["45678", index: 4, input: "wert45678yuiytrew", groups: undefined]

修饰符

在这里插入图片描述

方括号

方括号用于查找某个范围内的字符:
在这里插入图片描述

元字符

元字符(Metacharacter)是拥有特殊含义的字符:
\w :匹配单词字符,等价于 [a-zA-Z0-9_] 共63个字符(字母数字下划线)。
在这里插入图片描述

量词

在这里插入图片描述

RegExp 对象属性

在这里插入图片描述

RegExp 对象方法

在这里插入图片描述

支持正则表达式的 String 对象的方法

在这里插入图片描述

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息登记表</title>
    <style>
        #board{
            width: 700px;
            height: 500px;
            border: 1px solid blueviolet;
            background-color:lightblue;

            overflow: hidden;
            position: relative;
        }

        form{
            position: absolute;
            left:50px;
            bottom: 30px;
        }

        h1{
            position: absolute;
            left:50px;
            top:0px;
        }

        #require{
            width: 300px;
            height: 500px;
            
            position: absolute;
            top:80px;
            right:70px;

            font-size: small;
            color: grey;
            line-height: 31px;
        }
    </style>
</head>
<body>
    <div id="board">
        <h1>个人信息登记表</h1>
        <form action="submit_success.html" name="myform" onsubmit="return doSubmit()" method="post">
            登录账号:<input type="text" name="username" onblur="checkUserName()"><br/><br/>
            登录密码:<input type="text" name="psw1" onblur="checkPSW1()"><br/><br/>
            重复密码:<input type="text" name="psw2" onblur="checkPSW2()"><br/><br/>&emsp;&emsp;别:
            <input type="radio" name="gender" value=""><input type="radio" name="gender" value="" checked><br/><br/>&emsp;&emsp;龄:<input type="text" name="age" onblur="checkAge()"><br/><br/>
            手机号码:<input type="text" name="phone" onblur="checkPhone()"><br/><br/>&emsp;&emsp;箱:<input type="text" name="email" onblur="checkEmail()"><br/><br/>&emsp;&emsp;历:
            <select name="education">
                <option value="初中">初中</option>
                <option value="高中">高中</option>
                <option value="大专">大专</option>
                <option value="本科" selected>本科</option>
                <option value="硕士">硕士</option>
                <option value="博士">博士</option>
            </select><br/><br/>
            <input type="submit" value="提交">
            <input type="reset" value="重置">
        </form>

        <div id="require">
            <p>6~18位有效字符(字母、数字、下划线)</p>
            <p>6~18位任意字符</p>
            <p>重复密码与登录密码一致</p>
            <p>必须选择一个</p>
            <p>大于0的任意两位整数</p>
            <p>由1开头的11位整数</p>
            <p>有效的Email地址</p>
            <p>必须选择一个学历选项</p>
        </div>

    </div>   
</body>
<Script>
    function checkUserName(){
        //6~18位有效字符(字母、数字、下划线)
        var username=document.myform.username.value;
        if(username.match(/^\w{6,18}$/)==null){
            alert("请输入:6~18位有效字符(字母、数字、下划线)");
            return false;
        }
        return true;
    }

    function checkPSW1(){
        //6~18位任意字符
        var psw1=document.myform.psw1.value;
        if(psw1.length<6||psw1.length>18){
            alert("请输入:6~18位任意字符");
            return false;
        }
        return true;
    }

    function checkPSW2(){
        //6~18位任意字符
        //与之前输入的密码一致
        var psw1=document.myform.psw1.value;
        var psw2=document.myform.psw2.value;
        
        if(psw1==""){
            alert("请先在“登录密码”框处进行输入");
            return false;
        }else if(psw1==psw2){
            return true;
        }else{
            alert("前后两次输入密码不一致,请重新输入");
            return false;
        } 
        
        if(psw2.length<6||psw2.length>18){
            alert("请输入:6~18位任意字符");
            return false;
        }
        
    }

    function checkAge(){
        //大于0的任意两位整数
        var age=document.myform.age.value;
        if(age.match(/^[0-9]{2}$/)==null||age=="00"){
            alert("请输入:大于0的任意两位整数");
            return false;
        }
        return true;
    }

    function checkPhone(){
        //由1开头的11位整数
        var phone=document.myform.phone.value;
        if(phone.match(/^[0-9]{11}$/)!=null&&phone[0]=="1"){
            return true;
        }

        alert("请输入:由1开头的11位整数");
        return false;
    }

    function checkEmail(){
        //有效的Email地址
        //以数字字母开头,中间可以是多个数字字母下划线或者-
        //然后是@,后面是数字字母
        //然后是.加2-4个字母结尾
        var email=document.myform.email.value;
        if(email.match(/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/)==null){
            alert("请输入:有效的Email地址");
            return false;
        }
        return true;
    }

    function doSubmit(){
        return checkUserName()&&checkPSW1()&&checkPSW2()&&checkAge()&&checkPhone()&&checkEmail();
    }

</Script>
</html>

效果展示

在这里插入图片描述

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页