vue中關於trigger的用法
關於trigger的用法
trigger
: "blur": 失去焦點時觸發
newPassword: [ { required: true, message: "新密碼不能為空", trigger: "blur" }, { min: 6, max: 20, message: "長度在 6 到 20 個字符", trigger: "blur" } ]
當鼠標點擊輸入框外時顯示“新密碼不能為空”:
還有一個:
trigger
: "change": 數據改變時觸發,道理跟上面類似
vue的一些易混淆事件整理 – @change | trigger: 'blur' |
onchange onpropertychange 和 oninput 事件的區別
1、onchange 事件與 onpropertychange 事件的區別:
onchange
事件在內容改變(兩次內容有可能還是相等的)且失去焦點時觸發。onpropertychange
事件卻是實時觸發,即每增加或刪除一個字符就會觸發,通過 js 改變也會觸發該事件,但是該事件 IE 專有。
2、oninput 事件與 onpropertychange 事件的區別:
oninput
事件是 IE 之外的大多數瀏覽器支持的事件,在 value 改變時觸發,實時的,即每增加或刪除一個字符就會觸發,然而通過 js 改變 value 時,卻不會觸發。onpropertychange
事件是任何屬性改變都會觸發的,而 oninput 卻隻在 value 改變時觸發,oninput 要通過 addEventListener() 來註冊,onpropertychange 註冊方式跟一般事件一樣。(此處都是指在js中動態綁定事件,以實現內容與行為分離)
3、oninput 與 onpropertychange 失效的情況:
- (1)
oninput
事件:a). 當腳本中改變 value 時,不會觸發;b).從瀏覽器的自動下拉提示中選取時,不會觸發。 - (2)
onpropertychange
事件:當 input 設置為 disable=true後,onpropertychange 不會觸發。
@change
手動輸入或者通過彈出框選擇之後觸發
@change='handleChange'
trigger: ‘blur’
trigger
: ‘blur’ 表示“當失去焦點時(光標不顯示的時候),觸發此提示”
此處應該是有一個校驗,若失去焦點,則觸發trigger進行校驗,若校驗不成功,則進行提示
//組件 <el-form :model="form" :rules="rules" ref="groupForm"></el-form> //JavaScript rules:{ code: [ {required: true, message: '請輸入!!!!!, trigger: 'blur'} ], name: [ {required: true, message: '輸入啊!!!!', trigger: 'blur'} ] }
以上為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。
推薦閱讀:
- 詳談vue中的rules表單驗證(常用)
- Vue使用antd中input組件去驗證輸入框輸入內容(rules 案例)
- antd vue v-decorator的取值與賦值問題
- Vue實現登錄以及登出詳解
- Vue 兩個字段聯合校驗之修改密碼功能的實現