Vue使用el-form表单内置表单验证和自定义表单验证封装

一.如果项目比较小且校验比较少的可以直接采用官网例子的方式

官网有内置表单校验和自定义表单校验的方法的例子：点击跳转官方表单校验例子

二.封装表单校验

2.1基础校验
在src下新建一个model文件夹，在model里建两个文件，一个存放基础校验规则，一个存放自定义检验规则如下图所示：

需要校验的html表单代码如下图所示（prop绑定的是需要校验的字段，这个字段必须是el-form中：model绑定的参数里的字段）

 <el-form
        ref="form"
        :model="params"
        :rules="rules"
        label-position="right"
        label-width="80px"
        class="loginForm"
      >
        <el-form-item label="用户名：" size="small" prop="account">
          <el-input v-model="params.account"></el-input>
        </el-form-item>
        <el-form-item label="密码：" size="small" prop="password">
          <el-input v-model="params.password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="手机号：" size="small" prop="phone">
          <el-input placeholder="请输入手机号" v-model="params.phone" ></el-input>
        </el-form-item>
        <el-button @click="loginFn()" size="small" type="primary" plain>登录</el-button>
      </el-form>

script里的的代码如下所示

import {login} from "@/model/validate";
export default {
  data() {
    return {
      params: {
        account: "",
        password: "",
        phone: ""
      },
      rules: login
    };
  },
  methods: {
    loginFn() {
      let form;
      this.$refs["form"].validate(valid => {
        valid ? (form = true) : (form = false);
      });
      if (form) {
        console.log("校验成功");
      }

注意点:

1.el-form中ref的名字要和script代码中this.$refs["form"]中[ ]的内容一致
2.el-form中：model绑定的参数要和你在data()中定义的校验的参数一致
3.prop是校验字段的内容，prop的内容必须是：model绑定的参数对象里的字段。
export把login暴露出来，用的时候再导入

import {login} from "@/model/validate";

这行代码在上面有体现。

我在validate.js下存放基础校验规则代码如下：
trigger: 'blur',可加可不加，不加默认就是点击以后触发

export let login = {
  account: [{
      required: true,
      trigger: 'blur',
      message: '用户名称不能为空'
    },
    {
      max: 30,
      trigger: 'blur',
      message: "长度不能超过30个字符"
    }
  ],
  password: [{
    required: true,
    trigger: 'blur',
    message: '密码不能为空'
  }, {
    max: 20,
    trigger: 'blur',
    message: "密码长度不能超过20个字符"
  }],
  phone: [{
    required: true,
    trigger: 'blur',
    message: '手机号不能为空'
  }]
}

2.2.1当我用到手机号验证的时候，我还需要验证手机号的格式，这就需要用到自定义校验

我在custom_verificate.js下存放的自定义校验规则代码如下：

export let checkPhoneStrict = (rule, value, callback, obj) => {
  var patt = /^1[3456789]\d{9}$/; //手机号码格式校验
  regex(rule, value, callback, obj, patt);
}


//正则表达式校验。patt为正则表达式（自己封装的校验函数）
function regex(rule, value, callback, obj, patt) {
  console.log('校验对象：', obj);
  console.log(rule, value, callback, obj);
  if (!value) {
    callback();
  }
  if (!patt.test(value)) {
    return callback(new Error());
  }
  callback();
}

下面的regex函数是根据官网封装的，上面export暴露出的就是一个个自定义规则

2.2.2使用自定义校验方法、
1.导入自定义校验规则

import {checkPhoneStrict,} from './custom_verificate'

2.在基础校验的基础上加入自定义规则校验

  phone: [{
    required: true,
    trigger: 'blur',
    message: '手机号不能为空'
  },{
    validator: checkPhoneStrict ,
    message: '请输入正确的11位手机账号',
    trigger: 'change'
  }]
  

2.3如何触发下拉框校验
代码如下：

includeTax: [{
    required: true,
    message: '请选择是否含税',
    trigger: ['blur', 'change']
  }],

触发以后效果图如下