js验证模型自我实现的具体方法

下面是关于"js验证模型自我实现的具体方法"的完整攻略及示例：

1. 确定验证规则及需求

在实现js验证模型之前，需要明确业务场景下需要验证哪些数据和如何验证，需要明确以下几点：

• 验证的字段名称
• 验证规则（如是否为空、长度要求、数据类型、特殊字符等要求）
• 验证提示语（该字段验证未通过时应该显示什么提示）

比如，在一个注册页面中，需要验证用户名、密码和确认密码是否符合条件。则需要明确以下内容：

• 验证用户名是否为空、长度是否大于等于6、是否包含特殊字符；
• 验证密码是否为空、长度是否大于等于6、是否包含特殊字符、大小写字母和数字；
• 验证确认密码是否与密码一致。

2. 实现验证方法

接下来，需要实现一个验证方法，该方法可以接受需要验证的数据和相应的验证规则，如果验证不通过，则会返回相应的提示语，如果验证通过，则返回true。

一个简单的验证模型可以看作是如下所示：

function validate(value, rule) {
  if (rule.required && !value.trim()) {
    return rule.message || '该字段不能为空'
  }

  if (rule.min && value.length < rule.min) {
    return rule.message || '该字段长度不能小于' + rule.min
  }

  if (rule.max && value.length > rule.max) {
    return rule.message || '该字段长度不能大于' + rule.max
  }

  if (rule.pattern && !rule.pattern.test(value)) {
    return rule.message || '该字段格式不正确'
  }

  // 添加自定义规则
  if (rule.validator && typeof rule.validator === 'function') {
    return rule.validator(value)
  }

  return true
}

上面的代码中，validate是一个用于验证数据的方法，接受两个参数，value是需要验证的数据，rule是验证规则。其中rule是包含多个验证规则的对象，每个验证规则可以包含以下属性：

• required：表示数据是否为必填项；
• min：表示数据的最小长度；
• max：表示数据的最大长度；
• pattern：表示数据格式要求的正则表达式；
• message：表示验证不通过时的提示语；
• validator：表示自定义验证方法，可以是一个函数，返回自定义的错误提示信息。

在validate方法中，根据传入的验证规则，逐个验证数据是否符合要求。如果有任何一个验证规则不通过，则直接返回验证不通过的提示语。如果全部验证通过，则返回true。

同时，在验证方法中，还可以添加自定义规则，比如：

validate(value, {
  validator: function(value) {
    if (value.indexOf('test') !== -1) {
      return '包含敏感词汇'
    }
    return true
  }
})

3. 在表单中使用验证方法

在上面的两个步骤中，我们已经实现了一个简单的验证模型。接下来，需要把这个验证模型应用到表单中。

假设我们有如下表单：

<form>
  <div>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username">
    <span class="error-message"></span>
  </div>
  <div>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password">
    <span class="error-message"></span>
  </div>
  <div>
    <label for="confirm-password">确认密码：</label>
    <input type="password" id="confirm-password" name="confirmPassword">
    <span class="error-message"></span>
  </div>
  <button type="submit">提交</button>
</form>

我们可以在表单中监听submit事件，并在事件中进行表单验证：

document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault()

  // 验证用户名
  const username = document.querySelector('#username').value
  const usernameRule = {
    required: true,
    min: 6,
    max: 20,
    pattern: /^[a-zA-Z0-9_]*$/,
    message: '用户名格式不正确'
  }
  const usernameErrorMessage = validate(username, usernameRule)
  const usernameErrorElement = document.querySelector('#username ~ .error-message')
  if (usernameErrorMessage !== true) {
    usernameErrorElement.innerHTML = usernameErrorMessage
    return
  }
  usernameErrorElement.innerHTML = ''

  // 验证密码
  const password = document.querySelector('#password').value
  const passwordRule = {
    required: true,
    min: 6,
    max: 20,
    pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]*$/,
    message: '密码格式不正确'
  }
  const passwordErrorMessage = validate(password, passwordRule)
  const passwordErrorElement = document.querySelector('#password ~ .error-message')
  if (passwordErrorMessage !== true) {
    passwordErrorElement.innerHTML = passwordErrorMessage
    return
  }
  passwordErrorElement.innerHTML = ''

  // 验证确认密码
  const confirmPassword = document.querySelector('#confirm-password').value
  const confirmPasswordRule = {
    validator: function(value) {
      if (value !== password) {
        return '确认密码与密码不一致'
      }
      return true
    }
  }
  const confirmPasswordErrorMessage = validate(confirmPassword, confirmPasswordRule)
  const confirmPasswordErrorElement = document.querySelector('#confirm-password ~ .error-message')
  if (confirmPasswordErrorMessage !== true) {
    confirmPasswordErrorElement.innerHTML = confirmPasswordErrorMessage
    return
  }
  confirmPasswordErrorElement.innerHTML = ''

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

在上面的代码中，我们在表单的submit事件中，分别获取了用户名、密码和确认密码的值，并调用validate方法进行验证。如果验证不通过，则将相应的错误提示信息展示在对应的错误提示元素中。如果全部验证通过，则调用submit方法提交表单。