~关注我带你看更多精品技术和面试必备

程序猿小明需要为公司员工的个人信息录入编写前端代码,效果如下图需求:要保证信息录入格式正确无遗漏(输入有误要给到对应提示)

我写的代码如下 : 可以借鉴抄袭没意思

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息登记表</title>
    <style>
        .parent {
            width: 100%;
            height: 800px;
            border: 1px solid blueviolet;
            background-color: lightblue;
            overflow: hidden;
            position: relative;
        }
        
        form {
            position: absolute;
            margin-left: 100px;
            margin-top: 100px;
        }
        
        h1 {
            position: absolute;
            left: 50px;
            top: 0px;
        }
        
        #description {
            width: 300px;
            height: 500px;
            position: absolute;
            margin-top: 80px;
            margin-left: 380px;
            font-size: small;
            color: grey;
            line-height: 28px;
        }
    </style>
</head>

<body>
    <div class="parent">
        <h1>个人信息登记表</h1>
        <form name="myform">
            登录账号: <input type="text" name="username" onblur="checkUserName()">
            <p>登录密码: <input type="password" name="psw1" onblur="checkPSW1()"></p>
            <p> 重复密码: <input type="password" name="psw2" onblur="checkPSW2()"></p>
            <p> 性&nbsp;&nbsp;&nbsp;&nbsp;别: <input type="radio" name="sex" value="男"> &nbsp;男&nbsp;&nbsp; <input type="radio" name="sex" value="女">女</p>
            <p> 年&nbsp;&nbsp;&nbsp;&nbsp;龄：<input type="text" name="age" onblur="checkAge()"></p>
            <p> 手机号码:<input type="text" name="phone" onblur="checkPhone()"></p>
            <p> 邮&nbsp;&nbsp;&nbsp;&nbsp;箱：<input type="text" name="email" onblur="checkEmail()"></p>
            <p> 学&nbsp;&nbsp;&nbsp;&nbsp;历：
                <select>
                <option value="大专">专科</option>
                <option value="本科">本科</option>
                <option value="硕士">硕士</option>
                <option value="博士">博士</option>
            </select></p>
            <input type="submit" value="提交" onclick="doSubmit()">&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="reset" value="重置">
        </form>
        <div id="description">
            <p>6~18位有效字符（字母、数字、下划线）</p>
            <p>6~18位任意字符</p>
            <p>重复密码与登录密码一致</p>
            必须选择一个
            <p>大于0的任意两位整数</p>
            <p>由1开头的11位整数</p>
            <p>有效的Email地址</p>
            <p>必须选择一个学历选项</p>
        </div>
    </div>
</body>
<Script>
    function checkUserName() {
        var username = document.myform.username.value;
        if (username.match(/^\w{6,18}$/) == null) {
            alert("请输入：6-18位有效字符（字母、数字、下划线）");
            return false;
        }
        return true;
    }

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

    function checkPSW2() {
        var psw1 = document.myform.psw1.value;
        var psw2 = document.myform.psw2.value;
        if (psw2 == "") {
            alert("请与第一次输入的密码一致");
        } 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(/1[0-9]{10}/)) {
            return true;
        } else {
            alert("请输入：由1开头的11位整数");
            return false;
        }

    }

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

    function doSubmit() {
        if (checkUserName() && checkPSW1() && checkPSW2() && checkAge() && checkPhone() && checkEmail()) {
            alert("提交成功");
        } else {
            alert("提交失败");
        }
    }
</Script>

</html>

效果图: