利用JavaScript操作表单的小例子

最新推荐文章于 2020-07-18 10:40:29 发布

左岸16

最新推荐文章于 2020-07-18 10:40:29 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript 表单

本文链接：https://blog.youkuaiyun.com/Phoebe_16/article/details/52269287

JavaScript 专栏收录该内容

38 篇文章

订阅专栏

本文介绍了一个简单的JavaScript函数，用于验证用户注册表单的数据有效性。主要关注点包括用户名长度（3-10位字母或数字）、密码强度（6-20位）以及两次输入密码的一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

t检查用户注册信息是否正确，在以下情况不满足时报错并阻止提交表单：

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

口令必须是6-20位；

两次输入口令必须一致。

<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>

'use strict';
var checkRegisterForm = function () {
var username = document.getElementById('username');
    var password = document.getElementById('password'); 
    var password2 = document.getElementById('password-2');
    var re_username = /^\w{3,10}$/;
    var re_passwd = /.{6,20}/;
    if (!re_username.test(username.value)) {
        alert("用户名长度须为3-10位字母或数字");
        return false; 
    }
    if (!re_passwd.test(password.value)) {
        alert("口令必须是6-20位");
        return false;
    }
    if (password.value != password2.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');
    }
})();