elementui表單輸入框部分校驗--判斷

<template>
  <div>
    <div class="binding_main_nav">
      <div class="binding_main_nav_div">
        <div class="binding_main_nav_div_selection"></div>
        <span>綁定郵箱</span>
      </div>
      <div class="binding_main_nav_div" @click="bindingphonefn">
        <div class="binding_main_nav_div_noselection"></div>
        <span>綁定手機</span>
      </div>
      <div class="binding_main_nav_div" @click="bindingpasswordfn">
        <div class="binding_main_nav_div_noselection"></div>
        <span>修改密碼</span>
      </div>
    </div>
    <div class="binding_main_body">
      <div class="binding_main_body_msg">
        <span>點擊“獲取驗證碼”接收驗證碼，並完成驗證</span>
      </div>
      <div class="binding_main_body_form">
        <el-form
          class="bindingeamil-form"
          :rules="bindingeamilmsg"
          :model="bindingemail"
          ref="bindingemail"
        >
          <el-form-item prop="bindingemail">
            <span class="bindingeamilImg">
              <img src="@/assets/img/binding/email.png" />
            </span>
            <el-input
              placeholder="請輸入郵箱號"
              type="text"
              tabindex="1"
              v-model="bindingemail.email"
              show-word-limit
              maxlength="20"
              ref="email"
            />
          </el-form-item>

          <el-form-item class="bindingemailverifica">
            <span class="bindingeamilImg">
              <img src="@/assets/img/login/loginyanzhengma.png" />
            </span>
            <el-input
              ref="verifica"
              placeholder="請輸入驗證碼"
              v-model="bindingemail.verifica"
              type="text"
              maxlength="6"
              onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
              tabindex="2"
            />
          </el-form-item>
          <el-button
            v-show="see"
            class="bindingeamil_form_btn"
            type="primary"
            @click="settime"
          >{{content}}</el-button>
          <el-button v-show="!see" class="bindingeamil_form_btn" type="primary">{{content}}</el-button>
        </el-form>
        <el-button type="primary" class="bindingeamilverificabtn">確定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import storage from "@/config/storage.js";
import { validEmail, validPhone } from "@/components/login/validate";
import config from "@/config";
export default {
  data() {
    var checkBindingEmail = (rule, value, callback) => {
      if (this.bindingemail.email == "" || !this.bindingemail.email.trim()) {
        callback(new Error("郵箱不能為空"));
      }
      if (!validEmail(this.bindingemail.email)) {
        callback(new Error("請輸入正確的格式"));
      } else {
        callback();
      }
    };
    return {
      content: "獲取驗證碼",
      see: true,
      totalTime: 60,
      bindingemail: {
        email: "",
        verifica: ""
      },
      bindingeamilmsg: {
        bindingemail: [
          { required: true, validator: checkBindingEmail, trigger: "blur" }
        ]
      },
      bindingEmailVal: ""
    };
  },
  mounted() {
    this.bindingEmailVal = storage.get("loginInputVal");
  },
  methods: {
    bindingphonefn() {
      this.$router.push("/bindingmodifica/phone");
    },
    bindingpasswordfn() {
      this.$router.push("/bindingmodifica/newpassword");
    },
    settime(formName) {
      if (validEmail(this.bindingEmailVal)) {
        this.$message.error({ message: "該賬號是郵箱登錄，不能繼續綁定郵箱" });
      }else{
        //進行輸入框判斷部分校驗
        this.$refs.bindingemail.validateField('bindingemail',(valid) => {
         
          if (valid) {
            return false
          } else {
            this.see = false;
          this.$axios
            .get(
              config.KEY.URL_RESGIST +
                "/binding/EmailCode?" +
                "emailNumber=" +
                this.bindingemail.email
            )
            .then(res => {
              console.log(res);
              if(res.data.status == 500){
                this.$message.error({ message: "該郵箱已經在平台注冊"});
                setTimeout(() =>{
                  this.bindingemail.email = ''
                },1000)
              }else if(res.data.status == 200){
                var auth_timetimer = setInterval(() => {
                this.totalTime--;
                this.content = this.totalTime + "s后重新發送";
                  if (this.totalTime < 0) {
                      this.totalTime = 60;
                      this.see = true;
                      clearInterval(auth_timetimer);
                      this.content = "重新發送驗證碼";
                  }
                }, 1000);
              }
            })
            .catch(err => {
              this.$message({ message: "服務器錯誤" });
            });
          }
        });


          
      }
    }
  }
};
</script>

<style>
</style>

 

 

最主要的代碼：

this.$refs.bindingemail.validateField('bindingemail',(valid) => {
         
          if (valid) {
            return false
          } else {
　　　　　　　　//執行的操作
　　　　　　}
}
//bindingemail為這個表單的總的對象（大數組也可以）,后面的 'bindingemail' 為校驗規則，當通過驗證的時候執行操作，就可以減少請求次數

還有一種騷操作

在上傳組件外面套一層 <el-form-item ref= 'xxx'>用xxx定位到該組件，

然后調用 在on-success鈎子中調用this.$refs.xxx.clearValidate(); 清除驗證信息