javascript_表单验证这是一道普通的javascript习题，主要运用了表单验证，在学习javaweb时，可能会

前端_表单验证

题目要求：

1、制作网页Registe.html，包含一个如下所示的表单，当用户填写完所有信息，点击提交按钮时，对所填写信息进行验证

1) 网页加载，随机产生一个4位数字的验证码，点击验证码，可以更换下一个验证码；

2) 学历下拉列表框，包含列表项内容有：博士以上、硕士研究生、本科、大专、高中、中专、其它；

3) 性别单选按钮默认初始“保密”是选中状态；

4) 点击提交按钮，对用户填写的信息进行验证，不符合要求的情况，弹出消息框，给出相应的错误信息，具体要求如下：

a) 除了生日外，所有信息必须全部填写，如果有遗漏，报错；

b) 用户名没有满足要求（只能包含字母和数字，开头的必须为英文字母），报错；

c) 密码和确认密码不一致，报错；

d) 密码的长度必须在6-18位之间，否则报错；

e) Email要求必须包含有“@”和“***\*.\****”，并且这两个符号不能连在一起，“***\*.\****”不能是最后一个字符，否则报错；

f) 验证码必须和随机产生的红色文字验证码相同，否则报错；

5) 若验证全部通过，则弹出一个确认框，将用户所填写的**全部信息**显示出来

a) 生日可以不填，如果不填，则生日显示为“无”；

b) 爱好可以一个都不选，如果没有任何爱好选中，则爱好显示为“无”；

6) 信息显示结束后，询问用户是否确定并进行登录，如果确定，则显示登录页面。

1.代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    input,button,select,textarea{
        border: rgb(255, 76, 218) solid 2px;
    }

</style>

<script>
    window.onload = function () {
        var yzm = document.querySelector('#yzm');


        yzm.onclick = function () {

            var arr = new Array(4);
            for (var i = 0; i < arr.length; i++) {
                arr[i] = Math.round(Math.random() * 9)
            }
            yzm.value = arr[0] + "" + arr[1] + "" + arr[2] + "" + arr[3];
            yzm.innerText = arr[0] + "" + arr[1] + "" + arr[2] + "" + arr[3];//表示验证码按钮表面的数字

        }

        var submit = document.querySelector('#submit');


        //学历

        var background = document.querySelector("#background");




        submit.onclick = function () {

            //1.用户名

            var username = document.querySelector("#username");
            var ch = username.value.charAt(0);
            if (username.value.trim().length == 0) {
                alert("请输入用户名");
                username.focus();
                return;
            }


            if (!(ch >= "a" && ch <= "z") || (ch >= "A" && ch <= "Z")) {
                alert("用户名无效，首字符必须是英文字母！");
                username.focus();
                return;
            }

            var reg = /^[a-zA-Z0-9]{3,}$/                  //{3,}表示量词，大于等于3
            if (!reg.test(username.value)) {
                alert("错了,字符串长度不小于3");
                username.focus();
                return;

            }

            //2.1 密码和确认密码一致

            var password = document.querySelector("#password");
            var password2 = document.querySelector("#password2");

            if (password.value.trim().length == 0) {
                alert("请输入密码");
                password.focus();
                return;
            }

            //2.2 密码长度在6-18位

            if (password.value.length < 6 || password.value.length > 18) {
                alert("密码长度必须在6-18位");
                password.focus();
                return;

            }

            if (password2.value.trim().length == 0) {
                alert("请确认密码");
                password2.focus();
                return;
            }


            if (password.value != password2.value) {
                alert("请重新确认密码");
                password2.focus();
                return;
            }



            // 3.学历
            if (background.value == 0) {
                alert("请选择学历")
                background.focus()
                return;
            }

            //4.Email

            var email = document.querySelector("#email");
            var pAt = email.value.indexOf("@")

            if (email.value.trim().length == 0) {
                alert("请输入email");
                email.focus();
                return;
            }

            if (pAt == -1) {
                window.alert("邮箱中应该有@");
                document.getElementById("email").focus();
                return;
            }

            var pDot = email.value.indexOf(".", pAt);//从@开始，计算.的索引值
            if (pDot == -1 || pDot == email.value.length - 1 || pDot == pAt + 1) {
                window.alert("email中.的位置不对");
                document.getElementById("email").focus();
                return;
            }


            //5.兼职经验
            var experience = document.querySelector("#experience");

            if (experience.value.trim().length == 0) {
                alert("请输入兼职经验");
                experience.focus();
                return;
            }

            //6.性别


            var sex = document.getElementsByName("sex");
            var show = '';


            for (var i = 0; i < sex.length; i++) {
                if ((sex[i].checked)) {
                    show = sex[i].value;
                    break;
                }
            }

            //7.生日
            var birthday = document.querySelector("#birthday");
            var s = "";
            if (birthday.value.trim().length == 0) {
                s = "无";
            }


            //8.爱好
            var showString = "";
            var hobbys = document.getElementsByName("hobby");
            var num = 0;

            for (var i = 0; i < hobbys.length; i++) {

                if (hobbys[i].checked) {
                    showString += hobbys[i].value + "\n";
                    num++;
                }


            }
            if (num == 0) {
                showString = "无";
            }



            //9.验证码相同
            var yz = document.querySelector("#yz");

            if (yz.value.trim().length == 0) {
                alert("请输入验证码");
                yz.focus();
                return;
            }

            if (Number(yz.value) != Number(yzm.value)) {
                alert("验证码输入不一致");
                yz.focus();
                return;
            }


            var value = Number(background.value);
            

            var temp = ""
            switch (value) {
               
                case 1:
                    temp = "博士以上";
                    break;
                case 2:
                    temp = "硕士研究生";
                    break;
                case 3:
                    temp = "本科";
                    break;
                case 4:
                    temp = "大专";
                    break;
                case 5:
                    temp = "高中";
                    break;
                case 6:
                    temp = "中专";
                    break;
                case 7:
                    temp = "其他";
                    break;

            }
            //10.验证成功
            window.confirm("用户名：" + username.value + "\n" +
                "密码：" + password.value + "\n" +

                "学历:" + temp + "\n" +
                "电子邮箱：" + email.value + "\n" +
                "兼职经验:" + experience.value + "\n" +
                "性别:" + show + "\n" +
                "生日:" + s + "\n" +
                "爱好:" + showString + "\n" + "\n" +
                "是否确认以上信息并登录")
        }

    }

