美文网首页
el-form多个表单同时验证必填项

el-form多个表单同时验证必填项

作者: zkzhengmeng | 来源:发表于2024-09-05 09:19 被阅读0次
<template>
        <el-form :model="formData" status-icon :rules="rules" label-width='200px' label-position="right" ref="formData1" >
            <el-form-item label="订单号:" v-if="editorShow" class="el-form-pad">
                <template slot-scope="scope">
                    <el-button type="text" @click="onEdit(scope.row, scope.$index)"> {{formData.orderId}} </el-button>
                </template>
            </el-form-item>
        </el-form>
        
        
        <el-form :model="formData" status-icon :rules="rules" label-width='200px' label-position="right" ref="formData2">
            <el-form-item label="订单类型:" prop="orderTypeValue">
                <el-select v-model="formData.orderTypeValue" placeholder="请选择" size="mini" :disabled="disableIsShow">
                    <el-option v-for="item in orderTypeList" :key="item.orderTypeValue" :label="item.orderTypeName" :value="item.orderTypeValue"></el-option>
                </el-select>
            </el-form-item>
        </ell-form>
        
        <el-form :model="formData" status-icon :rules="rules" label-width='200px' label-position="right" ref="formData3">
            <el-form-item label="收货人:" prop="userName"> 
                <el-input v-model="formData.userName" size="mini" class="box-width" :disabled="disableIsShow" />
            </el-form-item>
        </el-form>
        
        <button class="mini-search-btn" @click="handleSave('formData')"> 保存订单 </button>
        
    </template>

<script>
        export default {
            data() {
                return {
                    formData: {
                        orderTypeValue: '', // 订单类型
                        distributionId: '', // 配送方式
                        invoiceType: '', // 发票类型
                        payWay: '', // 支付方式
                        isInvoice: 0, // 是否开票
                        provinceId: "", // 省份id
                        cityId: "", // 城市id
                        districtId: "", // 区id
                        importOrderId: "",
                        zipCode: '', // 邮编
                    },
                    rules: { // 必填输入提示
                        payWay: [ {required: true, message: '请选择支付方式', trigger: 'change' } ],
                        distributionId: [ {required: true, message: '请选择配送方式', trigger: 'change' } ],
                        orderTypeValue: [ { required: true, message: "请选择订单类型", trigger: "change" } ],
                        userName: [ { required: true, message: "请输入收货人名字", trigger: "blur" } ],
                        provinceId: [ { required: true, message: "请选择地区", trigger: "change" } ],
                        address: [  { required: true,message: "请输入街道地址",trigger: "blur"} ],
                        mobile: [ { required: true,message: "请输入手机号码",trigger: "blur"}, { validator: validatePhone } ],
                    },
                }
            },
            methods: { 
                // 对多个form进行promise封装进行同时验证
                handleSave(formData) { // 保存操作
                    let formArr=['formData1','formData2','formData3']//三个form表单的ref
                    var resultArr=[] //用来接受返回结果的数组
                    var _self=this
                    function checkForm(formName) { //封装验证表单的函数
                        var result = new Promise(function(resolve, reject) {
                            _self.$refs[formName].validate((valid) => {
                                if (valid) {
                                    resolve();
                                } else { reject() }
                            })
                        })
                        resultArr.push(result) //push 得到promise的结果
                    }
                    formArr.forEach(item => { //根据表单的ref校验
                            checkForm(item)
                    })
                    Promise.all(resultArr).then(values => {
                            this.submitForm() // 此时必填完成,做保存后的业务操作
                    }).catch( _ => {
                        console.log('err')
                    })
                },
            }
        }
    </script>

相关文章

  • AngularJS学习之路——过滤器(2)

    自定义过滤器 表单验证 input上所有的验证项: 1. 必填项 验证某个表单输入是否已填写,只要在输入字段元素上...

  • Vue.js-ElementUI表单

    1 表单el-form 每个表单el-form由多个表单域el-form-item组成。默认情况,表单域是垂直分布...

  • Angular Form Validation

    常用的表单验证指令 必填项验证 判断输入表单是否已经填写,只需要在输入字段上添加HTML5标记required即可...

  • 表单验证规则---antd

    //表单验证规则validateRules: {// 必填验证required: [{ required: tru...

  • 收集表单字段控件

    收集表单字段控件html: js代码 效果:1:对控件的required(必填项)进行验证2:对电话,邮箱进行验证...

  • 循环数据进行表单验证

    使用表单验证,如需进行表单某个单独元素验证,在表单el-form添加rules规则,相应的元素对应相应的prop值...

  • HTML5 input 新增的表单控件

    必填项验证 颜色选择控件 日期选择控件 时间选择控件 电子邮件控件:提交表单时有格式验证 数字控件 文件控件 拖拽...

  • 11 js之表单验证

    JavaScript 表单验证 1 必填(或必选)项目 2 E-mail 验证

  • Element同时验证多个表单

    https://blog.csdn.net/qq_35702372/article/details/1065608...

  • vue页面el-form的model属性验证表单

    在验证表单的时候,由于vue页面el-form的:model属性误写成v-model="vo",导致验证表单始终不...

网友评论

      本文标题:el-form多个表单同时验证必填项

      本文链接:https://www.haomeiwen.com/subject/pxvrljtx.html