一个即时表单验证的javascript代码

下面就为您详细讲解如何编写一个即时表单验证的 JavaScript 代码。

编写 JavaScript 表单验证代码的基本步骤

1. 获取表单的各个输入项，如输入框、单选框、多选框等，并对每个输入项都定义一个监听事件（如 onblur、onkeyup 等），监听输入内容的改变。
2. 在监听事件中编写检验函数，该函数应当返回布尔值来表示输入项是否符合要求。可以根据不同的输入项类型（如输入框、单选框、多选框等）编写不同的检验函数。
3. 在检验函数中根据输入项的内容来判断合法性，例如：长度、格式、内容等是否符合要求，然后将结果返回，给出相应的提示信息。
4. 在网页上添加提示信息的位置，例如一个 div 元素等。

示例一：实现用户名的即时验证

1. HTML 代码

<label for="username">用户名：</label>
<input type="text" id="username" />
<div id="username-tip"></div>

1. JavaScript 代码

const usernameInput = document.getElementById('username')
const usernameTip = document.getElementById('username-tip')
const usernameValidator = (value) => {
  if (value.length < 3) {
    return false
  } else {
    return true
  }
}

usernameInput.onblur = () => {
  const isValid = usernameValidator(usernameInput.value)
  if (isValid) {
    usernameTip.innerHTML = ''
  } else {
    usernameTip.innerHTML = '用户名长度需要至少 3 个字符'
  }
}

上述示例中，我们获取了用户名输入框的 HTML 元素和对应的提示信息的 HTML 元素，并添加了一个监听事件 onblur，用于在输入完成后验证是否符合要求。当输入框失去焦点时，我们调用验证函数 usernameValidator，根据输入的内容判断其长度是否符合要求，并根据结果修改提示信息所在的 HTML 元素的 innerHTML 属性。

示例二：实现密码的即时验证

1. HTML 代码

<label for="password">密码：</label>
<input type="password" id="password" />
<div id="password-tip"></div>

1. JavaScript 代码

const passwordInput = document.getElementById('password')
const passwordTip = document.getElementById('password-tip')
const passwordValidator = (value) => {
  const reg = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/
  if (!reg.test(value)) {
    return false
  } else {
    return true
  }
}

passwordInput.onblur = () => {
  const isValid = passwordValidator(passwordInput.value)
  if (isValid) {
    passwordTip.innerHTML = ''
  } else {
    passwordTip.innerHTML = '密码需要至少 8 位，由字母和数字组成'
  }
}

上述示例中，我们获取了密码输入框的 HTML 元素和对应的提示信息的 HTML 元素，并添加了一个监听事件 onblur，用于在输入完成后验证是否符合要求。当输入框失去焦点时，我们调用验证函数 passwordValidator，根据输入的内容判断其是否符合要求（需要至少 8 位，由字母和数字组成），并根据结果修改提示信息所在的 HTML 元素的 innerHTML 属性。

需要注意的是，在实际应用中，应当对所有的输入项都进行验证，而且不同类型的输入项应当使用不同的验证函数。另外，在被验证的 HTML 元素中，可以添加一些 CSS 样式来强调输入项合法或不合法的状态，例如使用不同的颜色、字体等。