简单的js表单验证函数

下面是“简单的js表单验证函数”完整攻略的具体步骤：

1. 确定需求

在编写表单验证函数之前，需要明确需要验证的表单项和验证规则，以确定函数的参数和返回值。例如：

• 验证规则：姓名为必填项，只能输入中文字符
• 函数参数：需要验证的表单项的id或class名
• 函数返回值：验证通过返回true，验证失败返回false

2. 编写函数

根据需求编写表单验证函数，函数名称可以根据实际需求取名。例如：

function checkName(id) {
  var name = document.getElementById(id).value;
  var reg = /^[\u4e00-\u9fa5]{2,4}$/;
  if (reg.test(name)) {
    return true;
  } else {
    alert('请输入2-4个中文字符');
    return false;
  }
}

以上函数的逻辑为：
- 获取传入id对应的表单项的值
- 使用正则表达式判断该值是否符合规则
- 如果符合规则，返回true，否则弹出提示框并返回false

3. 调用函数

在需要验证的表单项的对应事件中调用上一步编写的函数，判断表单项输入是否符合要求。例如：

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" onchange="checkName('name')">
  <button type="submit">提交</button>
</form>

以上代码中，当姓名输入框的内容发生改变时，调用checkName函数进行验证。如果验证失败，会弹出提示框提醒用户重新输入。

4. 添加更多验证规则

根据实际需求，可以添加更多的表单验证规则。例如：

function checkEmail(id) {
  var email = document.getElementById(id).value;
  var reg = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
  if (reg.test(email)) {
    return true;
  } else {
    alert('邮箱格式不正确');
    return false;
  }
}

以上函数的逻辑为：
- 获取传入id对应的表单项的值
- 使用正则表达式判断该值是否符合规则
- 如果符合规则，返回true，否则弹出提示框并返回false

调用方法同上。

示例说明

示例1：验证单一表单项

例如，验证“用户名”文本框只能输入1-10个字符的数字和字母：

function checkUserName(id) {
  var username = document.getElementById(id).value;
  var reg = /^[a-zA-Z0-9]{1,10}$/;
  if (reg.test(username)) {
    return true;
  } else {
    alert('用户名只能由1-10个数字和字母组成');
    return false;
  }
}

示例2：验证多个表单项

例如，验证“用户名”和“密码”两个文本框的内容是否符合要求，并在提交按钮点击时验证：

<form>
  <label for="username">用户名：</label>
  <input type="text" id="username"><br>
  <label for="password">密码：</label>
  <input type="password" id="password"><br>
  <button type="submit" onclick="return checkForm()">提交</button>
</form>

function checkForm() {
  if (!checkUserName('username')) {
    return false;
  }
  if (!checkPassword('password')) {
    return false;
  }
  return true;
}

以上程序的逻辑为：
- 当“提交”按钮点击时，调用函数checkForm进行验证
- checkForm函数依次调用checkUserName和checkPassword函数进行验证
- 如有任一表单项验证不通过，则返回false中止提交
- 如两个表单项都验证通过，则返回true允许提交