qwb0614

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
  187 随笔 :: 0 文章 :: 0 评论 :: 2048 阅读
2023.3.1
复制代码
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>--%>

<head>
    <meta charset="UTF-8" >
    <title>石家庄铁道大学在校学生行程统计</title>
</head>

<body>
<form id="test" method="post"  action="/Java_test/AddServlet">
<%--<form id="test" action="/Java_test/AddServlet" method="post" onsubmit="return checkXreg()">--%>
    <table align="center" border="1" cellspacing="0" width="500">
        <tr>
            <td><center>1.姓名:</center></td>

            <td>
                <label>
                    <input type="text" name="name" id="name"/>
                    <span id="name_err" class="err_msg" style="display: none"><font color="red">姓名不能为空!</font> </span>
                </label>
            </td>
        </tr>
        <tr>
            <td><center>2.学号:</center></td>
            <td>
                <label>
                    <input type="text" name="xuehao" id="xuehao" maxlength="8" />
                    <span id="xuehao_err" class="err_msg" style="display: none"><font color="red">学号只能是8位数字！</font></span>
                </label>
            </td>
        </tr>
        <tr>
            <td><center>3.学生类别:</center></td>
            <td>
                <label>
                    <input type="radio" name="leibie" value="本科生" checked>本科生
                    <input type="radio" name="leibie" value="研究生">研究生
                </label>
            </td>
        </tr>
        <tr>
            <td> <center>4.院系:</center></td>
            <td>
                <label>
                    <select name="yuanxi">
                        <option value="土木学院">土木学院</option>
                        <option value="机械学院">机械学院</option>
                        <option value="交通学院">交通学院</option>
                        <option value="信息学院" selected>信息学院</option>
                        <option value="经管学院">经管学院</option>
                    </select>
                </label>
            </td>
        </tr>
        <tr>
            <td><center>5.联系电话:</center></td>
            <td>
                <label>
                    <input type="text" name="dianhua" id="dianhua" maxlength="11"/>
                    <span id="tel_err" class="err_msg" style="display: none"><font color="red">手机号只能是11位数字!</font></span>
                </label>
            </td>
        </tr>
        <tr>
            <td><center>6.健康码颜色:</center></td>
            <td>
                <label>
                    <input type="radio" name="jiankangma" value="绿码" checked>绿码
                    <input type="radio" name="jiankangma" value="黄码">黄码
                    <input type="radio" name="jiankangma" value="红码">红码
                </label>
            </td>
        </tr>
        <tr>
            <td><center>7.行程统计</center></td>
            <td>
                <label>
                    <input type="checkbox" name="tongji"  value="1" />10月30日去过人民医院。<br>
                    <input type="checkbox" name="tongji"  value="2" />10月25日以来去过深泽县人民医院。<br>
                    <input type="checkbox" name="tongji"  value="3" />10月16日以来去过深泽县庄泽村。<br>
                    <input type="checkbox" name="tongji"  value="4" />10月29日以来去过黑龙江哈尔滨市或者黑河市。<br>
                    <input type="checkbox" name="tongji"  value="5" />10月18日以来途径贵州遵义市;北京丰台、昌平。<br>
                    <input type="checkbox" name="tongji" value="6" />10月17日以来到过湖南长沙;青海海东市。<br>
                </label>
            </td>
        </tr>
        <tr>
            <td><center>8.其他涉疫信<br>息需要填报的</center></td>
            <td>
                <label>
                    <textarea rows="5" cols="20" name="qita"></textarea>
                </label>
            </td>
        </tr>
        <tr align="center">
            <td colspan="2">
                <input type="submit" value="提交" id="sub" />
                <input type="reset" value="重置" />
            </td>
        </tr>
    </table>
</form>


<%--</form>--%>
<script>
    //1. 验证用户名是否符合规则
    //1.1 获取用户名的输入框
    var nameInput = document.getElementById("name");
    //1.2 绑定onblur事件 失去焦点
    nameInput.onblur = checkName;
    function checkName() {
        //1.3 获取用户输入的用户名
        var name = nameInput.value.trim();
        //1.4 判断用户名是否符合规则：长度 6~12,单词字符组成
        //var reg = /^\w+$/;
        //var flag = reg.test(name);
        if (name!=""&&name!=null) {
            //符合规则
            document.getElementById("name_err").style.display = 'none';
            return true;
        } else {
            //不合符规则
            document.getElementById("name_err").style.display = '';
            return false;
        }
    }
    //1. 验证学号是否符合规则
    //1.1 获取密码的输入框
    var xuehaoInput = document.getElementById("xuehao");

    //1.2 绑定onblur事件 失去焦点
    xuehaoInput.onblur = checkXuehao;

    function checkXuehao() {
        //1.3 获取用户输入的密码
        var xuehao = xuehaoInput.value.trim();

        //1.4 判断密码是否符合规则：长度 6~12
        var reg = /^\d{8}$/;
        var flag = reg.test(xuehao);

        //var flag = password.length >= 6 && password.length <= 12;
        if (flag) {
            //符合规则
            document.getElementById("xuehao_err").style.display = 'none';
        } else {
            //不合符规则
            document.getElementById("xuehao_err").style.display = '';
        }

        return flag;
    }


    //1. 验证手机号是否符合规则
    //1.1 获取手机号的输入框
    var dianhuaInput = document.getElementById("dianhua");

    //1.2 绑定onblur事件 失去焦点
    dianhuaInput.onblur = checkDianhua;

    function checkDianhua() {
        //1.3 获取用户输入的手机号
        var tel = dianhuaInput.value.trim();

        //1.4 判断手机号是否符合规则：长度 11，数字组成，第一位是1

        //var flag = tel.length == 11;
        var reg = /^[1]\d{10}$/;
        var flag = reg.test(tel);
        if (flag) {
            //符合规则
            document.getElementById("tel_err").style.display = 'none';
        } else {
            //不合符规则
            document.getElementById("tel_err").style.display = '';
        }

        return flag;
    }



    //1. 获取表单对象
    var regForm = document.getElementById("test");


    //2. 绑定onsubmit 事件
regForm.onsubmit= function checkXreg() {
        //挨个判断每一个表单项是否都符合要求，如果有一个不合符，则返回false
        var flag = checkName() &&  checkXuehao() && checkDianhua();
        return flag;
    }
    // regForm.onsubmit =checkXreg();
</script>

</body>
复制代码

 

posted on   嘎嘎鸭1  阅读(21)  评论(0)  编辑  收藏  举报
相关博文：
· 第六周总结
· 第十一周总结
· 疫情到往记录
· 石家庄铁道大学在校学生行程统计
· 行程管理系统
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！
点击右上角即可分享
微信分享提示