zoukankan      html  css  js  c++  java
  • element ui动态表单 + 自定义校验规则

    背景描述:

    表单如下图所示:

     如上图所示,我们有一个动态表单(教育经历) - 可以动态添加的,我们的校验规则是:

    如果不填写公司名称,那么所有字段非必填,如果填写了公司名称那么当前item的公司职务等必填

    DOM结构:

    <el-row>
        <el-form-item
            :rules="workListRule.last_company_name"
            :prop="'dc_talent_work_list.' + idx + '.last_company_name'">
            <template slot="label">
                <span>公司名称</span>
                <div style="color:#ccc;line-height:20px;font-size:12px;margin-bottom:8px;padding-left:10px;">
                    <div>1、如有工作经历,请如实填写</div>
                    <div>2、并需完整填写每个字段信息(公司名称+部门+职务+开始时间+结束时间),否则会造成信息无法录入的情况。</div>
                    <div>3、公司名称需填写公司中文或英文全称</div>
                </div>
            </template>
            <el-input v-model="item.last_company_name" placeholder="请输入"></el-input>
        </el-form-item>
    </el-row>
    <el-row>
        <el-form-item label="所在部门"
            :rules="workListRule.last_company_unit"
            :prop="'dc_talent_work_list.' + idx + '.last_company_unit'"
        >
            <el-input v-model="item.last_company_unit" placeholder="请输入"></el-input>
        </el-form-item>
    </el-row>

    JavaScript:

    var validateLastCompanyName = (rule, value, callback) => {
        callback();
    };
    var validateLastCompanyUnit = (rule, value, callback) => {
        // "dc_talent_work_list.0.last_company_unit"
        let thisField = rule.field.split(".")[1];
        if(this.form.dc_talent_work_list[thisField].last_company_name != '' && value==""){
            callback(new Error("公司部门不能为空"));
        }
        callback();
    };
    // 工作经历校验规则
    workListRule:{
        last_company_name: { validator: validateLastCompanyName,trigger: "blur"},
        last_company_unit: { validator: validateLastCompanyUnit,trigger: "blur"},
    }

    主要依据:

    prop属性根据当前数组下标 idx 动态,

    判定当前在第几个工作经历的idx通过形参 rule 字符串截取获取 (自己找到的,文档没有)

  • 相关阅读:
    [C++]怎么将.h和.cpp文件分别放在不同的目录
    [C++]VAssistX文件头添加注释功能设置
    教程-Delphi调用百度地图API(XE8+WIN7)
    WebBrowser的各种使用方法(未完待续)(XE8+WIN7)
    Android教程-夜神模拟器连接IDE更新让Delphi发现你的手机或夜神模拟器
    首尔甜城常用电话
    Android问题-DelphiXE5开发Andriod连接Webservice乱码问题
    点乘的使用
    [转]脏读,不可重复读,幻读的理解
    Unity3D刚体不同力的测试(ForceMode,AddForce,RelativeAddForce)
  • 原文地址:https://www.cnblogs.com/xuweiqiang/p/14099930.html
Copyright © 2011-2022 走看看