这篇文章主要介绍了vue使用Element组件时v-for循环里的表单项验证方法，内容挺不错的，现在分享给大家，也给大家做个参考。

 

标题描述看起来有些复杂，有vue，Element，又有表单验证，还有v-for循环？是不是有点乱？不过我相信开发中遇到过此问题的同学，一看就明白我说的意思了。

首先Element组件有一套完善的表单验证方法，官方文档写的也很清楚：Element表单验证API，正常按照官方文档添加rules规则，需要验证的表单项设置prop，然后提交表单时通过form的validate方法验证表单项就可以了。

然鹅问题来了，如果表单项里有通过v-for动态生成的表单项，如何设置验证呢？这个官方文档并没有明确的说法，我们通过查找解决方案和实际验证，总结出来解决方法如下。

首先是循环表单项没有加验证之前的代码：

 

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

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

<template>

 <p class="content-body">

  <el-form ref="form" :model="form" :rules="rules" label-width="120px">

   <el-row :gutter="10">

    <el-col :span="12" :offset="0">

     <el-form-item label="套餐名称：" prop="activityName" id="activityName">

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

     </el-form-item>

    </el-col>

   </el-row>

   <el-row :gutter="10">

    <el-col :span="12">

     <el-form-item label="状态：">

      <el-radio v-model="form.status" label="1">上线</el-radio>

      <el-radio v-model="form.status" label="0">下线</el-radio>

     </el-form-item>

    </el-col>

   </el-row>

   <el-row :gutter="10">

    <el-col :span="2" style="width:120px;">

     <p class="sub-title">梯度设置：</p>

    </el-col>

    <el-col :span="20">

      <el-row :gutter="10" v-for="(item,index) in form.productGroup" :key="index">

       <el-col :span="6">

        <el-form-item label="商品数量:">

         <el-input v-model="item.num" type="number" size="small" style="width:80px;"></el-input>

        </el-form-item>

       </el-col>

       <el-col :span="6">

        <el-form-item label="优惠价格:">

          <el-input v-model="item.price" type="number" size="small" style="width:80px;"></el-input>

        </el-form-item>

       </el-col>

       <el-col :span="4">

        <i class="el-icon-remove-outline" @click="deleteLadder(index)"></i> 

        <i class="el-icon-circle-plus-outline" @click="addLadder" v-if="index==0"></i>

       </el-col>

      </el-row>

    </el-col>

   </el-row>

   <el-form-item size="medium" class="p-submit">

    <el-button @click="resetForm('form')">取消</el-button>

    <el-button type="primary" @click="submitForm('form')">提交</el-button>

   </el-form-item>

  </el-form>

 </p>

</template>

<script>

/* eslint-disable */

export default {

 data() {

  return {

   form: {

    activityName: '',

    status: '1',

    productGroup: [{num:"",price:""}]

   },

   rules: {

    activityName: [

     { required: true, message: '请输入套餐名称', trigger: 'blur' }

    ]

   }

  }

 },

 methods: {

  deleteLadder(index)

  {

   if(this.form.productGroup.length>1){

    this.form.productGroup.splice(index,1);

   }

  },

  addLadder()

  {

   this.form.productGroup.push({num:"",price:""});

  },

  submitForm(formName)

  {

   console.log("activityName...",this.form.activityName);

   this.$refs[formName].validate((valid,obj) => {

    if (valid) {

     this.submitFormAction();

    } else {

     this.$message.error("验证不通过");

    }

   });

  },

  submitFormAction()

  {

   this.$message.success("提交成功");

  },

  resetForm(formName)

  {

   this.$refs[formName].resetFields();

   this.form.productGroup = [{num:"",price:""}];

  }

 }

}

 

</script>

<style>

.el-form-item {

 margin-bottom: 20px;

}

</style>

 

首先是添加rules规则，这个和正常添加规则一样：

 

1

2

3

4

productGroupRules: {

 productGroupNum: [{required: true, message: '请填写商品数量', trigger: 'blur'}],

 productGroupPrice: [{required: true, message: '请填写优惠价格', trigger: 'blur'}]

}

 

然后给表单项添加验证，以商品数量为例：

 

1

2

3

<el-form-item label="商品数量:" :prop="'productGroup.'+index+'.num'" :rules="productGroupRules.productGroupNum">

 <el-input v-model="item.num" type="number" size="small" style="width:80px;"></el-input>

</el-form-item>

 

注意这里:rules是每个表单项都要添加，有多个的话用productGroupRules.productGroupNum这样的形式区分，对应上面productGroupRules里的内容。

另外主要就是:prop了，注意正常验证表单项是prop，而这里是:prop。
:prop="'productGroup.'+index+'.num'"是拼接的形式，前面是v-for绑定的数组，中间是数组索引index，最后是表单项绑定的v-model的名称，然后用点.把它们连接起来。这三项都必须保证正确，错一个都无法验证。

另外就是要注意，v-for绑定的数组也必须绑定在form对象里，注意上面的data里：

 

1

2

3

4

5

6

7

8

9

10

11

12

form: {

 activityName: '',

 status: '1',

 productGroup: [{num:"",price:""}]

}

如果是：

 

form: {

 activityName: '',

 status: '1'

},

productGroup: [{num:"",price:""}]

 

是无法验证的，这一点也要注意。

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue