会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 128778个问题
JAVA 全系列/第四阶段:网页编程和设计/CSS3(旧) 151楼
JAVA 全系列/第四阶段:网页编程和设计/HTML5(旧) 153楼
JAVA 全系列/第四阶段:网页编程和设计/Javascript 语言(旧) 154楼
JAVA 全系列/第四阶段:网页编程和设计/Javascript 语言(旧) 159楼
JAVA 全系列/第四阶段:网页编程和设计/HTML5(旧) 162楼
JAVA 全系列/第四阶段:网页编程和设计/HTML5(旧) 164楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>

        /**生成验证码*/
        var ran;

        function YZM() {

            //生成随机四位整数
            ran = Math.floor(Math.random() * 9000 + 1000);

            //获取span对象
            var span = document.getElementById("yzm_span");
            span.innerText = ran;
        }

        /**校验用户名方法*/
        function checkName() {

            //汉字的正则表达式
            var reg = /^[\u4e00-\u9fa5]{3,6}$/;
            return check("uname", reg);
        }

        /**校验密码方法*/
        function checkPwd() {
            //密码的正则表达式
            var reg = /^\d{3,6}$/;
            return check("pwd",reg);
        }

        /**校验邮箱方法*/
        function checkEmail() {
            //邮箱的正则表达式
            var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            return check("email",reg)
        }

        /**校验手机号方法*/
        function checkPhone() {
            var reg = /^\d{11}$/;
            return check("phone",reg)
        }

        /**提取公共部分*/
        function check(id, reg) {
            //获取对象
            var ob = document.getElementById(id);

            //获取value值
            var val = ob.value;

            //获取alt值
            var alt = ob.alt;

            //获取span对象
            var span = document.getElementById(id + "_span");

            if (val == null || val == "") {
                span.innerText = "×" + alt + "不能为空";
                span.style.color = "red";
                return false;
            } else if (reg.test(val)) {
                span.innerText = "√" + alt + "合法";
                span.style.color = "green";
                return true;
            } else {
                span.innerText = "不合法";
                span.style.color = "red";
                return false;
            }
        }

        /**校验性别*/
        function checkSex() {
            //获取所有性别对象
            var sex = document.getElementsByName("sex");

            //获取span对象
            var span = document.getElementById("sex_span");

            for (var i in sex) {
                if (sex[i].checked){

                    span.innerText="性别选择成功";
                    span.style.color="green";

                    return true;
                }
            }

            span.innerText="请选择性别";
            span.style.color="red";
            return false;
        }

        /**校验籍贯*/
        function checkAddress() {
            var sel = document.getElementById("sel").value;
            var span = document.getElementById("sel_span");

            if (sel==0) {
                span.innerText="请选择籍贯";
                span.style.color="red";
                return false;
            } else {
                span.innerText="籍贯选择成功";
                span.style.color="green";
                return true;
            }
        }

        /**校验验证码*/
        function checkYZM() {
            //获取输入的验证码
            var yzm = document.getElementById("yzm").value;

            //获取span标签
            var span = document.getElementById("yzm2_span");

            if (yzm==ran) {
                span.innerText="验证码正确";
                span.style.color="green";
                return true;
            } else {
                span.innerText="验证码不正确";
                span.style.color="red";
                return false;
            }
        }

        /**是否同意协议*/
        function checkAgree() {
            //同意框
            var check = document.getElementById("check");

            //提交
            var sub = document.getElementById("sub");

            sub.disabled=!check.checked;
        }

        /**总体判断*/
        function zong() {
            var flag=checkName()&&checkPwd()&&checkEmail()&&checkPhone()&&checkYZM()&&checkAgree()&&checkAddress()&&checkSex();
            return flag;
        }


        /*
          * 正则表达式:
          *
          * 正则表达式是对于数据格式进行一定的规范限制
          *
          *
          * ^:开始
          * [0-9]  [a-z A-Z] :数字  字母
          *
          * {2,4} :段域 至少是2位  最多是4位
          * {3}:指定范围就是3位
          * {2,}:至少是2位
          *  $:结束
          *
          * \d:[0-9]
          *
          * \w[0-9 a-z A-Z]
          *
          * */

    </script>
</head>
<body>
<center>
    <h3>注册页面</h3>
    <hr/>
    <form action="" method="get" onsubmit="return zong()">
        <table>
            <tr height="35px">
                <td width="150px">用户名:</td>
                <td width="500px">
                    <input type="text" name="uname" id="uname" alt="用户名" onblur="checkName()"/>
                    <span id="uname_span">用户名必须是3-5个汉字</span>
                </td>
            </tr>
            <tr height="35px">
                <td>密码:</td>
                <td>
                    <input type="password" name="pwd" id="pwd" alt="密码" onblur="checkPwd()">
                    <span id="pwd_span"></span>
                </td>
            </tr>
            <tr height="35px">
                <td>手机号:</td>
                <td>
                    <input type="text" name="phone" id="phone" alt="手机号" onblur="checkPhone()"/>
                    <span id="phone_span"></span>
                </td>
            </tr>
            <tr height="35px">
                <td>邮箱:</td>
                <td>
                    <input type="text" name="email" id="email" alt="邮箱" onblur="checkEmail()"/>
                    <span id="email_span"></span>
                </td>
            </tr>
            <tr height="35px">
                <td>性别:</td>
                <td>
                    男:<input type="radio" name="sex" value="1" onclick="checkSex()"/>
                    女:<input type="radio" name="sex" value="0" onclick="checkSex()">

                    <span id="sex_span"></span>
                </td>
            </tr>
            <tr height="35px">
                <td>爱好;</td>
                <td>
                    <input type="checkbox" name="fav" value="1"/>唱歌
                    <input type="checkbox" name="fav" value="2"/>睡觉
                    <input type="checkbox" name="fav" value="3"/>LOL<br/>
                    <input type="checkbox" name="fav" value="4"/>旅游
                    <input type="checkbox" name="fav" value="5"/>看电影
                    <input type="checkbox" name="fav" value="6"/>听音乐
                </td>
            </tr>
            <tr height="35px">
                <td>籍贯:</td>
                <td>
                    <select name="address" id="sel" onchange="checkAddress()">
                        <option value="0">--请选择--</option>
                        <option value="1">河南</option>
                        <option value="2">湖南</option>
                        <option value="3">海南</option>
                        <option value="4">云南</option>

                    </select>

                    <span id="sel_span"></span>
                </td>
            </tr>
            <tr height="35px">
                <td>验证码:</td>
                <td>
                    <input type="number" id="yzm" onblur="checkYZM()"/>
                    <input type="button" id="hq" value="点击获取验证码" onclick="YZM()"/>
                    <span id="yzm_span"></span>
                    <span id="yzm2_span"></span>
                </td>
            </tr>
            <tr height="35px">
                <td>个人介绍:</td>
                <td>
                    <textarea name="intro" rows="8" cols="30"></textarea>
                </td>
            </tr>
            <tr height="35px">
                <td colspan="2" align="center">
                    <input type="checkbox" id="check" onclick="checkAgree()">是否同意协议
                </td>
            </tr>
            <tr height="35px">
                <td colspan="2" align="center">
                    <input type="submit" id="sub" value="注册" disabled="true">
                </td>
            </tr>
        </table>
    </form>
</center>
</body>
</html>

image.png

籍贯这里不选择的话也能提交 有没有什么方法 在提交的时候能提醒选择籍贯或者报错

JAVA 全系列/第四阶段:网页编程和设计/Javascript 语言(旧) 165楼

百战程序员微信公众号

百战程序员微信小程序

©2014-2024 百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637