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" }],

 

　　　　....

}}