表单用户密码简单验证

用户名必须是3-10位英文字母或数字；

口令必须是6-20位；

两次输入口令必须一致。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<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>
<script>
    var checkRegisterForm = function () {
        var uname = document.getElementById('username');
        var pwd = document.getElementById('password');
        var pwd2 = document.getElementById('password-2');
        var re1 = /^[0-9a-zA-Z]{3,10}$/;
        var re2 = /^\w{6,20}$/;

        if (!re1.test(uname.value)) {
            alert("用户名必须是3-10位英文字母或数字");
            return false;
        }
        else if(!re2.test(pwd.value)){
            alert("口令必须是6-20位");
            return false;

        }else if(!(pwd.value === pwd2.value)){
            alert("重复密码有误");
            return false;
        }
        return true;
    }
    ;(function () {
        window.testFormHandler = checkRegisterForm;
        var form = document.getElementById('test-register');
        if (form.dispatchEvent) {
            var event = new Event('submit', {
                bubbles: true,
                cancelable: true
            });
            form.dispatchEvent(event);
        } else {
            form.fireEvent('onsubmit');
        }
    })();
</script>
</html>

来源：CSDN

作者：别叫她写代码

链接：https://blog.csdn.net/mx_is_bang/article/details/103479577

标签

表单验证

return

html表单