vue使用rule自定义验证

在 Vue 中，我们可以使用 `rules` 对象来自定义验证规则。下面是一个示例：

<template>
  <div>
    <input v-model="phoneNumber" type="text" />
    <span v-if="error" style="color: red">{{ error }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phoneNumber: '',
      error: ''
    }
  },
  methods: {
    validatePhoneNumber() {
      const regex = /^1\d{10}$/;
      if (!regex.test(this.phoneNumber)) {
        this.error = '请输入正确的手机号码';
      } else {
        this.error = '';
      }
    }
  },
  watch: {
    phoneNumber() {
      this.validatePhoneNumber();
    }
  }
}
</script>

在上面的示例中，我们定义了一个 `validatePhoneNumber` 方法，该方法用于验证手机号码的格式。在 `watch` 中监听 `phoneNumber` 的变化，一旦发生变化就会调用 `validatePhoneNumber` 方法进行验证，并将验证结果保存在 `error` 变量中。最后，在模板中根据 `error` 的值来显示错误信息。

当然，这只是一个简单的示例，你可以根据实际需求来定义更复杂的验证规则。