el-table加校验规则(看别人改的,因为怕原作者删了)

<!--用el-form包着el-table-->
<el-form :model="state" ref="recordsRef" :rules="state.formRules">
<!--表格绑定的数据需要是el-form里面的字段-->
    <el-table :data="state.tableData" border>
        <el-table-column align="center" label="电话" width="120">
            <template #default="scope">
<!-- :props="'绑定的表格字段.'+scope.$index+'.用户输入绑定的字段'"-->
<!--:rules="校验对象.校验字段"-->
                <el-form-item :prop="'tableData.' + scope.$index + '.telePhone'" :rules="state.formRules.telePhone">
                    <el-input v-model="scope.row.telePhone" size="small" clearable />
                </el-form-item>
            </template>
        </el-table-column>
    </el-table>
</el-form>

const isValidPhone(phone)=> {
    const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
    return reg.test(phone);
}

const validPhone = (rule, value, callback) => {
  if (!value) {
    callback();
  } else if (isValidPhone(value)) {
    callback();
  } else {
    callback(new Error("请输入正确的11位手机号码"));
  }
};

const state = reactive({
  formRules: {
    telePhone: [{ required: false, validator: validPhone, trigger: "change" }],
  },
  tableData: [],
});

参考:el-table添加表单校验 - 简书 (jianshu.com)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值