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="width: 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) } } }
转发请备注出处
【公众号:缃言的调调】
【公众号:缃言的调调】