import

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

部分效果图如下

:proptableData.${$index}.cardId

sizelarge

clicksubHandle(froms)提交/el-buttonrules对应data

rules对象prop对应表单字段注意是表格里每一行对应的字段

$index

/^[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:

/^[1][3,4,5,6,7,8,9][0-9]{9}$/,

message:

});前端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[34578]\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:/^[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]$/,动态添加的实现

添加人员

{form.value.tableData.splice(index,

1)delList.push(row)