vue以A结尾form表单校验

可以使用Vue.js的内置校验器和自定义校验器来对表单进行校验。

内置校验器：

Vue.js提供了内置的校验器，可以通过在表单元素上添加一些属性来启用这些校验器。例如：

- required：必填项
- email：邮箱格式
- min：最小值
- max：最大值
- minlength：最小长度
- maxlength：最大长度
- pattern：正则表达式

示例：

<template>
  <div>
    <form>
      <label for="name">姓名：</label>
      <input type="text" id="name" v-model="name" required>

      <label for="email">邮箱：</label>
      <input type="email" id="email" v-model="email" required>

      <label for="age">年龄：</label>
      <input type="number" id="age" v-model="age" min="18" max="60">

      <label for="password">密码：</label>
      <input type="password" id="password" v-model="password" minlength="6" maxlength="16" pattern="^[a-zA-Z0-9]{6,16}$">

      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      email: '',
      age: '',
      password: ''
    }
  }
}
</script>

自定义校验器：

除了内置校验器外，我们还可以使用自定义校验器来校验表单。自定义校验器需要定义一个方法，在该方法中对表单元素的值进行校验。如果校验不通过，可以返回一个错误信息，否则返回true。

示例：

<template>
  <div>
    <form>
      <label for="username">用户名：</label>
      <input type="text" id="username" v-model="username" v-validate-username>

      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: ''
    }
  },
  methods: {
    validateUsername() {
      // 校验用户名
      if (this.username === 'admin') {
        return true
      } else {
        return '用户名必须为admin'
      }
    }
  },
  directives: {
    validateUsername: {
      bind(el, binding, vnode) {
        const validate = vnode.context.validateUsername
        el.addEventListener('input', () => {
          const res = validate()
          if (res === true) {
            el.classList.remove('error')
            el.classList.add('success')
          } else {
            el.classList.remove('success')
            el.classList.add('error')
            alert(res)
          }
        })
      }
    }
  }
}
</script>

在上面的例子中，我们定义了一个自定义校验器v-validate-username，该校验器绑定在用户名输入框上。当用户输入框的值改变时，会触发校验器的回调函数validateUsername()，该函数会校验用户名是否为'admin'，如果不是，则返回一个错误信息，否则返回true。如果校验不通过，会在输入框下方显示错误提示。如果校验通过，则会在输入框下方显示成功提示。