Vue手機號郵箱驗證

直接上代碼

        <el-form-item label=" " prop="phone" :rules="checkPhone">
                      <el-input
                        v-model="modelForm.phone"
                        placeholder="請輸入手機號"
                      >
                        <template slot="prepend">手機號</template>
                      </el-input>
                    </el-form-item>    

 

 

        <el-form-item label=" " prop="email" :rules="checkEmail">
                      <el-input
                        v-model="modelForm.email"
                        placeholder="請輸入郵箱"
                      >
                        <template slot="prepend">郵箱</template>
                      </el-input>
                    </el-form-item>    

 

 

 data() {
    var checkOnePhone = (rule, value, callback) => {
      if (value && value != "") {
        if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(value)) {
          callback(new Error("請輸入正確的手機號"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    var checkEmail = (rule, value, callback) => {
      if (value && value != "") {
        if (
          !/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(
            value
          )
        ) {
          callback(new Error("請輸入正確的郵箱"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    return {...
　　　　　　　　

checkPhone: [

        { required: true, validator: checkOnePhone, trigger: "blur" }

      ],

      checkEmail: [{ required: true, validator: checkEmail, trigger: "blur" }],

 

　　　　....

}}