步骤一：获取注册表单中需要验证的DOM元素

在注册表单中，可能需要验证用户的姓名、邮箱、密码、确认密码等信息，我们需要获取这些DOM元素，方便后面使用。

<body>
    <form id="registerForm">
        <div>
            <label for="userName">用户名：</label>
            <input type="text" id="userName" name="userName" />
        </div>
        <div>
            <label for="email">电子邮箱：</label>
            <input type="text" id="email" name="email" />
        </div>
        <div>
            <label for="password">设置密码：</label>
            <input type="password" id="password" name="password" />
        </div>
        <div>
            <label for="confirmPassword">确认密码：</label>
            <input type="password" id="confirmPassword" name="confirmPassword" />
        </div>
        <div>
            <button type="submit">注册</button>
        </div>
    </form>
</body>

<script>
    const formEl = document.querySelector('#registerForm');
    const userNameEl = document.querySelector('#userName');
    const emailEl = document.querySelector('#email');
    const passwordEl = document.querySelector('#password');
    const confirmPasswordEl = document.querySelector('#confirmPassword');
</script>

步骤二：定义验证函数

接下来，我们需要为每个输入框元素定义一个验证函数，用于验证输入是否合法。一个简单的验证函数应该接受一个参数，表示需要验证的值，返回一个布尔值，表示是否合法。

以下是一个例子，用于验证用户名是否为合法字符串。

function validateUsername(username) {
  const usernameReg = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/; // 匹配由数字字母下划线组成的5-16位字符串，且首字母必须是字母 
  return usernameReg.test(username);
}

步骤三：注册表单提交事件

接下来，我们需要为注册表单添加一个提交事件，用于在用户提交表单时验证输入是否合法。在提交事件回调函数中，我们需要对每个输入框元素依次进行验证。

以下是一个例子：

formEl.addEventListener('submit', function(e) {
    e.preventDefault(); // 防止浏览器默认刷新
    const username = userNameEl.value.trim();
    const email = emailEl.value.trim();
    const password = passwordEl.value.trim();
    const confirmPassword = confirmPasswordEl.value.trim();
    if (!validateUsername(username)) {
        alert('用户名不合法！');
        return;
    }
    if (!validateEmail(email)) {
        alert('邮箱不合法！');
        return;
    }
    if (!validatePassword(password)) {
        alert('密码长度不合法！');
        return;
    }
    if (password !== confirmPassword) {
        alert('两次密码不一致！');
        return;
    }
    // 表单提交后续操作
});

上面这个例子，通过e.preventDefault()方法阻止了表单默认的提交刷新行为。然后分别调用验证函数对每个表单元素的值做出了验证，并在验证不合法时弹出相应的提示，否则直接执行表单提交后续的操作。

示例一：验证邮箱

定义邮箱合法性验证函数：

function validateEmail(email) {
  const emailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
  return emailReg.test(email);
}

在表单提交回调函数中使用该函数进行验证：

formEl.addEventListener('submit', function(e) {
    e.preventDefault(); // 防止浏览器默认刷新
    const username = userNameEl.value.trim();
    const email = emailEl.value.trim();
    const password = passwordEl.value.trim();
    const confirmPassword = confirmPasswordEl.value.trim();
    if (!validateUsername(username)) {
        alert('用户名不合法！');
        return;
    }
    if (!validateEmail(email)) {
        alert('邮箱不合法！');
        return;
    }
    if (!validatePassword(password)) {
        alert('密码长度不合法！');
        return;
    }
    if (password !== confirmPassword) {
        alert('两次密码不一致！');
        return;
    }
    // 表单提交后续操作
});

示例二：验证密码长度

定义密码合法性验证函数：

function validatePassword(password) {
  return password.length >= 8 && password.length <= 16;
}

在表单提交回调函数中使用该函数进行验证：

formEl.addEventListener('submit', function(e) {
    e.preventDefault(); // 防止浏览器默认刷新
    const username = userNameEl.value.trim();
    const email = emailEl.value.trim();
    const password = passwordEl.value.trim();
    const confirmPassword = confirmPasswordEl.value.trim();
    if (!validateUsername(username)) {
        alert('用户名不合法！');
        return;
    }
    if (!validateEmail(email)) {
        alert('邮箱不合法！');
        return;
    }
    if (!validatePassword(password)) {
        alert('密码长度不合法！');
        return;
    }
    if (password !== confirmPassword) {
        alert('两次密码不一致！');
        return;
    }
    // 表单提交后续操作
});

上面这个例子，validatePassword函数用于验证密码长度是否在8到16个字符之间。在表单提交事件回调函数中，如果密码不合法，会弹出一个提示框，提示密码长度不合法。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js注册时输入合法性验证方法 - Python技术站