Element ui 循环校验表单表单添加函数校验循环获取 Ref 实例

卷不动了阿

已于 2024-05-11 17:28:43 修改

阅读量197

点赞数

分类专栏： Vue 教程文章标签：前端 javascript html

于 2023-07-25 09:53:09 首次发布

本文链接：https://blog.csdn.net/weixin_44258422/article/details/131910798

版权

Vue 教程专栏收录该内容

17 篇文章 1 订阅

订阅专栏

循环校验表单

<el-form-item :label="item.attributeName" :prop="`attributes.${index}.attributeValue`" :rules="rules.attributeValue">
</el-form-item>

form:{
	attributes:[]
}
rules:{
	attributeValue:[]
}

表单添加函数校验

<el-form-item label="手机号" prop="staffPhone">
  <el-input
    v-model="form.staffPhone"
    placeholder="请输入手机号"
    maxlength="11"
  />
</el-form-item>

form: {
    staffPhone: '',
}

const checkPhone = (rule: any, value: any, callback: any) => {
  // checkFun._checkPhone 封装的手机号码正则
  if (!checkFun._checkPhone(value)) {
    callback(new Error("手机号输入有误，请重新输入！"));
  } else {
    callback();
  }
};

rules: {
	staffPhone: [
      { required: true, message: "请输入电话", trigger: "blur" },
      { validator: checkPhone, trigger: "blur" },
    ],
}

循环获取 Ref 实例

const formRef = ref([] as any);
const setPositionRef = (el: any) => {
  if (el) {
    formRef .value.push(el);
  }
};

校验字段多个或者不在表单中

<el-form-item label="营业时间：" required :error="customError">
  <div class="display-align">
    <el-time-picker
      v-model="form.openingTime"
      style="width: 220px; margin-right: 8px"
      is-range
      format="HH:mm"
      value-format="HH:mm"
      range-separator="至"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
    />
    <el-checkbox v-model="form.isAllDay">全天营业</el-checkbox>
  </div>
</el-form-item>

form:{
	openingTime: "",
	isAllDay: ""
}
// 显示非表单校验的内容
 customError: "",

if (!form.value.openingTime && !form.value.isAllDay) {
    customError.value = "请选择营业时间";
    return false;
  } else {
    customError.value = "";
  }