Vue를 통해 동적 양식 유효성 검사를 구현하는 방법

methods: {
  validateEmail(email) {
    // 正则表达式验证邮箱格式是否正确
    const reg = /^([a-zA-Z]|[0-9])(w|-)+@[a-zA-Z0-9]+.[a-zA-Z]{2,4}$/;
    return reg.test(email);
  }
}

<input v-model="email" />
<span v-show="!validateEmail(email)">邮箱格式不正确</span>

<input type="text" v-model="name" required />
<span v-show="$v.name.$error">姓名不能为空</span>

<input type="email" v-model="email" />
<span v-show="$v.email.$error">邮箱格式不正确</span>

<input type="number" v-model="age" />
<span v-show="$v.age.$error">年龄必须是数字</span>

<template>
  <div>
    <form @submit.prevent="submitForm">
      <label>姓名:</label>
      <input type="text" v-model="name" v-validate="'required'" />
      <span v-show="errors.has('name')">{{ errors.first('name') }}</span>
       
      <label>邮箱:</label>
      <input type="text" v-model="email" v-validate="'required|email'" />
      <span v-show="errors.has('email')">{{ errors.first('email') }}</span>
       
      <label>密码:</label>
      <input type="password" v-model="password" v-validate="'required'" />
      <span v-show="errors.has('password')">{{ errors.first('password') }}</span>
      
      <button type="submit" :disabled="errors.any()">提交</button>
    </form>
  </div>
</template>

<script>
import { required, email } from 'vee-validate/dist/rules';
import { extend, ValidationProvider, ValidationObserver, setInteractionMode } from 'vee-validate';

setInteractionMode('eager');

extend('required', required);
extend('email', email);

export default {
  components: {
    ValidationProvider,
    ValidationObserver,
  },

  data() {
    return {
      name: '',
      email: '',
      password: '',
    };
  },

  methods: {
    submitForm() {
      alert('表单验证通过，开始提交数据');
    },
  },
};
</script>