</script>

<body>
    <h1 align="center">请填写注册信息</h1>
    <!-- <form action=""> -->
    <table border="1" align="center">
        <tr>
            <td align="right" width="200px">用户名:</td>
            <td align="left" width="500px"><input type="text" id="username" placeholder="请填写用户名"></td>
        </tr>

        <tr>
            <td align="right">密码:</td>
            <td><input type="password" id="password"></td>
        </tr>

        <tr>
            <td align="right">确认密码:</td>
            <td><input type="password" id="password2"></td>
        </tr>

        <tr>
            <td align="right">学历:</td>
            <td>
                <select name="background" id="background" >
                    <option value="0">=请输入学历= </option>
                    <option value="1">博士以上</option>
                    <option value="2">硕士研究生</option>
                    <option value="3">本科</option>
                    <option value="4">大专</option>
                    <option value="5">高中</option>
                    <option value="6">中专</option>
                    <option value="7">其他</option>
                </select>
            </td>
        </tr>

        <tr>
            <td align="right">电子邮箱:</td>
            <td><input type="email" id="email"></td>
        </tr>

        <tr>
            <td align="right">兼职经验:</td>
            <td>
                <textarea name="" id="experience" cols="30" rows="10" placeholder="请填写您曾经做过的兼职经验"></textarea>
            </td>
        </tr>

        <tr>
            <td align="right">性别:</td>
            <td>
                <input type="radio" name="sex" value="男">男
                <input type="radio" name="sex" value="女">女
                <input type="radio" name="sex" value="保密" checked="checked">保密

            </td>
        </tr>

        <tr>
            <td align="right">生日:</td>
            <td><input type="date" id="birthday"></td>
        </tr>

        <tr>
            <td align="right">爱好:</td>
            <td>
                <input type="checkbox" name="hobby" value="游泳" />游泳
                <input type="checkbox" name="hobby" value="跑步" />跑步
                <input type="checkbox" name="hobby" value="登山" />登山
                <input type="checkbox" name="hobby" value="旅游" />旅游
                <input type="checkbox" name="hobby" value="滑雪" />滑雪
            </td>
        </tr>

        <tr>
            <td align="right">验证码:</td>
            <td><input type="text" id="yz"> <button style="color:red" id="yzm">验证码</button> </td>
        </tr>

        <tr>
            <td align="right">确认密码:</td>
            <td><button id="submit">提交</button></td>
        </tr>


    </table>
    <!-- </form> -->

</html>

2. 注意事项：

a、window.onload=function(){};只有将代码写在这里才能看到效果

正则表达式的使用，例：

b、var reg=/^[a-zA-Z0-9]{3,}$/ 表示reg是一个只含有字母或者数字的字符串，字符串长度不小于3

  配合test()方法即可验证结果

c、window.confirm()表示确认，多了取消按钮

javascript_表单验证

前端_表单验证

题目要求：

1.代码

2. 注意事项：

3. 效果