原生js 实现表单验证功能

2023年6月10日下午6:38 • JavaScript

下面是关于“原生js实现表单验证功能”的完整攻略：

需求分析和实现思路

表单验证功能是Web开发中必不可少的功能之一，实现表单验证的方法有很多种，包括使用第三方库（如jQuery、Bootstrap等），也可以使用原生的JS来实现。下面是一个原生JS实现表单验证的基本思路：

获取表单元素。
监听表单提交事件。
在表单提交事件的监听函数中，根据表单元素的值执行相应的验证逻辑。
如果验证成功，则提交表单；否则，错误提示。

HTML结构布局

下面是一个简单的表单结构示例：

<form>
  <div>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username">
  </div>
  <div>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password">
  </div>
  <div>
    <button type="submit">登录</button>
  </div>
</form>

JS代码实现

下面是一个使用原生JS实现表单验证功能的代码示例：

const form = document.querySelector('form')

form.addEventListener('submit', (event) => {
  event.preventDefault() // 阻止表单提交

  const username = form.elements.username.value
  const password = form.elements.password.value

  // 验证用户名和密码是否为空
  if (username.trim() === '') {
    showError('请输入用户名')
    return
  }
  if (password.trim() === '') {
    showError('请输入密码')
    return
  }

  // 验证通过，提交表单
  form.submit()
})

function showError(message) {
  const div = document.createElement('div')
  div.className = 'error'
  div.textContent = message
  form.appendChild(div)
}

在上面的代码实现中，我们首先获取了表单元素，并监听了表单提交事件。然后，在表单提交事件的监听函数中，我们通过form.elements获取了表单中的用户名和密码值，并进行了非空验证。如果表单验证通过，则调用form.submit()方法提交表单。如果验证不通过，则调用showError()方法来显示错误提示。

其中，showError()方法用于在表单中添加一个错误提示元素。该方法接收一个参数message，用于指定要显示的错误提示消息。

示例说明

下面提供两个示例，分别演示了如何使用原生JS实现表单验证：

示例一：实现邮箱和手机号验证

const form = document.querySelector('form')

form.addEventListener('submit', (event) => {
  event.preventDefault() // 阻止表单提交

  const email = form.elements.email.value
  const phone = form.elements.phone.value

  // 验证邮箱和手机号是否填写正确
  const emailRegExp = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/
  const phoneRegExp = /^1[3456789]\d{9}$/
  if (!emailRegExp.test(email)) {
    showError('请输入正确的邮箱')
    return
  }
  if (!phoneRegExp.test(phone)) {
    showError('请输入正确的手机号')
    return
  }

  // 验证通过，提交表单
  form.submit()
})

function showError(message) {
  const div = document.createElement('div')
  div.className = 'error'
  div.textContent = message
  form.appendChild(div)
}

在上面的示例中，我们扩展了表单验证功能，实现了邮箱和手机号的验证。在表单提交事件的监听函数中，我们首先获取了表单中的邮箱和手机号值。然后，我们使用正则表达式来验证邮箱和手机号是否填写正确。如果验证失败，则调用showError()方法显示错误提示信息。如果验证通过，则调用form.submit()方法提交表单。

示例二：实现密码复杂度验证

const form = document.querySelector('form')

form.addEventListener('submit', (event) => {
  event.preventDefault() // 阻止表单提交

  const password = form.elements.password.value

  // 验证密码是否符合要求
  const passwordRegExp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/
  if (!passwordRegExp.test(password)) {
    showError('密码必须包含大小写字母和数字，长度只能在8-16个字符之间')
    return
  }

  // 验证通过，提交表单
  form.submit()
})

function showError(message) {
  const div = document.createElement('div')
  div.className = 'error'
  div.textContent = message
  form.appendChild(div)
}

在上面的示例中，我们扩展了表单验证功能，实现了密码复杂度的验证。在表单提交事件的监听函数中，我们首先获取了表单中的密码值。然后，我们使用正则表达式来验证密码是否符合要求。如果验证失败，则调用showError()方法显示错误提示信息。如果验证通过，则调用form.submit()方法提交表单。

希望以上示例能够帮助你理解如何使用原生JS实现表单验证功能。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：原生js 实现表单验证功能 - Python技术站