vue健壮性插件vee-validate

1.简介

vee-validate is a template-based validation framework for Vue.js that allows you to validate inputs and display errors.

专门搭配vue的健壮性插件
官网

2. 安装

npm i vee-validate --save

3.使用

使用 validationProvider对需要校验的字段进行包裹

<validation-provider rules="secret" v-slot="{ errors }">
  <input v-model="email" type="text" />
  <span>{{ errors[0] }}</span>
</validation-provider>

4. 自定义校验规则

main.js中

extend('positive', (value) => {
  if (value >= 0) {
    return true;
  }

  return 'This value must be a positive number';
});

1.表单提交前校验

使用ref

<template>
  <ValidationObserver ref="form">
    <form @submit.prevent="onSubmit">
      <ValidationProvider name="E-mail" rules="required|email" v-slot="{ errors }">
        <input v-model="email" type="email">
        <span>{{ errors[0] }}</span>
      </ValidationProvider>

      <ValidationProvider name="First Name" rules="required|alpha" v-slot="{ errors }">
        <input v-model="firstName" type="text">
        <span>{{ errors[0] }}</span>
      </ValidationProvider>

      <ValidationProvider name="Last Name" rules="required|alpha" v-slot="{ errors }">
        <input v-model="lastName" type="text">
        <span>{{ errors[0] }}</span>
      </ValidationProvider>

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

<script>
export default {
  data: () => ({
    firstName: '',
    lastName: '',
    email: ''
  }),
  methods: {
    onSubmit () {
      this.$refs.form.validate().then(success => {
        if (!success) {
          return;
        }

        alert('Form has been submitted!');

        // Resetting Values
        this.firstName = this.lastName = this.email = '';

        // Wait until the models are updated in the UI
        this.$nextTick(() => {
          this.$refs.form.reset();
        });
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
span {
  display: block;
}
</style>