element-ui form 校验表单输入空格问题

element-ui form 校验表单输入空格问题

form表单纯空格时抛出错误

长度超出区间时抛出错误

不影响正常输入空格

可以根据需要在提交时trim掉前后空格

<el-form :rules="rules" :model="form">
    <el-form-item prop='name'>
        <el-input v-model="name" />
    </el-form-item>
</el-form>





data() {
    const checkSpace = (rule, value, callback) => {
    
        if(!value.trim()) {
            callback(new Error('不能为空'))
        }else if(value.trim().length <3 || value.trim().length > 10) {
            callback(new Error('长度为3到10位'))
        }else{
            callback()
        }
    }
    return {
        form: {
            name: ''
        },
        rules: {
            name:[
                {required: true, validator: checkSpace, trigger: 'blur'}
            ]
        }
    }
}