JavaScript操作表单

廖雪峰JavaScript教程--操作表单练习：
利用JavaScript检查用户注册信息是否正确，在以下情况不满足时报错并阻止提交表单：

  • 用户名必须是3-10位英文字母或数字；
  • 口令必须是6-20位；
  • 两次输入口令必须一致。
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        'use strict';
        function checkRegisterForm() {
        // TODO:
            var username = document.getElementById('username').value;
            var password1 = document.getElementById('password').value;
            var password2 = document.getElementById('password-2').value;    
            var usernameRe = /\w{3,10}/;

            if (!usernameRe.test(username)){
                alert('用户名必须是3­-10位英文字母或数字');
                return false;
            }

            if (password1.length < 6 || password1 > 20) {
                alert('口令必须是6­-20位');
                return false;
            }

            if (password1 !== password2) {
                alert('两次输入口令必须一致')
                return false;
            }

            return true;
        }
    </script>
</head>
<body>
    <!-- HTML结构 -->
    <form id="test-register" action="#" target="_blank" onsubmit="return checkRegisterForm()">
        <p id="test-error" style="color:red"></p>
        <p>
            用户名: <input type="text" id="username" name="username">
        </p>
        <p>
            口令: <input type="password" id="password" name="password">
        </p>
        <p>
            重复口令: <input type="password" id="password-2">
        </p>
        <p>
            <button type="submit">提交</button> <button type="reset">重置</button>
        </p>
    </form>

</body>
</html>
posted @ 2017-03-10 00:13  Eliefly  阅读(449)  评论(0)    收藏  举报