vue中表單實時驗證
阿新 • • 發佈:2018-11-05
1.不能輸入漢字
<x-input v-model="userInfo.newPwd" class="user__input" :type="pwdShow? 'text':'password'" placeholder="請輸入密碼" @input='inputFun'></x-input> //繫結inputFun事件 //在methods中定義函式 methods: {inputFun(e){ let arr = [] let arr2 = [] let val = '' let isR = false arr.push(...e) //正則驗證,將字串拆分每一個字進行驗證,防止一次性輸入多個漢字 arr.map((v)=>{ if(/[\u4E00-\u9FA5]/.test(v)){ isR = true }else{ arr2.push(v) } }) if(isR){ this.$vux.toast.text('請勿輸入漢字'); val = arr2.join('') this.$nextTick(function(){ //在這時渲染,實時替換 this.userInfo.newPwd = val }) } } } //也可以在 watch: { userInfo.newPwd:function(){} //繫結要監聽的 }