element Form表单自定义校验（针对局部输入控件局部校验）

最近帮朋友看一个vue项目，需要在整个表单的一个输入控件上添加校验，因为表单是动态创建的，就没有考虑整个表单绑定rules，而是在<el-form-item>上绑定了rules，具体代码如下：

template/html部分：

<el-form-item 
    label="自定义校验"
    prop="text"
    :rules="[
        { 
            required: true, 
            message: '请输入~', 
            trigger: 'blur' 
        }, { 
            validator: (rule, value, callback)=>{validateSku(rule, value, callback)}, 
            trigger: ['blur', 'change'] 
        }
    ]">
    <el-input 
        v-model="formInline.text" 
        placeholder="请输入">
    </el-input>
</el-form-item>

javaScript部分：

<script>
export default {
    data() {
        return {
            formInline: {
                text: '',
            }
        }
    },
    methods: {
        onSubmit() {
            console.log('submit!');
        },
        /**
         * @method 自定义校验方法
         * callback 必须调用
         */
        validateSku(rule, value, callback){
            var text = /，/g;
            if (text.test(value)) {
                callback(new Error("输入不可以包含“,”"))
            } else {
                callback();
            }
        }
    }
}
</script>

运行结果：

1.失去焦点与点击提交时：

2.输入 “ ， ” 时：

ps：

表单整体添加校验可参考Element-ui Form组件的 “ 自定义校验规则 ” 案例！

 

以上分享仅供参考，欢迎留言交流～