Vue3elementui中实现一个input校验电话号码和座机号码

在Vue3中，可以使用Element-Plus组件库中的`el-input`组件，并使用`rules`属性自定义校验规则。

下面是一个例子，展示如何校验电话号码和座机号码：

<template>
  <div>
    <el-input v-model="telephone" placeholder="请输入电话号码" :rules="telephoneRules"></el-input>
    <el-input v-model="landline" placeholder="请输入座机号码" :rules="landlineRules"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      telephone: '',
      landline: '',
      telephoneRules: [
        { required: true, message: '电话号码不能为空', trigger: 'blur' },
        {
          validator: (rule, value, callback) => {
            const reg = /^1[3456789]\d{9}$/;
            if (reg.test(value)) {
              callback();
            } else {
              callback(new Error('电话号码格式错误'));
            }
          },
          trigger: 'blur',
        },
      ],
      landlineRules: [
        { required: true, message: '座机号码不能为空', trigger: 'blur' },
        {
          validator: (rule, value, callback) => {
            const reg = /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/;
            if (reg.test(value)) {
              callback();
            } else {
              callback(new Error('座机号码格式错误'));
            }
          },
          trigger: 'blur',
        },
      ],
    };
  },
};
</script>

在上述代码中，我们定义了两个输入框，分别用`telephone`和`landline`绑定数据。为了进行校验，我们在`el-input`组件上添加了`rules`属性，并分别定义了`telephoneRules`和`landlineRules`数组，用于保存校验规则。其中，每个规则对象中包含了`required`属性表示该项必填，`message`属性表示校验失败时的提示信息，以及`validator`属性表示校验函数。

在校验函数中，我们使用了正则表达式来判断输入的电话号码和座机号码是否符合要求。如果符合要求，就调用`callback()`函数表示校验成功；否则，就调用`callback(new Error('错误信息'))`函数表示校验失败，并传入相应的提示信息。

这样，就可以实现在Vue3中使用Element-Plus组件库中的`el-input`组件，校验电话号码和座机号码的功能了。