elementui form表单验证

项目官网加了个需求要做一个类似于登录的那种表单验证，首先明确里面有姓名，手机号，发送验证码以及所在地。

话不多说上代码

/*
*templete代码
*/
  <el-form class="apply-form first-form" style="font-size: .3rem;" :model="formData" :rules="rule" ref="myForm" size="mini">
      <el-form-item label="姓名" prop="visitorName">
          <el-input v-model="formData.visitorName" placeholder="请输入姓名" autocomplete></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phoneNum">
          <el-input v-model="formData.phoneNum" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="formNum">
          <el-input v-model="formData.formNum" placeholder="请输入验证码">
			  <el-button slot="append" :disabled = "disabled" @click="getTest" style="font-size: .3rem;">{{innerHtml}}</el-button>
		  </el-input>
      </el-form-item>
      <el-form-item label="所在地" prop="region">
         <el-input v-model="formData.region" placeholder="请输入地区"></el-input>
      </el-form-item>
      <el-button style="width: 6rem; height: 1.2rem; background: #e70012;border: none;margin-top: .5rem;font-size: .45rem;" type="primary" round @click="submitForm('myForm')">立即申请成为分销商</el-button>
  </el-form>

/*
*script代码
*/
import axios from "axios";
  export default{
    data() {
      return {
        formData:{
          visitorName: '',//姓名
          phoneNum:'',//手机号
          formNum:'',//验证码
          region:''//地址
        },
        innerHtml:'获取验证码',
	disabled:false,//是否禁用按钮
        //定义验证规则
        rule:{
          visitorName: [
               { required: true, message: '请输入姓名', trigger: 'blur' },
               { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
               {
                 required: true,
                 pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
                 message: '姓名不支持特殊字符',
                 trigger: 'blur'
               }
             ],
          phoneNum: [
            { required: true, message: '手机号不能为空', trigger: 'blur' },
            { min : 11, message : '请输入十一位手机号', trigger: 'blur'},
            {
              required: true,
              pattern: /^1[3|4|5|6|7|8][0-9]{9}$/,
              message: '手机号格式不正确',
              trigger: 'blur'
            },
          ],
          formNum:[
            { required: true, message: '验证码不能为空', trigger: 'blur' },
            { min : 4, max :6, message : '验证码错误', trigger: 'blur'},
          ],
          region:[
            { required: true, message: '请输入地区', trigger: 'blur' }
          ]
        }
      };
    },
    mounted() {
      let that = this;
      //调用接口
      //因为获取验证码需要用到一个参数key，所以页面挂载完成之后首先要拿到key；
      axios.get("https://****/****/**")
      .then(res=>{
        that.keys = res.data.data.key;
      })
      .catch(err=>{
        console.log(err)
      })
    },
    methods: {
		//获取验证码
		getTest(){
		  let param = new URLSearchParams
		  param.append("phone",this.formData.phoneNum);//手机号
		  param.append("key",this.keys);//拿到的key
		  param.append("code",'');
       axios.post('https://***/***/***',param)
		  .then(res=>{
		    let status = res.data.status;
                    //通过接口status太判断状态
		    if(status == 200){
		      this.$message({
		        dangerouslyUseHTMLString: true,
		        message: '<p>验证码已发送</p>',
		        offset:300,//提示信息的偏移量
		        type:'success'
		      })
		    }else{
		      this.$message({
		        dangerouslyUseHTMLString: true,
		        message: '<p>验证码发送失败</p>',
		        offset:300,
		        type:'error'
		      })
		    }
                    //点击获取验证码，禁用按钮，六十秒的倒计时
		    let time = 60;
		    let timer = setInterval(()=>{
		      if(time == 0){
		        clearInterval(timer);
		        this.innerHtml = "获取验证码";
		        this.disabled = false;
		      }else{
		        this.disabled = true;
		        this.innerHtml = time + '秒后再试';
		        time--;
		      }
		    },1000)
		  })
		  .catch(err=>{
		     console.log(err)
		  })
		},
      submitForm(myForm){
        let that = this;
        //提交
        that.$refs[myForm].validate((valid) => {
          if (valid) {
             let param = new URLSearchParams
             param.append("phone",that.formData.phoneNum);
             param.append("key",that.keys);
             param.append("code",that.formData.formNum);
             param.append("address",that.formData.region)
             param.append("name",that.formData.visitorName)
             axios.post('https://***/****/****',param)
             .then(res=>{
               let status = res.data.status
               if(status == 200){
                 that.$message({
                   dangerouslyUseHTMLString: true,
                   message: '<p>已提交申请，请耐心等待</p>',
                   offset:300,
                   type:'success'
                 });
               }else{
                 that.$message({
                   dangerouslyUseHTMLString: true,
                   message: '<p>提交失败,请审查表单信息</p>',
                   offset:300,
                   type: 'error'
                 });
               }
             })
             .catch(err=>{
               console.log(err)
             })
          } else {
            that.$message({
              dangerouslyUseHTMLString: true,
              message: '<p>提交失败,请审查表单信息</p>',
              offset:300,
              type: 'error'
            });
            return false;
          }
        });
      }
    }
  }