Vue3結合element-plus表單項可以動態(tài)添加/刪除
部分效果圖如下：
另表格有添加和刪除按鈕，點擊提交進行表單驗證。
- 首先data格式必須是對象包裹數(shù)組
import { ref, reactive } from 'vue';
import { FormInstance } from 'element-plus'
const froms = ref<FormInstance>()
const form = ref({
tableData: <any>[]
})
- 給表單綁定form數(shù)據(jù)
<el-form ref="forms" :model="form">
</el-form>
- 表格綁定tableData數(shù)據(jù)
<el-table :data="form.tableData" border style="width: 100%">
</el-table>
- 給表單項增加驗證規(guī)則
<el-table-column label="身份證號" align="center" show-overflow-tooltip>
<template #default="{ row, $index }">
<el-form-item :prop="`tableData.${$index}.cardId`" :rules="rules.cardId">
<el-input size="large" v-model="row.cardId" class="wih-150p" placeholder="請輸入身份證號" />
</el-form-item>
</template>
</el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="100px">
<template #default="{ row, $index }">
<el-button text type="danger" @click="delEdit($index, row)">刪除</el-button>
</template>
</el-table-column>
<el-button size="large" type="primary" @click="subHandle(froms)">
提交
</el-button>
rules對應data rules對象，prop對應表單字段（注意是表格里每一行對應的字段 forms.tableData[下標].key）
prop的關鍵就在于下標 $index
- 部分驗證規(guī)則
import { FormRules } from 'element-plus'
const rules = reactive<FormRules>({
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: "請輸入從事專業(yè)", trigger: "blur" },
],
months: [
{ required: true, message: "請輸入投入時間", trigger: "blur" },
{ pattern: /^[1-9]\d*$/, message: '請輸入正確的月份', trigger: 'blur' }
],
phone: [
{ required: true, message: "請輸入聯(lián)系電話", 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校驗規(guī)則:
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.整數(shù)填寫
pattern:/^-?[1-9]\d*$/,
6.正整數(shù)填寫
pattern:/^[1-9]\d*$/,
7.小寫字母
pattern:/^[a-z]+$/,
8.大寫字母
pattern:/^[A-Z]+$/,
9.大小寫混合
pattern:/^[A-Za-z]+$/,
10.多個8位數(shù)字格式(yyyyMMdd)并以逗號隔開
pattern:/^\d{8}(\,\d{8})*$/,
11.數(shù)字加英文，不包含特殊字符
pattern:/^[a-zA-Z0-9]+$/,
12.前兩位是數(shù)字后一位是英文
pattern:/^\d{2}[a-zA-Z]+$/,
13.密碼校驗（6-20位英文字母、數(shù)字或者符號（除空格），且字母、數(shù)字和標點符號至少包含兩種）
pattern:/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/,
14.中文校驗
pattern:/^[\u0391-\uFFE5A-Za-z]+$/,
inputed: /[^\d]/g //只能輸入數(shù)字
inputed: /[^a-zA-Z]/g //只能輸入英文
inputed: /[^\d\x\X]/g //只能輸入數(shù)字和英文/[\W]/g
inputed: /[^\u4E00-\u9FA5]/g //只能輸入中文
inputed: /[\u4E00-\u9FA5]/g //輸入非中文字符
inputed: /^[a-zA-Z0-9_]{1,}$/ //僅支持字母數(shù)字下劃線
inputed: /^[1-9]\d*$/ //正整數(shù)
inputed: /^[A-Za-z0-9]{6,7}$/ //輸入的字母數(shù)字長度限制在 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個數(shù)字，1個特殊字符
inputed: /[^A-Za-z0-9\u4e00-\u9fa5]/g //只能輸入數(shù)字，英文及中文
更多正則校驗可查看：vue常用正則表達式文章來源：http://www.zghlxwxcb.cn/news/detail-629643.html
- 動態(tài)添加的實現(xiàn)
// 添加人員
const addPerson = () => {
form.value.tableData.push({
// 身份證號
cardId: '',
// 從事專業(yè)
professional: '',
// 投入時間（月）
months: '',
// 聯(lián)系電話
phone: '',
// 郵箱
email: ''
})
}
- 表格刪除的實現(xiàn)
// 存儲刪除的數(shù)據(jù)
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) {
// 通過校驗調(diào)用接口
...
}
}
}
效果展示：
文章來源地址http://www.zghlxwxcb.cn/news/detail-629643.html
到了這里，關于Vue3 element-plus表單嵌套表格實現(xiàn)動態(tài)表單驗證的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
