ElementUI表單驗證validate和validateField的使用及區(qū)別
更新時間：2023年02月07日 10:44:59 作者：roouzenn
Element-UI作為前端框架,最常使用到的就是表單驗證,下面這篇文章主要給大家介紹了關(guān)于ElementUI表單驗證validate和validateField的使用及區(qū)別,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
yyElement - The world's most popular Vue UI framework
傳參及一些具體的直接點上邊官網(wǎng)連接
這里我主要說一下實際項目中的使用
validate 會校驗表單的整個屬性,只要你給這個字段設(shè)置上了rule
this.$refs.表單名稱.validate(async (valid) => {
if (!valid) {
//檢驗不通過走這里
return;
}
//校驗通過走這里
}validateField 有些時候我們只需要驗證表單中的部分字段,其他字段不需要，這時候我們就需要用validateField函數(shù)了,注意,這里有幾個坑大家別踩了
首先，我們得知道，使用validateField部分校驗數(shù)組的時候，數(shù)組有幾位，就會回調(diào)幾次。當(dāng)也就是空的時候，表示驗證通過，回調(diào)返回為“ ”，所以就是，你校驗幾個規(guī)則，就會返回幾個結(jié)果，如果通過就為“”（空）。
validateField跟validate的區(qū)別: 在這兩個代碼段中已經(jīng)展示的很清晰了,自己上手跑一跑邏輯就通了
let validateFieldList = [];
this.$refs.loginForm.validateField(
//這里要放數(shù)組,數(shù)組中寫上要校驗的字段
["userName", "password", "mobilePhone"],
async (valid) => {
if (!valid) {
//校驗通過走這里,每通過一次,會往這個數(shù)組里加一個""
validateFieldList.push(valid);
//因為我這里總共校驗了三個字段,所有最終三個字段都校驗成功之后,數(shù)組中會有三個""
if (
validateFieldList.length == 3 &&
validateFieldList.every((item) => item === "")
) {
//這里寫校驗通過的業(yè)務(wù)邏輯
}
//校驗不通過走這里
return;
}
}補充：validateField方法對部分表單字段進行校驗
<template>
<div class="content-container developer-container dev-register-container">
<nav-bar
:address="address"
:title="title"
:register="true">
</nav-bar>
<div class="steps">
<el-steps :active="2" align-center>
<el-step title="用戶信息"></el-step>
<el-step title="資質(zhì)提交"></el-step>
<el-step title="管理員信息"></el-step>
</el-steps>
</div>
<div class="form-list">
<el-form ref="thirdForm" size="medium" label-position="right" :model="thirdForm" :rules="rules" label-width="100px">
<el-form-item label="管理員姓名" prop="userName" v-if="firstForm.devpType==0">
<el-input v-model.trim="thirdForm.userName" placeholder="請輸入管理員姓名，最多20字" ></el-input>
</el-form-item>
<el-form-item label="管理員賬號" prop="account">
<el-input v-model.trim="thirdForm.account" placeholder="請輸入管理賬號，最多50字"></el-input>
</el-form-item>
<el-form-item label="登錄密碼" prop="password" >
<el-input id="pwd" v-model.trim="thirdForm.password" type="password" placeholder="請輸入長度為10-20位包含數(shù)字字母及其他特殊字符的密碼" minlength="10" maxlength="20">
<i slot="suffix" class="el-input__icon el-icon-view el-show" @click="showPwd"></i>
</el-input>
</el-form-item>
<el-form-item label="電子郵箱" prop="email">
<el-input v-model.trim="thirdForm.email" placeholder="請輸入電子郵箱，最多50字"></el-input>
</el-form-item>
<el-form-item label="電話" prop="telephone" v-if="firstForm.devpType==0">
<el-input v-model.trim="thirdForm.telephone" placeholder="請輸入電話，最多50字"></el-input>
</el-form-item>
<el-form-item label="傳真" prop="fax" v-if="firstForm.devpType==0">
<el-input v-model.trim="thirdForm.fax" placeholder="請輸入傳真，最多50字"></el-input>
</el-form-item>
<el-form-item label="郵編" prop="postCode" v-if="firstForm.devpType==0">
<el-input v-model.trim="thirdForm.postCode" placeholder="請輸入郵編，最多10字" maxlength=10></el-input>
</el-form-item>
<el-form-item label="手機號碼" prop="phone" >
<el-input v-model.trim="thirdForm.phone" placeholder="請輸入手機號碼" maxlength=11></el-input>
</el-form-item>
<el-form-item label="圖片驗證碼" prop="captchaCode" >
<div class="vertification-area">
<el-input v-model.trim="thirdForm.captchaCode" placeholder="請輸入圖片驗證碼" maxlength="10" style="margin-bottom: 0px; width: calc(100% - 110px); float: left;">
</el-input>
<img :src="captchaUrl" class="vertification-code" @click="refresh"/>
</div>
</el-form-item>
<el-form-item label="手機驗證碼" prop="phoneValidation" >
<div>
<el-input v-model.trim="thirdForm.phoneValidation" placeholder="請輸入手機驗證碼" style="width: calc(100% - 110px);" maxlength="6"></el-input>
<el-button v-show="sendAuthCode" @click="sendMsg(thirdForm.phone)" type="primary" class="sendMsg">發(fā)送驗證碼</el-button>
<el-button v-show="!sendAuthCode" type="primary" class="sendMsg">{{auth_time}}秒</el-button>
</div>
</el-form-item>
<el-form-item class="btn-wrap">
<el-button class="previousStep" @click="previousStep()" >上一步</el-button>
<el-button :disabled="this.sendAuthCode" type="primary" @click="nextStep('thirdForm')" class="submitButton">提交</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
import md5 from '@/utils/MD5';
import api from '@/api/mopApi';
import global from '@/global';
import navBar from '@/components/nav-bar';
import titleBar from './basic/TitleBar';
export default {
data() {
return {
title: '管理平臺',
address: 'title.png',
sendAuthCode: true, /* 布爾值，通過v-show控制顯示‘獲取按鈕'還是‘倒計時' */
auth_time: '120', /* 倒計時 計數(shù)器 */
firstForm: {},
thirdForm: {
userName: '',
account: '',
password: '',
email: '',
telephone: '',
fax: '',
postCode: '',
phone: '',
phoneValidation: '',
captchaCode: '',
},
captchaUrl: `${global.CTX}/captcha`,
rules: {
userName: [
{ required: true, message: '請輸入管理員姓名', trigger: 'blur' },
{ min: 1, max: 20, message: '管理員姓名在20字以內(nèi)', trigger: 'blur' },
],
account: [
{ required: true, message: '請輸入管理員賬號', trigger: 'blur' },
{ min: 1, max: 50, message: '管理員賬號在50字以內(nèi)', trigger: 'blur' },
{ pattern: /^\S+$/, message: '賬號不允許有空格', trigger: 'blur' },
],
password: [
{ required: true, message: '請輸入長度為10-20位包含數(shù)字、字母、特殊字符的密碼', trigger: 'blur' },
{ pattern: /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[\W_]).{10,20}$/, message: '請輸入長度為10-20位包含數(shù)字、字母、特殊字符的密碼', trigger: 'blur' },
],
postCode: [
{ max: 10, message: '郵編長度10位以內(nèi)', trigger: 'blur' },
],
fax: [
{ max: 50, message: '傳真長度50字以內(nèi)', trigger: 'blur' },
],
email: [
{ required: true, message: '請輸入郵箱', trigger: 'blur' },
{ max: 50, message: '郵箱在50字以內(nèi)', trigger: 'blur' },
{ pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/, message: '請檢查郵箱格式是否正確', trigger: 'blur' },
],
//最后的校驗規(guī)則，不需要自己寫校驗規(guī)則也可以寫成 { type: 'email', message: '請檢查郵箱格式是否正確', trigger: 'blur' },
/*type的枚舉值有
string: Must be of type string. This is the default type.
number: Must be of type number.
boolean: Must be of type boolean.
method: Must be of type function.
regexp: Must be an instance of RegExp or a string that does not generate an exception when creating a new RegExp.
integer: Must be of type number and an integer.
float: Must be of type number and a floating point number.
array: Must be an array as determined by Array.isArray.
object: Must be of type object and not Array.isArray.
enum: Value must exist in the enum.
date: Value must be valid as determined by Date
url: Must be of type url.
hex: Must be of type hex.
email: Must be of type email.
https://github.com/yiminghe/async-validator#type
https://www.cnblogs.com/chaoxiZ/p/10136780.html
*/
telephone: [
{ max: 50, message: '電話長度在50位以內(nèi)', trigger: 'blur' },
],
phone: [
{ required: true, message: '請輸入手機號碼', trigger: 'blur' },
{ pattern: /^((1[3,5,8][0-9])|(14[5,7])|(17[0,5,6,7,8])|(19[7]))\d{8}$/, message: '請檢查手機號是否正確', trigger: 'blur' },
],
phoneValidation: [
{ required: true, message: '請輸入手機驗證碼', trigger: 'blur' },
],
captchaCode: [
{ required: true, message: '請輸入圖片驗證碼', trigger: 'blur' },
],
},
};
},
components: {
titleBar,
navBar,
},
methods: {
// 是否顯示密碼
showPwd() {
const input = document.getElementById('pwd');
if (input.type === 'password') {
input.type = 'text';
} else if (input.type === 'text') {
input.type = 'password';
}
},
// 刷新圖片驗證碼
refresh() {
this.captchaUrl = `${global.CTX}/captcha?tm=${Math.random()}`;
},
// 倒計時
getAuthCode() {
if (this.authTimeTimer) {
clearTimeout(this.authTimeTimer);
}
this.authTimeTimer = setTimeout(() => {
this.auth_time -= 1;
if (this.auth_time < 0) {
this.sendAuthCode = true;
clearTimeout(this.authTimeTimer);
} else {
this.getAuthCode();
}
}, 1000);
},
// 發(fā)送短信
sendMsg(phoneNum) {
this.$refs.thirdForm.validateField('phone', (phoneError) => {
console.log(`${phoneError}***************************`);
if (!phoneError) {
this.auth_time = 120;
this.sendAuthCode = false;
api.sendMsg({
params: {
params: {
phone: phoneNum,
reason: 'developerReg',
},
},
}).then(() => {
this.getAuthCode();
this.$confirm('驗證碼已發(fā)送至登記手機號上，請查收。', {
confirmButtonText: '確定',
center: true,
});
}).catch((err) => {
this.sendAuthCode = true;
this.$message({
message: err.response.message,
type: 'error',
});
});
}
});
},
// 驗證登入賬號是否存在
checkDevpUserAccount(account) {
api.checkDevpUserAccount({
params: {
params: {
account,
},
},
}).then((data) => {
if (data.state === 0) {
this.checkCaptcha();
}
}).catch((err) => {
this.$message({
message: err.response.message,
type: 'error',
});
});
},
// 圖片驗證碼驗證是否正確
checkCaptcha() {
api.getCaptcha({
params: {
params: {
captchaCode: this.thirdForm.captchaCode,
},
},
}).then(() => {
this.checkSmsValidCode();
}).catch((err) => {
this.$message({
message: err.tip,
type: 'error',
});
this.refresh();
});
},
// 驗證短信驗證碼
checkSmsValidCode() {
api.verifySmsValidCode({
params: {
params: {
phone: this.thirdForm.phone,
reason: 'developerReg',
validCode: this.thirdForm.phoneValidation,
},
},
}).then((data) => {
if (data.state === 0) {
this.submit();
}
}).catch((err) => {
this.$message({
message: err.tip,
type: 'error',
});
});
},
// 上一步
previousStep() {
sessionStorage.setItem('needSecondStepCache', '1');
this.$router.push({ name: 'DeveloperSecond' });
},
// 下一步
nextStep(thirdForm) {
this.$refs[thirdForm].validate((valid) => {
if (valid) {
this.checkDevpUserAccount(this.thirdForm.account);
}
});
},
// 向后臺提交數(shù)據(jù)
submit() {
if (this.firstForm.devpType === '1') {
this.thirdForm.userName = this.firstForm.devpNameself;
}
this.secondForm.cmmiLevel = (this.secondForm.cmmiLevel === '無' ? '' : this.secondForm.cmmiLevel);
this.secondForm.isoLevel = (this.secondForm.isoLevel === '無' ? '' : this.secondForm.isoLevel);
const passwordTemp = md5(this.thirdForm.password);
api.registeredDeveloper({
params: {
data: {
devpType: this.firstForm.devpType,
devpName: this.firstForm.devpName,
devpCode: this.firstForm.devpCode,
logo: this.firstForm.logo,
companyAddress: this.firstForm.companyAddress,
companyDescrible: this.firstForm.companyDescrible,
companyBusiness: this.firstForm.companyBusiness,
identifyPositiveId: this.firstForm.identifyPositiveId,
identifyReverseId: this.firstForm.identifyReverseId,
employeeCode: this.firstForm.employeeCode,
remarks: this.firstForm.remarks,
cmmiLevel: this.secondForm.cmmiLevel,
isoLevel: this.secondForm.isoLevel,
qualificationId: this.secondForm.qualificationId,
userName: this.thirdForm.userName,
account: this.thirdForm.account,
password: passwordTemp,
email: this.thirdForm.email,
telephone: this.thirdForm.telephone,
fax: this.thirdForm.fax,
postCode: this.thirdForm.postCode,
phone: this.thirdForm.phone,
},
},
}).then(() => {
this.$router.push({
name: 'ReturnSuccessMsg',
params: {},
});
}).catch((err) => {
this.$message({
message: err.response.message,
type: 'error',
});
});
},
},
mounted() {
this.firstForm = JSON.parse(sessionStorage.getItem('firstForm')) || {};
this.secondForm = JSON.parse(sessionStorage.getItem('secondForm')) || {};
},
};
</script>
<style scoped lang="less">
.developer-container {
overflow: hidden;
.btn-wrap{
border-top: 1px solid #EBEEF6;
padding-top: 30px;
font-size: 0;
.previousStep{
padding: 10px 28px;
}
.submitButton{
padding: 10px 35px;
}
}
}
.fl {
float: left;
}
.fr {
float: right;
}
.block {
float: right;
margin-left: -5px;
margin-top: 20px;
}
.disabled {
cursor: default;
color: #bbb;
pointer-events: none;
}
.vertification-area {
height: 36px;
.vertification-code {
float: left;
height: 36px;
line-height: 36px;
width: 100px;
margin-left: 10px;
border-radius: 4px;
color: #fff;
font-size: 24px;
text-align: center;
font-weight: bolder;
cursor: pointer;
}
}
.el-icon-view{
&:hover{
cursor: pointer;
}
}
</style>
<style lang="less">
.dev-register-container{
.steps {
padding:40px 22%;
margin: 48px auto 0;
background: #F9FAFC;
border-bottom: 1px solid #EBEEF6;
@media screen and (max-width: 1660px) {
padding: 40px 16%;
}
@media screen and (max-width: 1280px) {
padding: 40px 10%;
}
.el-step__line{
top: 14px;
}
.el-step__head {
.el-step__icon{
width: 30px;
height: 30px;
font-size: 14px;
border-color: #C0CCDA;
color: #C0CCDA;
}
&.is-process{
.el-step__icon{
color:#fff;
background: #C0CCDA;
}
}
&.is-finish{
.el-step__icon{
color:#fff;
background: #20A0FF;
border-color: #20A0FF;
}
}
}
.el-step__title {
font-size: 14px;
color: #C0CCDA;
font-weight: bold;
&.is-process{
color: #475669;
}
&.is-finish{
color: #20A0FF;
}
}
}
.form-list {
margin: 30px auto 0;
max-width: 800px;
width: 75%;
}
.sendMsg{
height:36px;
vertical-align:middle;
width: 100px;
margin-left: 5px;
padding: 10px 15px;
}
}
</style>
對于表單中部分字段的校驗看如下的代碼，當(dāng)校驗不通過時phoneError返回值為校驗的提示信息，當(dāng)通過時phoneError的值為空，所以if語句中用(！phoneError）表示校驗通過，完整代碼及頁面展示圖如上。
sendMsg(phoneNum) {
this.$refs.thirdForm.validateField('phone', (phoneError) => {
if(!phoneError){
//當(dāng)校驗通過時，這里面寫邏輯代碼
}
})
};總結(jié)
到此這篇關(guān)于ElementUI表單驗證validate和validateField的使用及區(qū)別的文章就介紹到這了,更多相關(guān)ElementUI表單驗證validate和validateField內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue.js實現(xiàn)"一個文件對應(yīng)一個組件"，無需webpack等工具，按需加載組件,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
vue.js中引入vuex儲存接口數(shù)據(jù)及調(diào)用的詳細流程
這篇文章主要給大家介紹了關(guān)于在vue.js中引入vuex儲存接口數(shù)據(jù)及調(diào)用的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
這篇文章主要為大家詳細介紹了Vue.use源碼，Vue.use方法的引入，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
詳解Vue單元測試Karma+Mocha學(xué)習(xí)筆記
本篇文章主要介紹了詳解Vue單元測試Karma+Mocha學(xué)習(xí)筆記，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了Vue.js之mixins混合組件詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-09-09
這篇文章主要為大家詳細介紹了Vue實現(xiàn)日歷小插件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
雖然前端UI框架大都提供文件上傳的組件，以及很多插件可供選擇，工作中可能不需要我們手寫一個上傳組件，但是從零封裝組件對學(xué)習(xí)是很有助益的。下文為大家介紹使用Vue3+TypeScript實現(xiàn)的一個文件上傳的功能，目前只實現(xiàn)上傳等基本功能，后續(xù)會逐漸對功能進行擴展2021-05-05
這篇文章小編要與大家分享的是建立和維護大型 Vue.js 項目的 10 個最佳實踐，需要的小伙伴請和小編一起學(xué)習(xí)下面文章的具體內(nèi)容吧2021-09-09
這篇文章主要為大家介紹了Vue中使用及封裝websocket示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
vue.js實現(xiàn)格式化時間并每秒更新顯示功能示例
這篇文章主要介紹了vue.js實現(xiàn)格式化時間并每秒更新顯示功能,結(jié)合實例形式分析了vue.js時間格式化顯示與基于定時器進行實時更新的相關(guān)操作技巧,需要的朋友可以參考下2018-07-07