0


vue中elment-ui添加表单验证规则,以及动态增加的表单校验

一、表单格式固定的添加表单验证

  1. <template>
  2. <el-form ref="addForm" :model="form" label-width="100px" :rules="addRules">
  3. <el-form-item label="名称" prop="name" >
  4. <el-input v-model="addForm.telNumber"></el-input>
  5. </el-form-item>
  6. </el-form>
  7. </template>
  8. data () {
  9. return {
  10. addForm: {
  11. name:'',//名称
  12. },
  13. addRules: {
  14. name:[{ required: true, message: "名称不能为空", trigger: "blur" }],
  15. }
  16. }
  17. }

二、动态增加表单,添加表单验证

  1. <template>
  2. <el-form ref="form" :model="addForm" label-width="100px" :rules="addRules">
  3. <el-form-item v-for="(item,index) in addForm.nameList"
  4. label="名称数组对象"
  5. :prop="'nameList.'+ index +'.name'"
  6. :rules="addRules.name">
  7. <el-input v-model="item.name"></el-input>
  8. </el-form-item>
  9. </el-form>
  10. </template>
  11. data () {
  12. return {
  13. addForm: {
  14. nameList:[
  15. {name:''}
  16. ]
  17. },
  18. addRules: {
  19. name:[{ required: true, message: "名称不能为空", trigger: "blur" }],
  20. }
  21. }
  22. }
标签: vue.js css3 前端

本文转载自: https://blog.csdn.net/m0_69257679/article/details/132607312
版权归原作者 Komorebi ঞ꧔ꦿ 所有, 如有侵权,请联系我们删除。

“vue中elment-ui添加表单验证规则,以及动态增加的表单校验”的评论:

还没有评论