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']
  }],

触发以后效果图如下
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页