}

传智播客旗下技术交流社区北京校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© lx_1995 初级黑马   /  2019-1-10 09:12  /  20 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link href="../css/注册页面2.css" rel="stylesheet">
    <script>
        window.onload=function () {
            document.getElementById("testForm").onsubmit=function () {
                checkUName();
                checkUPass();
                checkEmail();
                checkName();
                checkPhone();
                checkSex();
                checkBir();
                checkVerify();

                return checkUName()&&checkUPass()&&checkEmail()&&checkName()&&checkPhone()&&checkVerify()&&checkBir()&&checkSex();
            }
        }
        function checkUName() {
            var uname = document.getElementById("uname").value;
            if(uname == ""){
                document.getElementById("unameP").innerText="*该项必填!";
                return false;
            }else {
                var flag=/^\w{6,12}$/.test(uname);
                if(flag){
                    document.getElementById("unameP").innerHTML="<img width='30' height='20' src='../img/gou.png'/>";
                    return flag;
                }else {
                    document.getElementById("unameP").innerText="请输入6-12位a-z/0-9字符!";
                    return flag;
                }
            }
        }
        function checkUPass() {
            var upass = document.getElementById("upass").value;
            if(upass == ""){
                document.getElementById("upassP").innerText="*该项必填!";
                return false;
            }else {
                var flag=/^\w{6,12}$/.test(upass);
                if(flag){
                    document.getElementById("upassP").innerHTML="<img width='30' height='20' src='../img/gou.png'/>";
                    return flag;
                }else {
                    document.getElementById("upassP").innerText="请输入6-12位a-z/0-9字符!";
                    return flag;
                }
            }
        }
        function checkEmail() {
            var email=document.getElementById("email").value;
            if(email == ""){
                document.getElementById("emailP").innerText="*该项必填!";
                return false;
            }else {
               var flag=/^([\w\-]+\@[\w\-]+\.[\w\-]+)$/.test(email);
                if(flag){
                    document.getElementById("emailP").innerHTML="<img width='30' height='20' src='../img/gou.png'/>";
                    return flag;
                }else {
                    document.getElementById("emailP").innerText="格式错误!";
                    return flag;
                }
            }
        }
        function checkName() {
            var relname=document.getElementById("relname").value;
            if(relname == ""){
                document.getElementById("relnameP").innerText="*该项必填!";
                return false;
            }else {
                document.getElementById("relnameP").innerHTML="<img width='30' height='20' src='../img/gou.png'/>";
                return true;
            }
        }
        function checkPhone() {
            var phone=document.getElementById("phone").value;
            if(phone == ""){
                document.getElementById("phoneP").innerText="*该项必填!";
                return false;
            }else {
                var flag=phone.length==11;
                if(flag){
                    document.getElementById("phoneP").innerHTML="<img width='30' height='20' src='../img/gou.png'/>";
                    return flag;
                }else {
                    document.getElementById("phoneP").innerText="请输入11位手机号!";
                    return flag;
                }
            }
        }
        function checkSex() {
            var sexM=document.getElementById("sexMan").value;
            var sexW=document.getElementById("sexWoman").value;
            if(sexM != undefined || sexW != undefined){
                document.getElementById("sexP").innerHTML="<img width='30' height='20' src='../img/gou.png'/>";
                return true;
            }else {
                return true;
            }
        }
        function checkBir() {
            var bir=document.getElementById("bir").value;
            if(bir == ""){
                document.getElementById("birP").innerHTML="<img width='30' height='20' src='../img/gou.png'/>";
                return true;
            }else{
                //获取输入的时间"2019-01-06"
                var year = bir.substring(0,4);
                var month = bir.substring(5,7);
                var day = bir.substring(8,10);
                //外国的月份 = 月份-1
                var x=new Date();
                x.setFullYear(+year,(+month-1),+day);
                var today = new Date();

                if(x < today){
                    document.getElementById("birP").innerHTML="<img width='30' height='20' src='../img/gou.png'/>";
                    return true;
                }else {
                    document.getElementById("birP").innerText="生日不能大于今天!";
                    return false;
                }
            }
        }
        function checkVerify() {
            var verify=document.getElementById("verify").value;
            if(verify == ""){
                document.getElementById("verifyP").innerText="*该项必填!";
                return false;
            }else {
                var flag=verify==="jgmkj";
                if(flag){
                    document.getElementById("verifyP").innerHTML="<img width='30' height='20' src='../img/gou.png'/>";
                    return flag;
                }else {
                    document.getElementById("verifyP").innerText="验证码错误!";
                    return flag;
                }
            }
        }
    </script>
