1.开发环境 vue2+vee-validate2
2.电脑系统 windows11专业版
3.在开发的过程中,咱们常常会应用到表单来解决数据,然而表单的数据怎么校验呢?上面我来分享一下办法,心愿对你有所帮忙。
4.装置:
npm install vee-validate --save4-1.在main.js或者index.js中引入:
import veeCustomSet from 'veeCustomSetAdmin';import VeeValidate from 'vee-validate';Vue.use(VeeValidate);veeCustomSet.localizeDictionary(VeeValidate);veeCustomSet.extendRegex(VeeValidate);4-2.在对应的页面中应用:
// template代码<input type="text" name="phone" maxlength="11" v-model="FormData.phoneNumber" v-validate.inital="`required|cellphone|isCellPhone:电话号码,${oldPhone}`" placeholder="请输出11位电话号码"><p class="errormsg"> <span class="validateError" v-show="errors.has('phone')" v-html="errors.first('phone')"> </span></p>methods代码extendValidate() { this.$validator.extend('isCellPhone', { getMessage() { return `必填`; }, validate(value, arg) { if ((!!arg[1] && (arg[1] == value)) || value == '') { return true; } return new Promise((resolve) => { // _this.$Axios.post('',{ // phone: value // }).then((res) => { // let result = true; // if (res.code != 1000000) { // result = false; // } // return resolve({ // valid: result // }); // }); return resolve({ valid: true }); }); } });},// 成果如下:// 手机号输出不对// 手机号为空4-3.提交的时候,验证表单数据:
Submit() { const _this = this; console.log(this.showAuthentication); switch (this.showAuthentication) { case 1: console.log("新增"); this.$refs.tipModal.confirm({ autoClose: false, beforeOpen() { console.log("00000"); _this.$nextTick(() => { _this.errors.clear(); _this.$validator.validateAll().then((e) => { if (e) { console.log(e); // _this.$Axios.post('',{ // phone: _this.formData.phone, // name: _this.formData.name, // type: _this.formData.type // }).then(() => { // _this.$refs.alertConfirm.close(); // _this.$refs.appTable.refresh(); // }); } else { console.log("+++++++++"); console.log(e); console.log("+++++++++"); } }); }); } }); break; case 2: console.log("批改"); break; default: this.$refs.tipModal.confirm({ autoClose: false, beforeOpen() { _this.$nextTick(() => { _this.errors.clear(); }); }, confirm() { _this.$validator.validateAll().then((e) => { if (e) { console.log(e); // _this.$Axios.post('',{ // phone: _this.formData.phone, // name: _this.formData.name, // type: _this.formData.type // }).then(() => { // _this.$refs.alertConfirm.close(); // _this.$refs.appTable.refresh(); // }); } }); } }); }}// 成果如下:// 没有填写,表单数据为空// 验证不通过留神::::依据_this.$validator.validateAll().then((e)的e(布尔值)来判断是否调用接口,如果验证灭有通过就不调用接口,如果验证通过就调用接口4-4.template全副代码:
<div class="g-video-editpublisher" v-if="showAuthentication != 0"> <div class="g-content-wrap"> <h4>{{showAuthentication == 1 ? '新建':'编辑'}}用户</h4> <p> <label><i>*</i>手机号:</label> <input type="text" name="phone" maxlength="11" v-model="FormData.phoneNumber" v-if="showAuthentication == 1" v-validate.inital="`required|cellphone|isCellPhone:电话号码,${oldPhone}`" placeholder="请输出11位电话号码"> <input type="text" v-model="AuthenticationObj.tel" v-if="showAuthentication == 2" name="phone" maxlength="11" oninput="if(value.length>11)value=value.slice(0,11)" v-validate="'required|cellphone|isCellPhone:电话号码'" placeholder="请输出11位电话号码"> </p> <p class="errormsg"> <span class="validateError" v-show="errors.has('phone')" v-html="errors.first('phone')"> </span> </p> <p> <label><i>*</i>认证类型:</label> <custom-select v-if="showAuthentication == 1":select-type="'single'":init-params="selectInitParams1" v-validate.inital="'required'" v-model="searchData.AuthenticationType" @input="chooseAuthenticationType":options="AuthenticationTypeList"> </custom-select> <custom-select v-else:select-type="'single'":init-params="selectInitParams1" v-validate.inital="'required'" v-model="AuthenticationObj.authenticationtype" @input="chooseAuthenticationType":options="AuthenticationTypeList"> </custom-select> </p> <p> <label><i>*</i>认证名称:</label> <input v-if="showAuthentication == 1" type="text" placeholder="请输出认证名称" v-model="FormData.authenticationName" v-validate="'required'" name="authenticationName"> <input v-else type="text" placeholder="请输出认证名称" v-model="AuthenticationObj.authenticationName"> </p> <p class="errormsg"> <span class="validateError" v-show="errors.has('authenticationName')" v-html="errors.first('authenticationName')"> </span> </p> <span class="textSpan">(带<i style="color:red">*</i>为必填项）</span> <div class="f-close" @click="close">X</div> <div class="f-btn"> <a @click="close">勾销</a> <a @click="Submit">确定</a> </div> </div> <modal ref="tipModal" style="display:none"></modal> </div></template>4-5.引入modal
import modal from 'vueModal_v2';// 注册components: { 'modal': modal},5.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。