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.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。
发表回复