最近幫朋友看一個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元件的 “ 自定義校驗規則 ” 案例！

以上分享僅供參考，歡迎留言交流～