</head>
<body>
    <div class="all">
        <div class="left">
            <p>新用户注册</p>
            <p>USER REGISTER</p>
        </div>
        <div class="center">
            <form action="Success.html" method="post" id="testForm">
                <table>
                    <tr>
                        <td  class="td_left">
                            <label for="uname">UName</label>
                        </td>
                        <td class="td_center">
                            <input id="uname" class="input" type="text" name="uname"  placeholder="请输入账号" onblur="checkUName()">
                        </td>
                        <td class="td_right">
                            <p id="unameP" style="color:red;"></p>
                        </td>
                    </tr>9
                    <tr>
                        <td class="td_left">
                        <label for="upass">UPass</label>
                        </td>
                        <td class="td_center">
                            <input id="upass" class="input" type="password" name="password"  placeholder="请输入密码" onblur="checkUPass()">
                        </td>
                        <td class="td_right">
                            <p id="upassP" style="color:red;"></p>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                        <label for="email">Email</label>
                        </td>
                        <td class="td_center" >
                            <input id="email" class="input" type="email" name="email"  placeholder="请输入邮箱" onblur="checkEmail()">
                        </td>
                        <td class="td_right">
                            <p id="emailP" style="color:red;"></p>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                        <label for="relname">RelName</label>
                        </td>
                        <td class="td_center">
                            <input class="input" id="relname" type="text" name="relname" placeholder="请输入真实姓名" onblur="checkName()">
                        </td>
                        <td class="td_right">
                            <p id="relnameP" style="color: red"></p>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="phone">Phone</label>
                        </td>
                        <td class="td_center">
                            <input id="phone" class="input" type="text" name="phone"  placeholder="请输入手机号" onblur="checkPhone()">
                        </td>
                        <td class="td_right">
                            <p id="phoneP" style="color:red;"></p>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label>Sex</label>
                        </td>
                        <td class="td_center" id="sex">
                            <input type="radio" name="sex" value="0" id="sexMan" onblur="checkSex()">男
                            <input type="radio" name="sex" value="1" id="sexWoman" onblur="checkSex()">女
                        </td>
                        <td class="td_right">
                            <p id="sexP" style="color: red"></p>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                        <label for="bir">Birthday</label>
                        </td>
                        <td class="td_center">
                            <input id="bir" class="input" type="date" name="birthday"  placeholder="请输入生日" onblur="checkBir()">
                        </td>
                        <td class="td_right">
                            <p id="birP" style="color:red;"></p>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="verify">Verify</label>
                        </td>
                        <td class="td_center">
                            <input id="verify" class="verify" type="text" name="verify"  placeholder="请输入验证码" onblur="checkVerify()">
                            <img class="img" src="../img/verify_code.jpg">
                        </td>
                        <td class="td_right">
                            <p id="verifyP" style="color:red;"></p>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" class="reg_td">
                            <input type="submit" value="注册" class="reg">
                            <input type="reset" value="重置" class="reg">
                        </td>
                    </tr>
                </table>
            </form>
        </div>
        <div class="right">
            <p>已有账号?<a href="Success.html">立即登录</a></p>
        </div>
    </div>
</body>
</html>
分享至 : QQ空间
收藏

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马
关闭

站长推荐 上一条 /5 下一条