element-plus动态表单验证

Vue3结合element-plus表单项可以动态添加/删除

首先data格式必须是对象包裹数组

import { ref, reactive } from 'vue';

import { FormInstance } from 'element-plus'

const froms = ref()

const form = ref({

    tableData: []

})

给表单绑定form数据

表格绑定tableData数据

给表单项增加验证规则

    





   



 

    提交

 

rules对应data rules对象

prop对应表单字段（注意是表格里每一行对应的字段 forms.tableData[下标].key）

prop的关键就在于下标 $index

部分验证规则

import { FormRules } from 'element-plus'
const rules = reactive({
    cardId: [
        { required: true, message: "请输入身份证号", trigger: "blur" },
        { pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, message: '请输入正确的身份证号', trigger: 'blur' }
    ],
    professional: [
        { required: true, message: "请输入从事专业", trigger: "blur" },
    ],
    months: [
        { required: true, message: "请输入投入时间", trigger: "blur" },
        { pattern: /^[1-9]\d*$/, message: '请输入正确的月份', trigger: 'blur' }
    ],
    phone: [
        { required: true, message: "请输入联系电话", trigger: "blur" },
        { pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
    ],
    email: [
        { required: true, message: "请输入邮箱", trigger: "blur" },
        {
            type: 'email',
            message: '请输入正确的邮箱格式',
            trigger: ['blur', 'change'],
        },
    ],
     cost: [
        { required: true, message: "请输入金额", trigger: "blur" },
        { pattern: /^[1-9]\d*(\.\d+)?$/, message: '请输入正确的金额', trigger: 'blur' }
    ]
});

前端Vue中常用rules校验规则:

1、是否合法IP地址:

pattern:/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/,

2.是否手机号码或者固话
pattern:/^((0\d{2,3}-\d{7,8})|(1[345789]\d{9}))$/,

3. 是否身份证号码
pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,

4.是否邮箱
pattern:/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/,

5.整数填写
pattern:/^-?[1-9]\d*$/,

6.正整数填写
pattern:/^[1-9]\d*$/,

7.小写字母
pattern:/^[a-z]+$/,

8.大写字母
pattern:/^[A-Z]+$/,

9.大小写混合
pattern:/^[A-Za-z]+$/,

10.多个8位数字格式(yyyyMMdd)并以逗号隔开
pattern:/^\d{8}(\,\d{8})*$/,

11.数字加英文，不包含特殊字符
pattern:/^[a-zA-Z0-9]+$/,

12.前两位是数字后一位是英文
pattern:/^\d{2}[a-zA-Z]+$/,

13.密码校验（6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种）
pattern:/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/,

14.中文校验
pattern:/^[\u0391-\uFFE5A-Za-z]+$/,

inputed: /[^\d]/g //只能输入数字
inputed: /[^a-zA-Z]/g //只能输入英文
inputed: /[^\d\x\X]/g //只能输入数字和英文/[\W]/g
inputed: /[^\u4E00-\u9FA5]/g //只能输入中文
inputed: /[\u4E00-\u9FA5]/g //输入非中文字符
inputed: /^[a-zA-Z0-9_]{1,}$/ //仅支持字母数字下划线
inputed: /^[1-9]\d*$/ //正整数
inputed: /^[A-Za-z0-9]{6,7}$/ //输入的字母数字长度限制在 6-7
inputed: /^(?:[01]\d|2[0-3]):[0-5]\d:[0-5]\d$/ //24小时制时间（HH:mm:ss）
inputed: /^(?:1[0-2]|0?[1-9]):[0-5]\d:[0-5]\d$/ //12小时制时间（hh:mm:ss）
inputed: /^(?:(?:\+|00)86)?1\d{10}$/ //中国手机号
inputed: /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/ //邮箱地址
inputed: /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/ //密码强度正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符
inputed: /[^A-Za-z0-9\u4e00-\u9fa5]/g //只能输入数字，英文及中文

动态添加

// 添加人员

const addPerson = () => {

    form.value.tableData.push({

        // 身份证号

        cardId: '',

        // 从事专业

        professional: '',

        // 投入时间（月）

        months: '',

        // 联系电话

        phone: '',

        // 邮箱

        email: ''

    })

}

表格删除

// 存储删除的数据

let delList: any = []

const delEdit = (index: number, row: any) => {

    form.value.tableData.splice(index, 1)

    delList.push(row)

}

提交时再次验证

// 提交

const subHandle = async (formEl: FormInstance | any) => {

    if (!formEl) return

    await formEl.validate(async (valid: any) => {

        if (valid) {

        // 通过校验调用接口

        ...

        }

    }

}