当前位置:   article > 正文

form表单中数组的校验_表单检验对象数组属性

表单检验对象数组属性

1,校验的form对象中,包含数组,对数组进行循环

  1. <template>
  2. <div class="hello">
  3. <el-form ref="form" :model="form" :rules="rules">
  4. <!-- 对form中的数组进行校验 -->
  5. <div v-for="(item, index) in form.list" :key="index">
  6. <el-form-item
  7. label="姓名"
  8. :prop="`list[${index}].name`"
  9. :rules="{ required: true, message: '请输入姓名', trigger: 'blur' }"
  10. >
  11. <el-input v-model="item.name" />
  12. </el-form-item>
  13. </div>
  14. <el-button type="primary" @click="submitHandle"> 保 存 </el-button>
  15. </el-form>
  16. </div>
  17. </template>
  18. <script>
  19. export default {
  20. name: "test",
  21. data() {
  22. return {
  23. form: {
  24. list: [
  25. {
  26. name: "",
  27. age: "",
  28. },
  29. {
  30. name: "",
  31. age: "",
  32. },
  33. ],
  34. },
  35. rules: {},
  36. };
  37. },
  38. methods: {
  39. submitHandle() {
  40. this.$refs["form"].validate((val) => {
  41. if (val) {
  42. console.log("校验成功");
  43. } else {
  44. console.log("校验失败");
  45. }
  46. });
  47. }
  48. },
  49. };
  50. </script>

2.对数组中的输入框进行多个条件的校验:

https://blog.csdn.net/qq_42323925/article/details/117327665

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/2023面试高手/article/detail/112920
推荐阅读
相关标签