注册表单

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户注册页面</title>
<script type="text/javascript">
    //验证表单
    function run() {
        //用户名不能为空
        //获取用户名的值
        //var name=document.getElementById("nameId").value;
        //var name=document.form1.username.value;
        var name = document.getElementById("nameId").value;
        if (name.trim() == "") {
            alert("用户名不能为空");
            return false;
        }
        //密码多于6位
        var pwd = document.form1.password.value;
        if (pwd.trim().length < 6) {
            alert("至少6密码");
            return false;

        }
        //确认密码一致
        var repwd = document.form1.repassword.value;
        if (repwd != pwd) {
            alert("密码不一致");
            return false;
        }
        //邮箱规则
        var email = document.form1.email.value;
        //正则表达式
        if(!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email)){
            alert("邮箱错误");
            return false;
        
        }
    }
</script>
</head>
<body>
    <form name="form1" action="https://www.baidu.com" onsubmit="return run()">
        <table border="1" width="40%" cellpadding="10" align="center">
            <th colspan="2">用户注册页面</th>
            <tr>
                <td>用户名:</td>
                <td><input type="text" name="username" id="nameId"  /></td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><input type="password" name="password" /></td>
            </tr>
            <tr>
                <td>确认密码:</td>
                <td><input type="password" name="repassword" /></td>
            </tr>
            <tr>
                <td>邮箱:</td>
                <td><input type="eamil" name="email" /></td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit" value="注册"  /></td>
            </tr>

        </table>

    </form>
</body>
</html>

 

posted @ 2018-09-18 19:19  privking  阅读(187)  评论(0编辑  收藏  举报