vue el onblur是一個非常有用的事件,它可以在元素失去焦點時觸發。使用onblur事件可以實現很多功能,如表單驗證、輸入提示、聯想搜索等。
下面我們來看一個實現表單驗證的例子。假設我們有這樣一個表單:
<form> <label>用戶名: <input type="text" name="username" id="username" @blur="checkUsername"> </label> <label>密碼: <input type="password" name="password" id="password" @blur="checkPassword"> </label> <input type="submit" value="登錄"> </form>
我們在輸入框上使用@blur綁定了兩個方法:checkUsername和checkPassword。這兩個方法會在對應的輸入框失去焦點時被調用。
<script> export default { methods: { checkUsername() { let username = document.getElementById('username').value if(username.length< 8) { alert('用戶名必須不少于8個字符') } }, checkPassword() { let password = document.getElementById('password').value if(password.length< 6) { alert('密碼必須不少于6個字符') } } } } </script>
這里我們使用了原生的JavaScript獲取輸入框的值,并進行驗證。如果不符合規定,就彈出警告框。在實際項目中,我們可能會將驗證邏輯寫到組件內部,使用data維護輸入框的值。