newPassword: [
          { required: true, message: "新密碼不能為空", trigger: "blur" },
          { min: 6, max: 20, message: "長度在 6 到 20 個字符", trigger: "blur" }
        ]

當(dāng)鼠標(biāo)點擊輸入框外時顯示“新密碼不能為空”：

還有一個：

trigger: "change": 數(shù)據(jù)改變時觸發(fā)，道理跟上面類似

vue的一些易混淆事件整理 - @change | trigger: 'blur' |

onchange onpropertychange 和 oninput 事件的區(qū)別

1、onchange 事件與 onpropertychange 事件的區(qū)別：

onchange 事件在內(nèi)容改變（兩次內(nèi)容有可能還是相等的）且失去焦點時觸發(fā)。
onpropertychange 事件卻是實時觸發(fā)，即每增加或刪除一個字符就會觸發(fā)，通過 js 改變也會觸發(fā)該事件，但是該事件 IE 專有。

2、oninput 事件與 onpropertychange 事件的區(qū)別：

oninput 事件是 IE 之外的大多數(shù)瀏覽器支持的事件，在 value 改變時觸發(fā)，實時的，即每增加或刪除一個字符就會觸發(fā)，然而通過 js 改變 value 時，卻不會觸發(fā)。
onpropertychange 事件是任何屬性改變都會觸發(fā)的，而 oninput 卻只在 value 改變時觸發(fā)，oninput 要通過 addEventListener() 來注冊，onpropertychange 注冊方式跟一般事件一樣。（此處都是指在js中動態(tài)綁定事件，以實現(xiàn)內(nèi)容與行為分離）

3、oninput 與 onpropertychange 失效的情況：

（1）oninput 事件：a). 當(dāng)腳本中改變 value 時，不會觸發(fā)；b).從瀏覽器的自動下拉提示中選取時，不會觸發(fā)。
（2）onpropertychange 事件：當(dāng) input 設(shè)置為 disable=true后，onpropertychange 不會觸發(fā)。

@change

手動輸入或者通過彈出框選擇之后觸發(fā)

@change='handleChange'

trigger: ‘blur’

trigger: ‘blur’ 表示“當(dāng)失去焦點時（光標(biāo)不顯示的時候），觸發(fā)此提示”

此處應(yīng)該是有一個校驗，若失去焦點，則觸發(fā)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'}
        ]
      }

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: