對于Vue中的input組件,有時候我們需要判斷其輸入值是否符合特定的要求。這時我們可以使用指令和事件來實現判斷。下面來看一些示例代碼。
// 使用指令 <template> <input v-model="inputValue" v-validate:integer> <p>{{errors.first('inputValue')}}</p> </template> <script> import { validationMixin } from 'vuelidate' export default { mixins: [validationMixin], data () { return { inputValue: '' } } } </script>
上面的代碼中,我們使用了v-validate指令來表示該input元素需要進行驗證,并指定該元素需要驗證整數類型。在<p>標簽中,我們使用了errors.first()方法來獲取驗證不通過的第一個錯誤信息,如果驗證通過則返回空字符串。
// 使用事件 <template> <input v-model="inputValue" @blur="onInputBlur"> <p>{{errorMsg}}</p> </template> <script> export default { data () { return { inputValue: '', errorMsg: '' } }, methods: { onInputBlur () { if (!/^[1-9]\d*$/.test(this.inputValue)) { this.errorMsg = '請輸入正整數' } else { this.errorMsg = '' } } } } </script>
在上面的代碼中,我們使用了@blur事件來表示在input元素失去焦點時需要觸發的操作。在方法中,我們通過正則表達式判斷輸入值是否為正整數,如果不是則設置errorMes為‘請輸入正整數’,如果是則設置errorMes為‘’。
上一篇vue input 小數
下一篇html字體顏色代碼咋用