前端开发之VeeValidate使用和实例

前言

本文讲解的veeValidate的使用并和elemntForm表单进行比较

组件简介

为了确保通过表单从用户那里收集正确类型的数据，有必要验证表单，以确保用户输入符合预期的模式。VeeValidate是一个可以将这一层功能添加到任何表单组件的包。

效果图

![在这里插入图片描述](https://img-blog.csdnimg.cn/f209eb4ad354463193804c852834dad4.png

vue中使用

使用中使用了elementFrom进行对比

1、安装组件

yarn add vee-validate

npm install vee-validate --save

2、 导入组件并注册

 import { Form, Field, ErrorMessage } from 'vee-validate'
 components: {
  Form,  //外层标签
  Field,	//表单标签
  ErrorMessage,	//将报错以特定的标签显示  as定义标签 name关联表单
},

3、.vue文件

<template>
  <div class="comprehensive-form-container">
    <el-row :gutter="20">
      <el-col
        :lg="{ span: 12, offset: 6 }"
        :md="{ span: 20, offset: 2 }"
        :sm="{ span: 20, offset: 2 }"
        :xl="{ span: 12, offset: 6 }"
        :xs="24"
      >
        <!-- 使用elementForm -->
        <el-form
          ref="form"
          class="demo-form"
          :label-position="labelPosition"
          label-width="100px"
          :model="form"
          :rules="rules"
        >
          <el-form-item label="活动名称" prop="name">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="活动区域" prop="region">
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai" />
              <el-option label="区域二" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="活动时间" prop="date">
            <el-date-picker
              v-model="form.date"
              placeholder="选择日期时间"
              type="datetime"
            />
          </el-form-item>
          <el-form-item label="联系电话" prop="mobile">
            <el-input v-model="form.mobile" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('form')">
              立即创建
            </el-button>
            <el-button @click="resetForm('form')">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- 使用vee-validate -->
        <Form @submit="onSubmit">
          <Field
            label="联系电话"
            name="email"
            :rules="validateEmail"
            type="email"
          />
          <!-- 将报错以特定的标签显示  as定义标签 name关联表单 -->
          <ErrorMessage as="p" name="email" />
          <br />
          <button>提交</button>
        </Form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { Form, Field, ErrorMessage } from 'vee-validate'
  export default {
    name: 'Vee',
    components: {
      Form,
      Field,
      ErrorMessage,
    },
    data() {
      const generateData = () => {
        const data = []
        const cities = ['上海', '北京', '广州']
        const pinyin = ['shanghai', 'beijing', 'guangzhou']
        cities.forEach((city, index) => {
          data.push({
            label: city,
            key: index,
            pinyin: pinyin[index],
          })
        })
        return data
      }
      // 验证手机号的自定义规则
      var checkMoblie = (rule, value, cb) => {
        //验证手机号的正则表达式
        const regMobile = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
        if (regMobile.test(value)) {
          //合法的手机号
          return cb()
        }
        cb(new Error('请输入正确的手机号'))
      }
      return {
        labelPosition: 'right',
        form: {
          name: '',
          region: '',
          date: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          description: '',
          rate: 0,
          area: [],
          transfer: [],
          iphoneName: '',
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            {
              min: 3,
              max: 5,
              message: '长度在 3 到 5 个字符',
              trigger: 'blur',
            },
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' },
          ],
          date: [
            {
              type: 'date',
              required: true,
              message: '请选择日期',
              trigger: 'change',
            },
          ],
          mobile: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { validator: checkMoblie, trigger: 'blur' },
          ],
        },
        data: generateData(),
        filterMethod(query, item) {
          return item.pinyin.indexOf(query) > -1
        },
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!')
          } else {
            // eslint-disable-next-line no-console
            console.log('error submit!!')
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
      onSubmit(values) {
        console.log(values, null, 2)
      },
      validateEmail(value) {
        // if the field is empty
        if (!value) {
          return '填写的不能为空'
        }
        // if the field is not a valid email
        const regex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i
        if (!regex.test(value)) {
          return '邮箱不符合规则'
        }
        // All is good
        return true
      },
    },
  }
</script>

<style lang="scss" scoped>
  .comprehensive-form-container {
    .demo-form {
      margin-top: 10px;
    }

    :deep() {
      .el-form-item__content {
        .el-rate {
          display: inline-block;
          font-size: 0;
          line-height: 1;
          vertical-align: middle;
        }

        .el-transfer__buttons {
          padding: 10px 10px 0 10px;
        }
      }
    }
  }
</style>

4、useField：组合 API 函数为字段定义验证规则

<template>
  <div>
    <input v-model="value" type="text" />
    <span>{{ errorMessage }}</span>
  </div>
</template>
<script>
import { useField } from 'vee-validate';
export default {
  setup() {
    function isRequired(value) {
      if (value && value.trim()) {
        return true;
      }
      return 'This is required';
    }
    const { errorMessage, value } = useField('fieldName', isRequired);
    return {
      errorMessage,
      value,
    };
  },
};
</script>

5、yup 是一个非常流行、简单且强大的 JavaScript 数据验证库，您可以将它与 vee-validate 结合使用，您可以使用它yup来定义该字段的验证规则：

<template>
  <div>
    <input v-model="value" type="text" />
    <span>{{ errorMessage }}</span>
  </div>
</template>
<script>
import { useField } from 'vee-validate';
import * as yup from 'yup';
export default {
  setup() {
    const { errorMessage, value } = useField('fieldName', yup.string().required().min(8));
    return {
      value,
      errorMessage,
    };
  },
};
</script>

6、useForm您可以通过传递一个validationSchema选项来使用该函数定义验证模式，而不是单独为每个字段提供验证，这可能会使您的代码变得混乱。

<template>
  <div>
    <input name="email" v-model="email" />
    <span>{{ emailError }}</span>
    <input name="password" v-model="password" type="password" />
    <span>{{ passwordError }}</span>
  </div>
</template>
<script>
import { useForm, useField } from 'vee-validate';
export default {
  setup() {
    // Define a validation schema
    const simpleSchema = {
      email(value) {
        // validate email value and return messages...
      },
      name(value) {
        // validate name value and return messages...
      },
    };
    // Create a form context with the validation schema
    useForm({
      validationSchema: simpleSchema,
    });
    // No need to define rules for fields
    const { value: email, errorMessage: emailError } = useField('email');
    const { value: password, errorMessage: passwordError } = useField('password');
    return {
      email,
      emailError,
      password,
      passwordError,
    };
  },
};
</script>

相关链接

VeeValidate官网链接