vue表單驗證自定義驗證規(guī)則詳解

更新時間：2022年03月21日 08:32:23 作者：騎喵的汪星人

這篇文章主要為大家詳細(xì)介紹了vue表單驗證自定義驗證規(guī)則，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue表單驗證自定義驗證規(guī)則，供大家參考，具體內(nèi)容如下

這是公司里Vue+Element UI的項目。寫的驗證規(guī)則放圖：

樣式代碼：

<div class="info" v-if="openslist">
? <h2 class="info-h">情況反饋表</h2>
? <el-form ref="stateForm" :model="stateForm" ?class="stateforms" :rules="rules">
? ? ?<el-row type="flex" class="row-bg">
? ? ? ? ?<el-col :span="12">
?? ??? ??? <el-form-item label="聽取意見方式" class="stateform" prop="way">
?? ??? ??? <el-select v-model="stateForm.way" ?placeholder="請選擇" @change="getReturn()">
?? ??? ??? ??<el-option label="面復(fù)" value="1"></el-option>
?? ??? ??? ??<el-option label="電話" value="2"></el-option>
?? ??? ??? ??<el-option label="座談" value="3"></el-option>
?? ??? ??? ??<el-option label="未聯(lián)系" value="4"></el-option>
?? ??? ??? ? ?</el-select>
?? ??? ??? ? ?</el-form-item>
?? ? ? ? ? ? ?  </el-col>
?? ? ? ? ?<el-col :span="12">
?? ??? ??<el-select v-model="stateForm.attitude" ?placeholder="請選擇" @change="getReturn()">
?? ??? ??? <el-option label="好" value="1"></el-option>
?? ??? ??? <el-option label="較好" value="2"></el-option>
?? ??? ??? <el-option label="一般" value="3"></el-option>
?? ??? ??? <el-option label="較差" value="4"></el-option>
?? ??? ??? ?</el-select>
?? ??? ???</el-form-item>
? ? ? ? ? ? </el-col>
?? ? ? ? ?</el-row>
?? ? ? ? ?<el-form-item>
? ? ? ? ? <el-button type="primary" @click="onSubmit('stateForm')" style="margin: 20px 0 0 80px;position: initial;">提交</el-button>
? ? ? ? ? ? </el-form-item>
? ? ?</el-form>
</div>

js代碼:

data(){
? return{
?? ??rules:{
?? ??? ?way:[
?? ??? ??{ required: true, message: '請輸入聽取意見方式', trigger: 'change' }
?? ??? ??],
?? ??? ?attitude:[
?? ??? ????{ required: true, message: '請輸入人員態(tài)度', trigger: 'change' }
?? ??? ??]
? ? ? ???}
? ? }
}

記住form表單一定要“:rules=“rules（自己定義）””，下面是自定義規(guī)則，放圖：

樣式代碼：

<el-form ?label-width="100px" class="passstyle" :model="Formname" ?:rules="editFormPwd" ?ref="Formname">
?? ??? ??? ?<el-form-item label="用戶名：">
?? ??? ??? ??? ?<!--<el-input ?style="width:50%" clearable></el-input>-->
?? ??? ??? ??? ?<span style="width:50%" class="passSpan" >{{username}}</span>
?? ??? ??? ?</el-form-item>
?? ??? ??? ?<el-form-item label="原密碼：" ? prop="oldpwd" >
?? ??? ??? ??? ?<el-input ?style="width:50%" clearable v-model="Formname.oldpwd" type="password">
?? ??? ??? ??? ?</el-input>
?? ??? ??? ?</el-form-item>
?? ??? ??? ?<el-form-item label="新密碼：" prop="newpwd">
?? ??? ??? ??? ?<el-input ?style="width:50%" clearable v-model="Formname.newpwd" type="password"></el-input>
?? ??? ??? ?</el-form-item>
?? ??? ??? ?<el-form-item label="確認(rèn)密碼：" prop="newpwds">
?? ??? ??? ??? ?<el-input ?style="width:50%" clearable v-model="Formname.newpwds" type="password"></el-input>
?? ??? ??? ?</el-form-item>
?? ??? ??? ?<el-form-item>
?? ??? ??? ??? ?<el-button type="primary" ?@click="subpass('Formname')">提交</el-button>
?? ??? ??? ?</el-form-item>
</el-form>

js代碼:

data(){
?? ???//這里是自定義的規(guī)則
?? ??? ?var newpwdmin=(rule, value, callback)=>{
?? ??? ??? ?if(!value){
?? ??? ??? ????return callback(new Error('請輸入密碼'));
?? ??? ??? ???}else if(value !==this.Formname.newpwd){
?? ??? ??? ??? ?return callback(new Error('兩次輸入密碼不一致!'));
?? ??? ??? ???}else {
? ? ? ? ?? ??? ??callback()
? ? ? ?? ??? }
?? ??? ?}
?? ???return{
?? ???editFormPwd:{
?? ??? ??? oldpwd:[{?? ?required: true, message: '請輸入原密碼', trigger: 'blur'}],
?? ??? ??? newpwd:[{ required: true, message: '請輸入密碼', trigger: 'blur' },],
?? ??? ??? newpwds:[{ required: true,validator: newpwdmin, trigger: 'blur'}],
?? ??? ??? ?? ?}
?? ??}
}

提交返回什么就不寫了；

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: