elementUI中表单验证遇到的坑

2019-07-17  本文已影响0人  梅花骨朵

我现在要实现这样一个效果,一个下拉框,一个input框,这两个框都需要校验,并且下拉框的数据是从后台获取的,是这样的数据[{},{},{}],

先把结构写出来,

<form ref="form  :model="form" :rules="rules">

   <el-form-item>

          <el-select  placeholder="请选择物流公司"  v-model="form.value">

                <el-option  v-for="(item,index) in sendgoodsdata" :key="index" :value="item.value" ></el-option>

           </el-select>

     <el-form-item>

<el-form-item  label="物流单号"  prop="expressNo">

          <el-input v-model="form.expressNo" ></el-input>

<form>

下面的是写在data的数据,(vue框架)

form: {

        value: '',

        expressNo: ''

      },

      sendgoodsdata: [],

      rules: {

        value: [

          { required: true, message: '请输入物流公司', trigger: 'blur' }

        ],

        expressNo: [

          { required: true, message: '请输入物流单号', trigger: 'blur' },

        ]

      },

一定要注意的是 ,黑提加粗的名字要一样,无论你在后台请求的数据试什么类型的,最后绑定的一定是你所写的这个form里面的

上一篇 下一篇

猜你喜欢

热点阅读