在前端開發中,經常需要對用戶輸入的數據進行驗證。其中一項重要的驗證是數值不能重復。Vue框架提供了方便的方式來實現這一驗證。
<div id="app">
<input type="text" v-model="num" @blur="checkNum">
<p v-if="errorMsg">{{ errorMsg }}</p>
</div>
var app = new Vue({
el: "#app",
data: {
num: "",
errorMsg: ""
},
methods: {
checkNum: function() {
var inputNum = this.num;
//通過ajax請求后臺判斷數值是否重復
if(inputNum == 已存在) {
this.errorMsg = "該數值已存在,請重新輸入";
} else {
this.errorMsg = "";
}
}
}
})
以上代碼為Vue實現數值不能重復的基本方式。首先在html中使用v-model指令將用戶輸入的數值綁定到Vue實例中的num屬性上。利用@blur事件實現當用戶離開輸入框時對數值進行驗證。驗證的方法checkNum通過ajax請求后臺判斷數值是否已經存在。存在則顯示錯誤信息,反之則清空錯誤信息。
如果需要對驗證結果進行更多的處理,可以將checkNum方法改寫成Promise形式,將驗證結果resolve出來,并在Vue實例的computed屬性中進行處理。例如:
var app = new Vue({
el: "#app",
data: {
num: "",
errorMsg: ""
},
methods: {
checkNum: function() {
return new Promise(resolve =>{
var inputNum = this.num;
if(inputNum == 已存在) {
this.errorMsg = "該數值已存在,請重新輸入";
resolve(false);
} else {
this.errorMsg = "";
resolve(true);
}
})
}
},
computed: {
checkSuccess: function() {
var res = false;
if(this.num != "" && this.errorMsg == "") {
this.checkNum().then(result =>{
//可以在這里對驗證結果進行處理
res = result;
})
}
return res;
}
}
})
以上代碼中checkNum方法返回一個Promise對象,resolve出驗證結果。computed屬性checkSuccess用來獲取驗證結果,并進行后續處理。例如驗證結果是true,則將該數值保存到數據庫中。
除了使用checkNum方法來進行數值驗證,還可以使用watch來監聽num屬性的變化。
var app = new Vue({
el: "#app",
data: {
num: "",
errorMsg: ""
},
watch: {
num: function() {
var inputNum = this.num;
if(inputNum == 已存在) {
this.errorMsg = "該數值已存在,請重新輸入";
} else {
this.errorMsg = "";
}
}
}
})
以上代碼中watch監聽num屬性的變化,一旦發生變化,就執行驗證操作。這種方式相比使用checkNum方法,更加簡潔。
無論使用checkNum還是watch,數值重復驗證都是非常重要的前端驗證。Vue提供了多種方式來實現該驗證,開發人員可以根據具體情況選擇合適的方式。