vue表单内嵌表格验证

     <el-form
        label-suffix="："
        label-width="110px"
        v-if="!isShowPersonal"
        label-position="left"
        :model="enterpriseAuthenticationInfo"
        ref="modifyEnterpriseForm"
      >
          <el-table
              border
              :data="enterpriseAuthenticationInfo.businessContactPersonsVos"
              style="width: 100%"
            >
              <el-table-column label="姓名">
                <template slot-scope="scope">
                  <el-input
                    size="medium"
                    v-model="scope.row.business_name"
                    :disabled="isDisableInAuthentication"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="手机号">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'businessContactPersonsVos.' + scope.$index + '.business_phone'"
                    :rules='modifyPhoneNumberRules.newPhone'
                  >
                    <el-input
                      size="medium"
                      v-model="scope.row.business_phone"
                      :disabled="isDisableInAuthentication"
                    ></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
                </el-table>

       <el-table
              border
              :data="enterpriseAuthenticationInfo.financialContactPersonsVos"
              style="width: 100%"
            >
              <el-table-column label="手机号">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'financialContactPersonsVos.' + scope.$index + '.financial_phone'"
                    :rules='modifyPhoneNumberRules.newPhone'
                  >
                    <el-input
                      size="medium"
                      v-model="scope.row.financial_phone"
                      :disabled="isDisableInAuthentication"
                    ></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                width="80"
              >
                <template slot-scope="scope">
                  <el-button
                    :disabled="isDisableInAuthentication"
                    type="danger"
                    size="small"
                    @click="handleDelFinancial(scope.$index)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
   
 export default {
  data() {
    var validatePhoneNumber = (rule, value, callback) => {
      if (value != "") {
        var partten = /^[1][3,4,5,7,8][0-9]{9}$/;
        if (!partten.test(value)) {
          callback(new Error("手机号码格式不正确，请重新输入"));
        } else {
          callback();
        }
      }
    };
      return {
    // 校验规则
      modifyPhoneNumberRules: {
        newPhone: [
          { required: true, message: "手机号码不能为空", trigger: "change" },
          { validator: validatePhoneNumber, trigger: "blur" }
        ],
        sms_code: [
          { required: true, message: "请输入验证码", trigger: "change" }
        ]
      },
}
}

   enterpriseClick() {
         this.$refs["modifyEnterpriseForm"].validate(valid => {
        if (valid) {

           }
      });
    },

来源：CSDN

作者：A垂柳

链接：https://blog.csdn.net/SNC8F/article/details/104650363