龙岩网红,seo搜索引擎优化实战,建设银行 福建分行招聘网站,网站建设有哪些关键细节Vue3结合element-plus表单项可以动态添加/删除
部分效果图如下#xff1a;
另表格有添加和删除按钮#xff0c;点击提交进行表单验证。
首先data格式必须是对象包裹数组
import { ref, reactive } from vue;
import { FormInstance } from element-plus
const froms re…Vue3结合element-plus表单项可以动态添加/删除
部分效果图如下
另表格有添加和删除按钮点击提交进行表单验证。
首先data格式必须是对象包裹数组
import { ref, reactive } from vue;
import { FormInstance } from element-plus
const froms refFormInstance()
const form ref({tableData: any[]
})给表单绑定form数据
el-form refforms :modelform
/el-form表格绑定tableData数据
el-table :dataform.tableData border stylewidth: 100%
/el-table给表单项增加验证规则
el-table-column label身份证号 aligncenter show-overflow-tooltiptemplate #default{ row, $index }el-form-item :proptableData.${$index}.cardId :rulesrules.cardIdel-input sizelarge v-modelrow.cardId classwih-150p placeholder请输入身份证号 //el-form-item/template
/el-table-column
el-table-column aligncenter fixedright label操作 width100pxtemplate #default{ row, $index }el-button text typedanger clickdelEdit($index, row)删除/el-button/template
/el-table-columnel-button sizelarge typeprimary clicksubHandle(froms)提交/el-buttonrules对应data rules对象prop对应表单字段注意是表格里每一行对应的字段 forms.tableData[下标].key prop的关键就在于下标 $index 部分验证规则
import { FormRules } from element-plus
const rules reactiveFormRules({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],},]
});前端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:/^-?[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]$/,动态添加的实现
// 添加人员
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) returnawait formEl.validate(async (valid: any) {if (valid) {// 通过校验调用接口...}}
}效果展示
