快捷導(dǎo)航

ElementUI表單驗(yàn)證validate和validateField的使用及區(qū)別

更新時(shí)間：2023年02月07日 10:44:59 作者：roouzenn

Element-UI作為前端框架,最常使用到的就是表單驗(yàn)證,下面這篇文章主要給大家介紹了關(guān)于ElementUI表單驗(yàn)證validate和validateField的使用及區(qū)別,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

yyElement - The world's most popular Vue UI framework

傳參及一些具體的直接點(diǎn)上邊官網(wǎng)連接

這里我主要說(shuō)一下實(shí)際項(xiàng)目中的使用

validate 會(huì)校驗(yàn)表單的整個(gè)屬性,只要你給這個(gè)字段設(shè)置上了rule

 this.$refs.表單名稱.validate(async (valid) => {
        if (!valid) {
          //檢驗(yàn)不通過(guò)走這里
          return;
        }
        //校驗(yàn)通過(guò)走這里
    }

validateField 有些時(shí)候我們只需要驗(yàn)證表單中的部分字段,其他字段不需要，這時(shí)候我們就需要用validateField函數(shù)了,注意,這里有幾個(gè)坑大家別踩了

首先，我們得知道，使用validateField部分校驗(yàn)數(shù)組的時(shí)候，數(shù)組有幾位，就會(huì)回調(diào)幾次。當(dāng)也就是空的時(shí)候，表示驗(yàn)證通過(guò)，回調(diào)返回為“ ”，所以就是，你校驗(yàn)幾個(gè)規(guī)則，就會(huì)返回幾個(gè)結(jié)果，如果通過(guò)就為“”（空）。

validateField跟validate的區(qū)別: 在這兩個(gè)代碼段中已經(jīng)展示的很清晰了,自己上手跑一跑邏輯就通了

 let validateFieldList = [];
      this.$refs.loginForm.validateField(
         //這里要放數(shù)組,數(shù)組中寫上要校驗(yàn)的字段
        ["userName", "password", "mobilePhone"],
        async (valid) => {
          if (!valid) {
            //校驗(yàn)通過(guò)走這里,每通過(guò)一次,會(huì)往這個(gè)數(shù)組里加一個(gè)""
            validateFieldList.push(valid);
 
            //因?yàn)槲疫@里總共校驗(yàn)了三個(gè)字段,所有最終三個(gè)字段都校驗(yàn)成功之后,數(shù)組中會(huì)有三個(gè)""
            if (
              validateFieldList.length == 3 &&
              validateFieldList.every((item) => item === "")
            ) {
              //這里寫校驗(yàn)通過(guò)的業(yè)務(wù)邏輯
            }
            //校驗(yàn)不通過(guò)走這里
            return;
          }
        }

補(bǔ)充：validateField方法對(duì)部分表單字段進(jìn)行校驗(yàn)

<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="請(qǐng)輸入管理員姓名，最多20字" ></el-input>
            </el-form-item>
 
            <el-form-item label="管理員賬號(hào)" prop="account">
                <el-input v-model.trim="thirdForm.account" placeholder="請(qǐng)輸入管理賬號(hào)，最多50字"></el-input>
            </el-form-item>
 
            <el-form-item label="登錄密碼" prop="password"  >
              <el-input id="pwd" v-model.trim="thirdForm.password" type="password" placeholder="請(qǐng)輸入長(zhǎng)度為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="請(qǐng)輸入電子郵箱，最多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="請(qǐng)輸入電話，最多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="請(qǐng)輸入傳真，最多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="請(qǐng)輸入郵編，最多10字" maxlength=10></el-input>
            </el-form-item>
 
            <el-form-item label="手機(jī)號(hào)碼" prop="phone" >
                <el-input  v-model.trim="thirdForm.phone" placeholder="請(qǐng)輸入手機(jī)號(hào)碼" maxlength=11></el-input>
            </el-form-item>
 
            <el-form-item label="圖片驗(yàn)證碼" prop="captchaCode" >
                <div class="vertification-area">
                    <el-input  v-model.trim="thirdForm.captchaCode" placeholder="請(qǐng)輸入圖片驗(yàn)證碼" 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="手機(jī)驗(yàn)證碼" prop="phoneValidation" >
                <div>
                    <el-input  v-model.trim="thirdForm.phoneValidation" placeholder="請(qǐng)輸入手機(jī)驗(yàn)證碼" style="width: calc(100% - 110px);" maxlength="6"></el-input>
                    <el-button v-show="sendAuthCode" @click="sendMsg(thirdForm.phone)" type="primary" class="sendMsg">發(fā)送驗(yàn)證碼</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: '管理平臺(tái)',
      address: 'title.png',
      sendAuthCode: true, /* 布爾值，通過(guò)v-show控制顯示‘獲取按鈕'還是‘倒計(jì)時(shí)' */
      auth_time: '120', /* 倒計(jì)時(shí) 計(jì)數(shù)器 */
      firstForm: {},
      thirdForm: {
        userName: '',
        account: '',
        password: '',
        email: '',
        telephone: '',
        fax: '',
        postCode: '',
        phone: '',
        phoneValidation: '',
        captchaCode: '',
      },
      captchaUrl: `${global.CTX}/captcha`,
      rules: {
        userName: [
          { required: true, message: '請(qǐng)輸入管理員姓名', trigger: 'blur' },
          { min: 1, max: 20, message: '管理員姓名在20字以內(nèi)', trigger: 'blur' },
 
        ],
        account: [
          { required: true, message: '請(qǐng)輸入管理員賬號(hào)', trigger: 'blur' },
          { min: 1, max: 50, message: '管理員賬號(hào)在50字以內(nèi)', trigger: 'blur' },
          { pattern: /^\S+$/, message: '賬號(hào)不允許有空格', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '請(qǐng)輸入長(zhǎng)度為10-20位包含數(shù)字、字母、特殊字符的密碼', trigger: 'blur' },
          { pattern: /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[\W_]).{10,20}$/, message: '請(qǐng)輸入長(zhǎng)度為10-20位包含數(shù)字、字母、特殊字符的密碼', trigger: 'blur' },
        ],
        postCode: [
          { max: 10, message: '郵編長(zhǎng)度10位以內(nèi)', trigger: 'blur' },
        ],
        fax: [
          { max: 50, message: '傳真長(zhǎng)度50字以內(nèi)', trigger: 'blur' },
        ],
        email: [
          { required: true, message: '請(qǐng)輸入郵箱', 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: '請(qǐng)檢查郵箱格式是否正確', trigger: 'blur' },
        ],
//最后的校驗(yàn)規(guī)則，不需要自己寫校驗(yàn)規(guī)則也可以寫成 { type: 'email', message: '請(qǐng)檢查郵箱格式是否正確', 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: '電話長(zhǎng)度在50位以內(nèi)', trigger: 'blur' },
        ],
        phone: [
          { required: true, message: '請(qǐng)輸入手機(jī)號(hào)碼', trigger: 'blur' },
          { pattern: /^((1[3,5,8][0-9])|(14[5,7])|(17[0,5,6,7,8])|(19[7]))\d{8}$/, message: '請(qǐng)檢查手機(jī)號(hào)是否正確', trigger: 'blur' },
        ],
        phoneValidation: [
          { required: true, message: '請(qǐng)輸入手機(jī)驗(yàn)證碼', trigger: 'blur' },
        ],
        captchaCode: [
          { required: true, message: '請(qǐng)輸入圖片驗(yàn)證碼', 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';
      }
    },
    // 刷新圖片驗(yàn)證碼
    refresh() {
      this.captchaUrl = `${global.CTX}/captcha?tm=${Math.random()}`;
    },
 
    // 倒計(jì)時(shí)
    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('驗(yàn)證碼已發(fā)送至登記手機(jī)號(hào)上，請(qǐng)查收。', {
              confirmButtonText: '確定',
              center: true,
            });
          }).catch((err) => {
            this.sendAuthCode = true;
            this.$message({
              message: err.response.message,
              type: 'error',
            });
          });
        }
      });
    },
 
    // 驗(yàn)證登入賬號(hào)是否存在
    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',
        });
      });
    },
 
    // 圖片驗(yàn)證碼驗(yàn)證是否正確
    checkCaptcha() {
      api.getCaptcha({
        params: {
          params: {
            captchaCode: this.thirdForm.captchaCode,
          },
        },
      }).then(() => {
        this.checkSmsValidCode();
      }).catch((err) => {
        this.$message({
          message: err.tip,
          type: 'error',
        });
        this.refresh();
      });
    },
 
    // 驗(yàn)證短信驗(yàn)證碼
    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);
        }
      });
    },
    // 向后臺(tái)提交數(shù)據(jù)
    submit() {
      if (this.firstForm.devpType === '1') {
        this.thirdForm.userName = this.firstForm.devpNameself;
      }
      this.secondForm.cmmiLevel = (this.secondForm.cmmiLevel === '無(wú)' ? '' : this.secondForm.cmmiLevel);
      this.secondForm.isoLevel = (this.secondForm.isoLevel === '無(wú)' ? '' : 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>

對(duì)于表單中部分字段的校驗(yàn)看如下的代碼，當(dāng)校驗(yàn)不通過(guò)時(shí)phoneError返回值為校驗(yàn)的提示信息，當(dāng)通過(guò)時(shí)phoneError的值為空，所以if語(yǔ)句中用(！phoneError）表示校驗(yàn)通過(guò)，完整代碼及頁(yè)面展示圖如上。

sendMsg(phoneNum) {
    this.$refs.thirdForm.validateField('phone', (phoneError) => {
        if(!phoneError){
            //當(dāng)校驗(yàn)通過(guò)時(shí)，這里面寫邏輯代碼
        }
    })
};

總結(jié)

到此這篇關(guān)于ElementUI表單驗(yàn)證validate和validateField的使用及區(qū)別的文章就介紹到這了,更多相關(guān)ElementUI表單驗(yàn)證validate和validateField內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: