elementui校验手机号

在Element UI中，你可以使用表单的自定义验证规则来验证手机号。以下是一个简单的例子，展示了如何使用Element UI的表单验证功能来检查用户输入的手机号是否有效。

首先，确保你已经正确安装并导入了Element UI库。

<template>
  <el-form :model="form" :rules="rules" ref="form" label-width="120px">
    <el-form-item label="手机号" prop="phone">
      <el-input v-model="form.phone"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>
 
<script>
  export default {
    data() {
      // 自定义验证规则
      var validatePhone = (rule, value, callback) => {
        const reg = /^1[3-9]\d{9}$/;
        if (value === '') {
          callback(new Error('手机号不能为空'));
        } else if (!reg.test(value)) {
          callback(new Error('请输入有效的手机号'));
        } else {
          callback();
        }
      };
 
      return {
        form: {
          phone: ''
        },
        rules: {
          phone: [
            { required: true, trigger: 'blur', validator: validatePhone }
          ]
        }
      };
    },
    methods: {
      submitForm() {
        this.$refs.form.validate(valid => {
          if (valid) {
            alert('提交成功!');
          } else {
            console.log('验证失败');
            return false;
          }
        });
      }
    }
  };
</script>

在这个例子中，我们定义了一个正则表达式来匹配中国大陆的手机号格式。当用户尝试提交表单时，会触发表单项的验证规则。如果输入的手机号不符合规则，则会显示错误信息。