關於表單校驗el-input做的主要工作就是跟el-form-item互動，把input的相關事件傳送給el-form-item，上一篇已經講到在el-form-item的mounted的生命週期裡面有如下程式碼的
this.$on('el.form.blur', this.onFieldBlur);
this.$on('el.form.change', this.onFieldChange);
複製程式碼我們在el-input裡面依然可以看到inject，鑑於有很多單獨使用el-input的地方，所以也給了預設值。
inject: {
elForm: {
default: ''
},
elFormItem: {
default: ''
}
},
複製程式碼看看computed####
其實這裡面的比較簡單，基本都是控制狀態和樣式的，有些狀態是由el-form或者el-form-item控制的。
watch####
直接監聽父級傳入的value，根據value來設定元件內儲存的currentValue。
看看 methods
focus() {
(this.$refs.input || this.$refs.textarea).focus();
},
blur() {
(this.$refs.input || this.$refs.textarea).blur();
},
select() {
(this.$refs.input || this.$refs.textarea).select();
},
handleFocus(event) {
this.focused = true;
this.$emit('focus', event);
},
handleBlur(event) {
this.focused = false;
this.$emit('blur', event);
if (this.validateEvent) {
this.dispatch('ElFormItem', 'el.form.blur', [this.currentValue]);
}
},
handleInput(event) {
const value = event.target.value;
this.setCurrentValue(value);
if (this.isOnComposition) return;
this.$emit('input', value);
},
handleChange(event) {
this.$emit('change', event.target.value);
},
handleComposition(event) {
if (event.type === 'compositionend') {
this.isOnComposition = false;
this.currentValue = this.valueBeforeComposition;
this.valueBeforeComposition = null;
this.handleInput(event);
} else {
const text = event.target.value;
const lastCharacter = text[text.length - 1] || '';
this.isOnComposition = !isKorean(lastCharacter);
if (this.isOnComposition && event.type === 'compositionstart') {
this.valueBeforeComposition = text;
}
}
},
複製程式碼屬性validateEvent預設是true， 呼叫dispatch向上傳送事件，如果存在父元件el-form-item的話，就能直接$emit對應的事件了。
在此，element-ui的表單校驗系列就講完了。
順便提一下compositionstart，compositionupdate，compositionend事件。
以一個業務場景舉例吧：
比如表單裡還可以輸入兩個字元，但我輸入中文用的是拼音，要完成最後兩個漢字的輸入，需要按很多個字母鍵，但每一鍵都會因為input事件而擷取value，導致最後兩個漢字不能輸入。
解決辦法，使用composition來處理，有compositionstart和compositionend事件。
當我們打漢字的時候，是屬於非直接輸入的，這個時候應當是我們按下空格鍵或者選擇某個漢字詞後才算真正的輸入，使用compositionend事件後取到的值來進行長度判斷。
compositionstart事件在使用者開始進行非直接輸入的時候出觸發，在非直接輸入結束，也就是在使用者點候選詞或者點選選定按鈕之後，會出發compositionend事件。
el-input處於compositionstart或者compositionupdate事件進行中會用了isOnComposition來標記下，具體是根據最後一個字元來判斷的this.isOnComposition = !isKorean(lastCharacter);，如果是compositionstart還會用valueBeforeComposition先儲存input裡面輸入的值。
原文地址：element-ui表單原始碼解析之el-input