vue表单校验rules 规则

Vue表单校验规则（rules）是一种用于验证表单数据的对象。它通常用于Vue.js框架中的表单组件中，可以在表单提交前进行数据验证，以确保数据的有效性和一致性。以下是Vue表单校验rules规则的一些常见属性：

- required：必填项
- min：最小值
- max：最大值
- minLength：最小长度
- maxLength：最大长度
- pattern：正则表达式
- email：电子邮件
- url：网址
- date：日期
- digits：数字

除了以上常见属性，还可以自定义规则，如：

rules: {
  // 自定义规则
  age: [
    { required: true, message: '请输入年龄' },
    { type: 'number', message: '年龄必须为数字值' },
    { min: 18, max: 120, message: '年龄必须在18~120之间' }
  ]
}

在Vue.js中，可以通过v-model指令绑定表单数据，使用rules规则进行验证。例如：

<template>
  <form>
    <label>用户名：</label>
    <input type="text" v-model="username" :class="{ 'is-invalid': errors.username }">
    <div v-if="errors.username" class="invalid-feedback">{{ errors.username }}</div>
    
    <label>密码：</label>
    <input type="password" v-model="password" :class="{ 'is-invalid': errors.password }">
    <div v-if="errors.password" class="invalid-feedback">{{ errors.password }}</div>
    
    <button type="submit" @click.prevent="handleSubmit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      errors: {}
    }
  },
  methods: {
    handleSubmit() {
      const errors = {}
      
      if (!this.username) {
        errors.username = '用户名不能为空'
      }
      
      if (this.password.length < 6) {
        errors.password = '密码长度不能小于6位'
      }
      
      if (Object.keys(errors).length === 0) {
        // 提交表单
      } else {
        this.errors = errors
      }
    }
  }
}
</script>

上面的代码中，使用v-model指令绑定了username和password两个表单数据。在handleSubmit方法中，手动进行了数据验证，并将错误信息存储在errors对象中。如果errors对象不为空，则表示表单数据不合法，需要显示错误提示信息。否则，可以提交表单。这种方式虽然简单，但是需要手动编写大量的验证代码。如果表单比较复杂，这种方式就显得不太方便。因此，可以使用Vue表单校验rules规则来简化表单验证流程。