Vue rules校验规则详解

在Vue.js中，表单验证规则通常定义在组件的data函数中，使用计算属性或者方法也是可行的。这里是一个简单的例子，展示了如何定义和使用Vue的验证规则：

<template>
  <div>
    <form @submit.prevent="submitForm">
      <input v-model="form.name" :rules="nameRules">
      <input v-model="form.email" :rules="emailRules">
      <button type="submit">Submit</button>
    </form>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        name: '',
        email: ''
      },
      nameRules: [
        v => !!v || 'Name is required',
        v => (v && v.length <= 10) || 'Name must be less than 10 characters'
      ],
      emailRules: [
        v => !!v || 'E-mail is required',
        v => /.+@.+\..+/.test(v) || 'E-mail must be valid'
      ]
    };
  },
  methods: {
    submitForm() {
      // 表单验证逻辑
      if (this.$refs.form.validate()) {
        // 提交表单逻辑
      }
    }
  }
};
</script>

在这个例子中，我们定义了两个规则数组nameRules和emailRules，它们分别用于name和email字段的验证。每个规则是一个函数，接受输入值作为参数，如果输入值不符合规则，函数应该返回一个字符串，表示错误信息。

在<template>中，我们使用v-model指令绑定输入值，并通过:rules属性绑定对应的验证规则。使用@submit.prevent防止表单默认提交行为，然后我们可以在submitForm方法中实现自己的提交逻辑，并通过this.$refs.form.validate()来手动触发表单的验证。