elementui form表单全部或者单个效验

最新推荐文章于 2024-12-24 16:35:10 发布

<div>

最新推荐文章于 2024-12-24 16:35:10 发布

阅读量488

点赞数

文章标签： elementui javascript vue.js

本文链接：https://blog.csdn.net/max100c/article/details/125782872

版权

本文介绍了如何在Vue中使用Element UI构建表单，包括活动名称的下拉选择、更改类型和下达方式的输入验证。通过`el-form`和`el-select`展示数据，并利用`v-model`实现双向数据绑定，同时展示了`validateField`和整体表单验证的方法。

摘要由CSDN通过智能技术生成

    <el-form :model="formDataList" ref="formRef" :rules="rulesForm">
      <el-form-item label="活动名称" prop="nameComing">
        <el-select v-model="formDataList.nameComing">
          <el-option
            v-for="item in formDataListAll"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="更改类型" prop="ipt">
        <el-input v-model="formDataList.ipt"></el-input>
      </el-form-item>
      <el-form-item label="下达方式" prop="vals">
        <el-input v-model="formDataList.vals"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="summitContent('formRef')">提交</el-button>
      </el-form-item>
    </el-form>

data里的表单数据

  formDataList: {
        nameComing: "",
        ipt: '',
        vals: ''
      },
  rulesForm:{
        nameComing:[{
             required: true, message: '请选择类型', trigger: 'change'
        }],
        ipt:[{
            required: true, message: '请填写活动形式', trigger: 'blur' 
        }],
        vals:[{
              required: true, message: '请输入下达方式', trigger: 'blur' 
        }]
     },

methods

    summitContent(formRef) {
    this.$refs.formRef.validateField('vals') //验证单个表单
    this.$refs[formRef].validate((vaild) => { // 验证全部表单
            if(vaild) {
                        // 验证通过
            } else {
                 console.log(vaild);  
                return false
            }
    })
    },