我尝试使用vuelidate https://vuelidate.netlify.com/#sub-installation从输入表单中进行输入验证,但在控制台中给出了错误。我正在使用Vue.JS和Axios进行表单输入,需要您的帮助,我可能会错过一些东西。
这是输入表单的代码
<div class="form-group" :class="{ 'form-group--error': $v.nopolisi.$error }">
<input type="text" class="form-control" v-model.trim="nopolisi" @input="setnopolisi($event.target.value)" name="nopolisi" id="nopolisi"/>
<div class="error" v-if="!$v.nopolisi.required">Field is required</div>
<div class="error" v-if="!$v.nopolisi.minLength">No Polisi must have at least {{$v.nopolisi.$params.minLength.min}} letters.</div>
</div>
这是Javascript的代码
import API from '../API';
import swal from 'sweetalert';
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)
import { required, minLength } from 'vuelidate/lib/validators'
var urlAddStock = API.url.host + '/addstock';
var inputMobile = {
init: function(){
this.vueConfig();
API.auth();
},
vueConfig: function(){
var app = new Vue({
el: '#app',
data() {
return{
nopolisi: ""
}
},
validations: {
nopolisi: {
required,
minLength: minLength(4)
},
},
methods: {
submitStock: function(){
let self = this;
this.stockSubmit = true;
axios({
nopolisi: this.nopolisi
}).then(res =>{
console.log(res.data.message);
if(res.data.message === "Berhasil Menambahkan Data")
{
swal({
title: "Sukses!",
text: "Sukses Manambahkan Data",
icon: "success",
button: "OK",
});
self.stockSubmit = false;
}
else
{
swal({
title: "Terjadi Kesalahan System",
text: res.data.message,
icon: "error",
});
self.stockSubmit = false;
}
}, err =>{
console.log(err);
self.stockSubmit = false;
});
},
setnopolisi: function(value) {
this.nopolisi = value
this.$v.nopolisi.$touch()
},
},
});
}
}
感谢您的任何回复