美文网首页
elementui el-form表单自定义规则

elementui el-form表单自定义规则

作者: 泪滴在琴上 | 来源:发表于2022-03-07 14:16 被阅读0次

需求:
输入框只能输入20个字符(如果是汉字的话10个字)

<el-input v-model="addCourseForm.lesson_name" placeholder="请输入课程标题"></el-input>
data: function () {
            const checkLesson = (rule, value, cb) => {
                if (!value) return 0;
                var b = value.match(/[^\x00-\xff]/g);
                var len = value.length + (b ? b.length : 0);
                if (len > 20) {
                    return cb(new Error('最多可输入10个汉字 20个字符'))
                } else {
                    cb()
                }
            }
            return {
                addCourseForm: { //新增课程表单
                    lesson_name: '', //课程名称
                    daterange: [] //有效结束时间
                },
                itemRules: { //表单必填规则
                    lesson_name: [{
                        required: true,
                        message: '请输入课程标题',
                    }, {
                        validator: checkLesson,
                        message: '最多可输入10个汉字 20个字符',
                    }],
                    daterange: [{
                        required: true,
                        message: '请选择开始时间和结束时间',
                    }]
                },
                courseList: [], //课程列表
            }

相关文章

网友评论

      本文标题:elementui el-form表单自定义规则

      本文链接:https://www.haomeiwen.com/subject/kpcnrrtx.html