element-ui 动态表单验证

需求: 供货价 >= 销售价的一半,不同的城市销售价与供货价可以特别设置

分析: 销售价是变动的,城市也是变动的,所以表单验证的规则也是动态的

解决: 用传参的方式 -> 动态构造表单验证规则

关键查找-> 供货价 :rules="supplyRule(city.goods_price)"

如下:

<!-- 动态规则传参设置如下 -->
<!-- :rules="supplyRule(city.goods_price)" -->
<el-form
    :model="cityForm" 
    ref="moreform"
    :rules="rules.moreSpec"
    class="city-form">
    <div 
        class="city-item"
        v-for="(city, cidex) in cityForm.cityList"
        :key="cidex+'citylist'"
        >
        <el-checkbox class="mb-3" v-model="city.selected"> 
        <span class="city-name">{{city.city_name}}</span>
        </el-checkbox>
        <div class="city-price-block pl-5">
            <el-form-item 
                class="more-price-item"
                :rules="rules.moreSpec.line_price"
                :prop="'cityList.'+cidex+'.line_price'">
                <el-input class="price-input" v-model="city.line_price" size="small" :disabled="!city.selected" type="number" min="0" inputmode="numeric" pattern="[0-9]*">
                <template slot="prepend">划线价</template>
                </el-input>
            </el-form-item>
            <el-form-item 
                class="more-price-item"
                :rules="rules.moreSpec.goods_price"
                :prop="'cityList.'+cidex+'.goods_price'">
                <el-input class="price-input" v-model="city.goods_price" size="small" :disabled="!city.selected" type="number" min="0" inputmode="numeric" pattern="[0-9]*">
                <template slot="prepend">实售价</template>
                </el-input>
            </el-form-item>
            <el-form-item 
                class="more-price-item"
                :rules="supplyRule(city.goods_price)"
                :prop="'cityList.'+cidex+'.supply_price'">
                <el-input class="price-input" v-model="city.supply_price" size="small" :disabled="!city.selected" type="number" :min="0" inputmode="numeric" pattern="[0-9]*">
                <template slot="prepend">供货价</template>
                </el-input>
            </el-form-item>
        </div>
    </div>
</el-form>
computed: {
    supplyRule() {
        return (goods_price) => {
            let rule = (rule, value, callback) => {
                if (value < goods_price * .5) {
                return callback(new Error(`供货价应至少为实售价的一半,即 >= ${goods_price * .5}`))
                }else {
                callback()
                }
            }
            let  supply_price= [
                {required: true, message: "请填写价格", trigger: "blur"}, 
                { validator: rule, trigger: 'blur' }
            ]
            return supply_price
        }
    }
},

后话:
以上方法一开始仅仅是抱着试一下的想法做看看能不能实现。因为每一个城市都需要有对应的验证规则,而每一个城市的实售价都有可能变动。无法确定这种方法可以保证表单验证可以顺得执行。写完之后意外的发现完全没有问题。
往往觉得不确定的代码写出来都是问题一堆不是吗?可是这次不一样。嘿!也许你也遇到过这种不抱希望的事情却出奇的顺利。以上分享,除了一丁点解决方法之外,还有那么些些意外之喜。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容