Javascript学习：综合案例1--注册页面，提交、重置（表单验证）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            margin:30px auto;
            border:2px solid orange;
        }
        td{
            height:40px;line-height:40px;
            padding: 5px;width:200px;
            background: rgba(100,50,10,0.3);
            text-align: right;
            font-size: 18px;
        }

        td:first-child{
            width:150px;
        }

        .lasttd{
            text-align: center;
        }
        .sextd{
            text-align: left;
        }
        select,input{
            width: 200px;
            height: 40px;
            font-size: 18px;
        }

        [type=radio]{
            width: 18px;height: 18px;
            outline: none;
        }
        [type=submit],[type=reset]{
            width:100px;height: 36px;
            outline:none;border-radius: 18px;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>用户名：</td>
            <td><input type="text" id="st1"></td>
        </tr>
        <tr>
            <td>联系电话：</td>
            <td><input type="number" id="st2"></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password" id="st3"></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input type="password" id="st4" ></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td class="sextd">
                <input type="radio" id="sex1" name="sex" checked>男
                <input type="radio" id="sex2" name="sex">女
            </td>
        </tr>
        <tr>
            <td>学历：</td>
            <td>
                <select name="select" id="select">
                    <option value="高中">高中</option>
                    <option value="高中">大专</option>
                    <option value="高中">本科</option>
                    <option value="高中">本科及以上</option>
                </select>
            </td>
        </tr>
        <tr>
            <td colspan="2" class="lasttd">
                <input type="submit" value="提交" onclick="check()">
                <input type="reset" value="重置" onclick="reset()">
            </td>

        </tr>

    </table>



<script>
    /*自定义通过Id来获取元素的函数 */
    function $(id) {
        return document.getElementById(id)
    }


    /*提交按钮：提交前检测 */

    function check() {
       // alert("111")
        //检测用户名是否为空
        var st1 = $("st1").value;
        if(st1 == ""){
            alert("用户名不得为空！");
            return false ;
        };

        //检测手机号是否为11位数字
        var st2 = $("st2").value;
        if(st2.length!=11 || st2.substr(0,1)!=1 ){
            alert("手机号格式不正确！");
            return false ;
        };

        //检测密码是否为空
        var st3 = $("st3").value ;
        if(st3 ==""){
            alert("密码不得为空！");
            return false ;
        }

        //检测密码是否一致
        var st4 = $("st4").value ;
        if(st3!=st4){
            alert("密码输入不一致！");
            return false ;
        }

        var sex = $("sex1").checked ? "男":"女";
        var select = $("select").value ;

        //输出提交内容
        var info = "";
        info+="\n 用户名："+ st1;
        info+="\n 联系方式："+ st2;
        info+="\n 密码："+ st4;
        info+="\n 性别："+ sex;
        info+="\n 学历："+ select;

        alert(info);

        st1=st2=st3=st4=sex=select=info=null;  //及时解除不再使用的变量引用

    }


    /*重置按钮 */
    function reset() {
        $("st1").value = $("st2").value =$("st3").value=$("st4").value="";
        $("sex1").checked = true;
        $("select").value = "高中";
        return false ;
    }





</script>
</body>
</html>
Javascript学习：综合案例1--注册页面，提交、重置（表单验证）

猜你喜欢
