@华1 2021-10-08 13:11 采纳率: 94.7%
浏览 45
已结题

请问这个表单的代码哪里有问题呢,达不到想要的效果,然后我想再完善一下这个表单,让提示信息在tab键后就显示出来,而非提交按钮后显示,应该如何


<head>
        <title>表单页面</title>
        <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
        <script type="text/javascript">
        //onsubmit时间驱动
            function checkForm(){
            //检测表单
                var flag=true;//标志位验证是否通过
                flag=checkNull("usename","用户名不能为空")&&flag;
                flag=checkNull("password","密码不能为空")&&flag;
                flag=checkNull("password","确认密码不能为空")&&flag;
                flag=checkNull("nickname","昵称不能为空")&&flag;
                flag=checkNull("email","邮箱不能为空")&&flag;
                flag=checkNull("img","头像不能为空")&&flag;
                flag=checkNull("valistr","验证码不能为空")&&flag;
                flag=checkGenderAndLike("gender","性别不能为空")&&flag;
                flag=checkGenderAndLike("like","爱好不能为空")&&flag;
                flag=checkGenderAndLike("password","两次密码不一致")&&flag;
                flag=checkEmail("email","邮箱格式不正确");
                return flag;
                }
                //判定邮箱格式,正则表达式
                function checkEmail(name,msg){
                    var email=document.getElementsByName(name)[0].value;
                    setMsg(name,"");
                    if(email==""){
                        setMsg(name,"邮箱不能为空");
                    }else{
                        var reg=/^\w+@\w+(\.\w+)+$/;
                            if(!reg.test(email)){
                            setMsg(name,msg);
                            return false;
                        }
                }
                return true;
                }
                //前端:非空校验
                function checkNull(name,msg){
                    var value=document.getElementsByName(name)[0].value;
                    setMsg(name,"");
                    if(value==""){
                        //alert(msg);
                        setMsg(name,msg);
                        return false;
                    }
                }
                //判定两次密码是否一致
                function checkPassword(name,msg){
                var psw=document.getElementsByName(name)[0].value;
                var psw2=document.getElementsByName(name+"2")[0].value;
                setMsg(name+"2","");
                if(psw2==""){
                    setMsg(name+"2","确认密码不能为空");
                    return false;
                }
                if(psw!=""&&psw2!=""&&psw!=psw2){
                    setMsg(name+"2",msg);
                    return false;
                }
                return true;
                }
                //判定性别爱好是否为空
                function checkGenderAndLike(name,msg){
                var flag=false;
                //获取所有的选框遍历,只要有一个选中,flagtrue
                var objs=document.getElementsByName(name);
                for(var i=0;i<objs.length;i++){
                    if(objs[i].checked){
                        flag=true;
                    }
                }
                setMsg(name,"");
                if(!flag){
                    setMsg(name,msg);
                    return false;//执行后
                }
                return true;
                }
            //输入框得到焦点
            function onfocusTA(obj){
                if(obj.value=="请输入描述信息~!"){
                    obj.value="";
                }
            }
            //输入框失去焦点
            function onblurTA(obj){
                if(obj.value==""){
                    obj.value="请输入描述信息~!";
                }
            }
                //设置提示信息显示方式
                function setMsg(name,msg){
                    var objs=document.getElementById(name+"_msg").innerHTML="<font style='color:red;font-size:12px;'>"+msg+"</font>";
                    
                    }
            
        </script>
    </head>
    <body>
        <form action="http://localhost:8080" method="POST" onsubmit="return checkFrom()">
            <table border="1px" align="center" cellpadding="10px" cellspacing="0px" borderColor="red" bgcolor="pink">
                <caption><font color="red" size="6">注册表单</font></caption>
                <input type="hidden" name="id" value="9527"/>
                <tr>
                    <td>用户名:</td>
                    <td>
                        <input type="text" name="username"/>
                        <span id="username_msg"></span>
                    </td>
                </tr>
                <tr>
                    <td>密码:</td>
                    <td>
                        <input type="password" name="password"/>
                        <span id="password_msg"></span>
                    </td>
                </tr>
                <tr>
                    <td>确认密码:</td>
                    <td>
                        <input type="password" name="password2"/>
                        <span id="password2_msg"></span>
                    </td>
                </tr>
                <tr>
                    <td>性别:</td>
                    <td>
                        <input type="radio" name="gender" value="男"/><input type="radio" name="gender" value="女"/><span id="gender_msg"></span>
                    </td>
                </tr>
                <tr>
                    <td>昵称:</td>
                    <td>
                        <input type="text" name="nickname" />
                        <span id="nickname_msg"></span>
                    </td>
                </tr>
                <tr>
                    <td>邮箱:</td>
                    <td>
                        <input type="text" name="email" />
                        <span id="email_msg"></span>
                    </td>
                </tr>
                <tr>
                    <td>爱好:</td>
                    <td>
                        <input type="checkbox" name="like" value="lq"/>篮球
                        <input type="checkbox" name="like" value="zq"/>足球
                        <input type="checkbox" name="like" value="qq"/>铅球
                        <input type="checkbox" name="like" value="blq"/>玻璃球
                        <span id="like_msg"></span>
                    </td>
                </tr>
                <tr>
                    <td>客户类型:</td>
                    <td>
                        <select name="type">
                            <option value="pm">平民</option>
                            <option value="sxdy">少先队员</option>
                            <option value="gqty">共青团员</option>
                            <option value="ybdy">预备党员</option>
                            <option value="zsdy">正式党员</option>
                        </select>
                        <span id="type_msg"></span>
                    </td>
                </tr>
                <tr>
                    <td>头像:</td>
                    <td>
                        <input type="file" name="img" />
                        <span id="img_msg"></span>
                    </td>
                </tr>
                <tr>
                    <td>描述信息:</td>
                    <td>
                        <textarea id="desc" rows="5" cols="45" name="desc" onblur="onblurTA(this)" onfous="onfousTA(this">请输入描述信息~!</textarea>
                    </td>
                </tr>
                <tr>
                    <td>验证码:</td>
                    <td>
                        <input type="text" name="valistr" />
                        <img src="1.jpg" width="100px" height="20px"/>
                        <span id="valistr_msg"></span>
                    </td>

                </tr>
                <tr>
                    <td colspan="2" align="right">
                        <input type="submit" value="提 交"/>
                        <input type="reset" value="重 置"/>
                    </td>
                </tr>
            </table>
        </form>
    </body>
  • 写回答

1条回答 默认 最新

  • qq夜熬 2021-10-08 14:51
    关注
    
    $(document).ready(function () {
                document.onkeydown = function (e) {
                    var ev = document.all ? window.event : e;
                    if (ev.keyCode == 9) {
                        checkForm();
                    }
                }
            })
    
    评论

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 10月10日
  • 创建了问题 10月8日

悬赏问题

  • ¥200 csgo2的viewmatrix值是否还有别的获取方式
  • ¥15 Stable Diffusion,用Ebsynth utility在视频选帧图重绘,第一步报错,蒙版和帧图没法生成,怎么处理啊
  • ¥15 请把下列每一行代码完整地读懂并注释出来
  • ¥15 pycharm运行main文件,显示没有conda环境
  • ¥15 易优eyoucms关于二级栏目调用的问题
  • ¥15 寻找公式识别开发,自动识别整页文档、图像公式的软件
  • ¥15 为什么eclipse不能再下载了?
  • ¥15 编辑cmake lists 明明写了project项目名,但是还是报错怎么回事
  • ¥15 关于#计算机视觉#的问题:求一份高质量桥梁多病害数据集
  • ¥15 特定网页无法访问,已排除网页问题