关于在vue中对el-form-item单独验证及多表单验证_vue el-form-item单个传校验方式

el-form-item 单独验证

针对很多表单中校验非空情况使用该方法可以减少对校验规则的重复，减少代码冗余
其中输入框用blur，选择框使用change

//div中代码

            <el-form :inline="true" ref="form" :model="detailInfoData" label-width="100px">
              <el-form-item :rules="[request]"  prop="name" label="名称">
                <el-input class="input-select-width" v-model="detailInfoData.name"/>
              </el-form-item>
              <el-form-item label="地区">
                <el-select class="input-select-width"
                           v-model="detailInfoData.region"
                           filterable
                           allow-create
                           default-first-option
                >
                  <el-option
                    v-for="dict in dict.type.sys_region_name"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.label">
                  </el-option>
                </el-select>
              </el-form-item>
              <!--等等-->
              <el-button type="success" size="small" icon="el-icon-tickets" @click="createSummaryDataEvent()">保存</el-button>
              <el-form/>


//data中代码

	data(){
		return{
			request:{required: true, message: '该内容不能为空', trigger: 'blur'},
      		requestSelect:{required: true, message: '该内容不能为空', trigger: 'change'},
			detailInfoData:{}
			}
		}

//methods中代码

	methods:{
		createSummaryDataEvent(){
			this.$refs.addInfoData.validate(valid=>{
       			 if(valid){
					//验证通过
					console.log('success');
				}else{
					//验证失败
				}
        	})
		}
	}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

多表单校验

在div中关于不同表单的ref值需不同，rule可以继续使用相同的规则；主要代码在于方法中的校验

//methods中代码

    async  createSummaryDataEvent() {
      try {
        await Promise.all([
          this.$refs.form1.validate(),
          this.$refs.form2.validate(),
          this.$refs.form3.validate(),
          this.$refs.form4.validate(),
          this.$refs.form5.validate()
        ]);
        // 验证成功
        console.log('success');
        } catch (error) {
        // 验证失败
        console.log("error");
      }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18