elementui表单输入框部分校验--判断

Posted 2021-03-17 huchong-bk

<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‘ 为校验规则，当通过验证的时候执行操作，就可以减少请求次数