关于vue2:vue2veevalidate2表单校验

1. 开发环境 vue2+vee-validate2
2. 电脑系统 windows11 专业版
3. 在开发的过程中, 咱们常常会应用到表单来解决数据, 然而表单的数据怎么校验呢? 上面我来分享一下办法, 心愿对你有所帮忙。
4. 装置:

npm install vee-validate --save

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