zoukankan      html  css  js  c++  java
  • Element-ui中自定义表单校验规则

    先看一个场景图:

    给一个标签el-tag添加表单的校验,且在内容有了以后关闭校验

    看代码:

              <el-form-item class="baseinfo-tags" label="服务包标签:" prop="tags">
                <el-tag
                  class="tag"
                  :key="tag"
                  v-for="tag in baseInfo.tags"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(tag)">
                  {{tag}}
                </el-tag>
                <el-input
                  class="input-new-tag"
                  v-if="inputVisible"
                  v-model="inputValue"
                  ref="saveTagInput"
                  size="small"
                  @keyup.enter.native="handleInputConfirm"
                  @blur="handleInputConfirm">
                </el-input>
                <el-button v-else class="button-new-tag" :disabled="baseInfo.tags.length == 3" size="mini" @click="showInput">+ 新建标签</el-button>
                <span class="tag-num">{{baseInfo.tags.length}}/3个</span>
              </el-form-item>
    

      为表单添加校验

          baseInfoRules: {
            tags: [
              {
                trype: 'array', validator: validateTags, required: true, message: '请选择至少一个标签', trigger: 'change'
              }
            ],
          }, // 表单正则
    

      添加自定义正则:

     随后需要在标签有了以后将校验关闭:

        // 新增标签 确认
        handleInputConfirm() {
          // xxx的操作
          this.$refs.baseInfoForm.validateField('tags'); // 再次校验tag的正则
        },
    

      随后在点击提交的时候进行正则判断。在tag改变的时候进行该正则的关闭

  • 相关阅读:
    yii框架中的各种小问题
    yii框架无限极分类的做法
    yii框架中的下拉菜单和单选框
    yii框架定时任务的操作
    yii框架里DetailView视图和GridView的区别
    git的使用(1)
    mysql 连接问题
    PHP字符串函数
    phpdocmentor 生成php 开发文档(转载)
    使用Nginx的X-Accel-Redirect实现大文件下载
  • 原文地址:https://www.cnblogs.com/bgwhite/p/11804887.html
Copyright © 2011-2022 走看看