zoukankan      html  css  js  c++  java
  • elementUI表单校验汇总

    场景一:动态输入框,并对输入框内容做特殊字符校验

    <el-form-item
       v-for="(items, index) in serviceRuleForm.expression" 
       :key="index" 
       :label="index === 0 ? '表达式' : ''"
       :prop="'expression.'+index"
       :rules="rules.expression">
       <el-input
         v-model.trim="serviceRuleForm.expression[index]"
         size="mini"
         style=" 80%;"
         clearable
        />
        <div class="btnRight">
          <el-button
            type="text"
            icon="el-icon-circle-plus-outline"
            @click="addhandleExpression(serviceRuleForm.expression)"
           />
           <el-button
             type="text"
             icon="el-icon-delete"
             @click="deletehandleExpression(index, serviceRuleForm.expression)"
           />
       </div>
    </el-form-item>
    data() {
       const validateExpression = (rule, value, callback) => {
          if (!value) {
            callback(new Error('请输入表达式'));
          }else if (/(=|&|%)/.test(value)) {
            callback(new Error('不支持特殊字符 = & %'));
          }else {
            callback();
          }
        };
        return {
            serviceRuleForm: {
                selector: { type: "none" },
                expression: ['']
            },
            rules: {
                expression: [
                { required: true, validator: validateExpression, trigger: "blur" }
               ]
    } } }
    methods: {
        addhandleExpression(list) {
          var node = ''
          list.push(node)
        },
        deletehandleExpression(index, list) {
          if (Array.isArray(list) && list.length <= 1) {
            return this.$message.warning('表达式仅剩一条,不可删除!')
          } else if (Array.isArray(list) && list.length > 1) {
            list.splice(index, 1)
          }
        }
    }
    转发请备注出处
    【公众号:缃言的调调】
  • 相关阅读:
    通过PDB文件实现非嵌入式的c++反射
    在c++中实现反射的初步想法
    对比特币相关的一些技术细节的补充
    初窥比特币
    根据一个坐标查找其所属区域的一些优化想法
    go两种数据类型的区别、数据类型和操作符、常量、变量声明
    go的相关包time、os、rand、fmt
    go语言的特性
    结构体
    defer、panic、recover
  • 原文地址:https://www.cnblogs.com/zuojiayi/p/15162162.html
Copyright © 2011-2022 走看看