vue validate

// 使用 Vuelidate 进行表单验证的示例

// 首先安装 Vuelidate
// npm install @vuelidate/core @vuelidate/validators

<template>
  <form @submit.prevent="submitForm">
    <div>
      <label for="name">Name:</label>
      <input id="name" v-model="name" type="text" />
      <span v-if="v$.name.$error">{{ v$.name.$errors[0].$message }}</span>
    </div>

    <div>
      <label for="email">Email:</label>
      <input id="email" v-model="email" type="email" />
      <span v-if="v$.email.$error">{{ v$.email.$errors[0].$message }}</span>
    </div>

    <button type="submit">Submit</button>
  </form>
</template>

<script>
import { useVuelidate } from '@vuelidate/core'
import { required, email } from '@vuelidate/validators'

export default {
  setup () {
    return { v$: useVuelidate() }
  },
  data() {
    return {
      name: '',
      email: ''
    }
  },
  validations() {
    return {
      name: { required },
      email: { required, email }
    }
  },
  methods: {
    submitForm() {
      this.v$.$validate()
      if (!this.v$.$error) {
        // 表单验证通过，可以提交
        console.log('Form submitted:', { name: this.name, email: this.email })
      } else {
        // 表单验证失败
        console.log('Validation failed')
      }
    }
  }
}
</script>

解释说明：

1. 安装依赖：首先需要安装 @vuelidate/core 和 @vuelidate/validators。
2. 模板部分：包含一个简单的表单，有两个输入框（name 和 email），并使用 v-if 来显示验证错误信息。
3. 脚本部分：
   • 使用 useVuelidate 来初始化验证器。
   • 定义 data 属性来存储表单字段的值。
   • 使用 validations 方法定义验证规则，这里对 name 和 email 字段进行了必填和格式验证。
   • submitForm 方法用于提交表单，并在提交前调用 v$.$validate() 进行验证，根据验证结果执行相应逻辑。