2021-03-15

最新推荐文章于 2024-06-27 14:51:05 发布
橘•希尔芬福特
最新推荐文章于 2024-06-27 14:51:05 发布
阅读量137
点赞数
分类专栏： HTML 文章标签： js html
本文链接：https://blog.csdn.net/weixin_45616238/article/details/114812205
版权
HTML 专栏收录该内容
2 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        form{
            transform: translateX(40%);
        }
        #filed{
            display: inline-block;
            margin: 0 auto;
        }
tr{
    background-color: gainsboro;
}
    </style>
    <script type="text/javascript">
        function check(){
            var emailMsg = document.getElementById("emailMsg");
            var passwordMsg = document.getElementById("passwordMsg");
            var RepassWord1Msg = document.getElementById("RepassWord1");

            var username = document.getElementById("username");
            var usernameMsg = document.getElementById("usernameMsg");

            var isPass = true;

            var length = username.value.length;
            if(length==0){
//             alert("用户名长度必须是3-6位");
                usernameMsg.innerText= "*姓名不能为空";
                isPass = false;
            }else{
                usernameMsg.innerText= "";
            }

            var email = document.getElementById("email").value;
            var p = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            if(p.test(email)==false){
//             alert("邮箱格式不正确");
                emailMsg.innerText="*必须包含@符号";
                isPass = false;
            }else{
                emailMsg.innerText="";
            }
            var telephone=document.getElementById("telephone").value;
            var telephoneMsg=document.getElementById("telephoneMsg")
            var t=/^1\d{10}$/;
            if (t.test(telephone)==false){
                telephoneMsg.innerText="*至少11位数字"
            }else{
                telephoneMsg.innerText="";
            }

            var password = document.getElementById("password").value;
            var rePassword = document.getElementById("rePassword").value;
            if(password.length<6){
//             alert("密码必须在6-10位之间");
                passwordMsg.innerText="*至少6位，不能为空"
                isPass=false;
            }else{
                passwordMsg.innerText=""
                if(rePassword!=password){
//                alert("两次输入密码不一致");
                    RepassWord1Msg.innerText="*与密码相同";
                    isPass=false;
                }else{
                    RepassWord1Msg.innerText="";
                }
            }
            var SelectOccupation=document.getElementById("SelectOccupation").selectedIndex;
            var occupationMsg=document.getElementById("occupationMsg");
            var Length3 = SelectOccupation.length;
            if(Length3==0){
//             alert("*点击选择职业");
                occupationMsg.innerText= "*点击选择职业";
            }else{
                occupationMsg.innerText= "";
            }

//          if(isPass==false){
//             return false;
//          }else{
//             return true;
//          }
            return isPass;
        }
        //onblur失去焦点的时候调用
        function checkUsername(username){
            var usernameMsg = document.getElementById("usernameMsg");

            var length = username.value.length;
            if(length==0){
                usernameMsg.innerText= "*姓名不能为空";
            }else{
                usernameMsg.innerText= "";
            }
        }
        function checkEmail(email){
            var emailMsg = document.getElementById("emailMsg");
            var p = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            if(p.test(email.value)==false){
                emailMsg.innerText="*必须包含@符号";
            }else{
                emailMsg.innerText="";
            }
        }
        function checkTelephone(telephone){
            var telephone=document.getElementById("telephone").value;
            var telephoneMsg=document.getElementById("telephoneMsg")
            var t=/^1\d{10}$/;
            if (t.test(telephone)==false){
                telephoneMsg.innerText="*至少11位数字"
            }else{
                telephoneMsg.innerText="";
            }
        }
 function checkSelect() {
var SelectOccupation=document.getElementById("SelectOccupation").selectedIndex;
var occupationMsg=document.getElementById("occupationMsg");
     var Length3 = SelectOccupation.length;
     if(Length3==0){
//             alert("*点击选择职业");
         occupationMsg.innerText= "*点击选择职业";
     }else{
         occupationMsg.innerText= "";
     }

 }
        function checkPassword(){
            var passwordMsg = document.getElementById("passwordMsg");
            var RepassWord1Msg = document.getElementById("RepassWord1");
            var password = document.getElementById("password");
            var rePassword = document.getElementById("rePassword").value;
            if(password.value.length<6 ){
                passwordMsg.innerText="*至少6位，不能为空"

            }else{
                passwordMsg.innerText=""
                if(password.value!=rePassword){
                    RepassWord1Msg.innerText="*与密码相同";

                }else{
                    RepassWord1Msg.innerText="";
                }
            }
        }
    </script>
</head>
<body style="font-family: 黑体;font-size:13px ">

<form action="register2.jsp" onsubmit="return check()">
    <fieldset id="filed" >
        <legend style="text-align: center">用户注册</legend>
        <table  width="400px" height="500px" cellspacing="3px" cellpadding="3px">
            <tr bgcolor="#D8D8D8">
                <td align="right" width="80px">姓名</td>
                <td align="left"> <input type="text" id="username" onblur="checkUsername(this)" />
                    <font color="red" id="usernameMsg"></font>
                </td>
            </tr>

            <tr>
                <td align="right">密码</td>
                <td> <input type="password" id="password" onblur="checkPassword()" />
                    <font color="red" id="passwordMsg"></font> </td>
            </tr>

            <tr>
                <td align="right">确认密码</td>
                <td> <input type="password" id="rePassword" onblur="checkPassword()"/>
                    <font color="red" id="RepassWord1"></font> </td></td>
            </tr>

            <tr>
                <td align="right">性别</td>
                <td> <input type="radio" name="sex" value="man" checked="true"/><font color="red">男</font><input type="radio" name="sex" value="woman" /><font color="red">女</font> </td>
            </tr>

            <tr>
                <td align="right">出生年月</td>
                <td> <input type="date" name="birthday"></td>
            </tr>

            <tr>
                <td align="right">职业</td>
                <td> <select  onblur="checkSelect()" id="SelectOccupation">
                    <option>总经理</option>
                    <option >经理</option>
                    <option>秘书</option>
                    <option>职员</option>
                    <option>门卫</option>

                </select>
                    <font color="red" id="occupationMsg">*点击选择职业</font> </td></td></td>
            </tr>
            <tr>
                <td align="right">电话号码</td>
                <td> <input type="text" id="telephone" onblur="checkTelephone(this)" />
                    <font color="red" id="telephoneMsg"></font> </td>
            </tr>
            <tr>
                <td align="right">电子邮箱</td>
                <td> <input type="text" id="email" onblur="checkEmail(this)" /><font color="red" id="emailMsg"></font> </td>
            </tr>

            <tr>
                <td align="right">兴趣爱好</td>
                <td><input type="checkbox" name="hobby" value="1"><font color="red">体育</font>
                    <input type="checkbox" name="hobby" value="2"><font color="red">看书</font>
                    <input type="checkbox" name="hobby" value="3"><font color="red">旅游</font>
                    <input type="checkbox" name="hobby" value="4"><font color="red">美食</font>
                </td>
            </tr>

            <tr>
                <td align="right">自我介绍</td>
                <td> <textarea rows="5" name="message"></textarea></td>
            </tr>

            <td colspan="2" align="center"> <input type="submit" value="注册" /> </td>
            </tr>
        </table>
</fieldset>
</table>
</form>
</body>
<!-- -->
</html>
橘•希尔芬福特
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
2021-03-15

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> form{ transform: translateX(40%); } #filed{ display: inline-b.
复制链接

扫一扫