elementui表单校验——电话

Element UI是一个流行的开源UI组件库，它提供了丰富的表单验证功能。对于电话号码的校验，Element UI的`el-form`和`el-form-item`组件可以配合`el-input`和自定义验证规则轻松实现。你可以通过设置`rules`属性来配置验证规则，例如：

<el-form label-width="80px">
  <el-form-item label="手机号码" prop="phoneNumber">
    <el-input v-model="phoneNumber" placeholder="请输入电话号码"></el-input>
    <el-form-item-explain slot="tip">格式如：(010) 12345678</el-form-item-explain>
    <el-form-item-explain slot="message">{{ validatePhoneNumber(phoneNumber) ? '' : '请输入正确的电话号码' }}</el-form-item-explain>
  </el-form-item>
</el-form>

<script>
export default {
  data() {
    return {
      phoneNumber: '',
    };
  },
  methods: {
    validatePhoneNumber(phone) {
      const regex = /^(\+|0)?\d{1,3}[-.\s]?\(?\d{1,3}\)?[-.\s]?\d{1,4}[-.\s]?\d{1,4}$/;
      return regex.test(phone);
    }
  }
};
</script>

在这个例子中，我们定义了一个正则表达式来检查输入是否符合电话号码的格式，如果不符合，则在表单提交时给出错误提示。