vue表單驗(yàn)證自定義驗(yàn)證規(guī)則詳解
本文實(shí)例為大家分享了vue表單驗(yàn)證自定義驗(yàn)證規(guī)則,供大家參考,具體內(nèi)容如下
這是公司里Vue+Element UI的項(xiàng)目。寫的驗(yàn)證規(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="請(qǐng)選擇" @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="請(qǐng)選擇" @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: '請(qǐng)輸入聽取意見方式', trigger: 'change' } ?? ??? ??], ?? ??? ?attitude:[ ?? ??? ????{ required: true, message: '請(qǐng)輸入人員態(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('請(qǐng)輸入密碼')); ?? ??? ??? ???}else if(value !==this.Formname.newpwd){ ?? ??? ??? ??? ?return callback(new Error('兩次輸入密碼不一致!')); ?? ??? ??? ???}else { ? ? ? ? ?? ??? ??callback() ? ? ? ?? ??? } ?? ??? ?} ?? ???return{ ?? ???editFormPwd:{ ?? ??? ??? oldpwd:[{?? ?required: true, message: '請(qǐng)輸入原密碼', trigger: 'blur'}], ?? ??? ??? newpwd:[{ required: true, message: '請(qǐng)輸入密碼', trigger: 'blur' },], ?? ??? ??? newpwds:[{ required: true,validator: newpwdmin, trigger: 'blur'}], ?? ??? ??? ?? ?} ?? ??} }
提交返回什么就不寫了;
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- vue用elementui寫form表單時(shí),在label里添加空格操作
- vue+ElementUI 關(guān)閉對(duì)話框清空驗(yàn)證,清除form表單的操作
- vue elementui el-form rules動(dòng)態(tài)驗(yàn)證的實(shí)例代碼詳解
- vue elementui form表單驗(yàn)證的實(shí)現(xiàn)
- Vue ElementUI之Form表單驗(yàn)證遇到的問題
- Vue 清除Form表單校驗(yàn)信息的解決方法(清除表單驗(yàn)證上次提示信息)
- Vue3?+?elementplus實(shí)現(xiàn)表單驗(yàn)證+上傳圖片+?防止表單重復(fù)提交功能
- vue表單驗(yàn)證rules及validator驗(yàn)證器的使用方法實(shí)例
- 詳談vue中的rules表單驗(yàn)證(常用)
- Vue3實(shí)現(xiàn)登錄表單驗(yàn)證功能
- vue3在table里使用elementUI的form表單驗(yàn)證的示例代碼
相關(guān)文章
vue+webpack模擬后臺(tái)數(shù)據(jù)的示例代碼
這篇文章主要介紹了vue+webpack模擬后臺(tái)數(shù)據(jù)的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07vue?cesium加載點(diǎn)與定位到指定位置的實(shí)現(xiàn)方法
Cesium是一個(gè)用于創(chuàng)建高性能、跨平臺(tái)的3D地球和地圖的開源JavaScript庫,它提供了許多功能,包括地理空間數(shù)據(jù)可視化、地理定位和地圖導(dǎo)航等,這篇文章主要介紹了vue?cesium加載點(diǎn)與定位到指定位置,需要的朋友可以參考下2024-03-03Ant Design Vue日期組件的時(shí)間限制方式
這篇文章主要介紹了Ant Design Vue日期組件的時(shí)間限制方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04vue3組件化開發(fā)常用API知識(shí)點(diǎn)總結(jié)
Vue是目前Web前端最流行的開發(fā)框架技術(shù),?下面這篇文章主要給大家介紹了關(guān)于vue3組件化開發(fā)常用API的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06vue-cli實(shí)現(xiàn)異步請(qǐng)求返回mock模擬數(shù)據(jù)
網(wǎng)上有不少使用mockjs模擬數(shù)據(jù)的文章,但基本都是本地?cái)r截請(qǐng)求返回?cái)?shù)據(jù),本文主要介紹了vue-cli實(shí)現(xiàn)異步請(qǐng)求返回mock模擬數(shù)據(jù),文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03VUE渲染后端返回含有script標(biāo)簽的html字符串示例
今天小編就為大家分享 一篇VUE渲染后端返回含有script標(biāo)簽的html字符串示例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10