vue3结合elementplus使用js实现电话号码和邮箱的校验

在Vue3结合Element Plus使用JS实现电话号码和邮箱的校验可以通过以下步骤：

1. 安装Element Plus

在终端中运行以下命令安装Element Plus：

npm install element-plus --save

2. 引入Element Plus

在你的Vue组件中，引入Element Plus的必要组件：

<template>
  <div>
    <el-input v-model="phone" placeholder="请输入手机号"></el-input>
    <el-button type="primary" @click="checkPhone">校验手机号码</el-button>
    
    <el-input v-model="email" placeholder="请输入邮箱"></el-input>
    <el-button type="primary" @click="checkEmail">校验邮箱</el-button>
  </div>
</template>

<script>
import { reactive } from 'vue';
import { ElInput, ElButton } from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

export default {
  components: {
    ElInput,
    ElButton,
  },
  setup() {
    const state = reactive({
      phone: '',
      email: '',
    });

    const checkPhone = () => {
      const phoneReg = /^[1][3-9][0-9]{9}$/;
      if (!phoneReg.test(state.phone)) {
        alert('请输入正确的手机号码');
      } else {
        alert('手机号码正确');
      }
    };

    const checkEmail = () => {
      const emailReg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
      if (!emailReg.test(state.email)) {
        alert('请输入正确的邮箱地址');
      } else {
        alert('邮箱地址正确');
      }
    };

    return {
      ...state,
      checkPhone,
      checkEmail,
    };
  },
};
</script>

3. 在模板中，使用Element Plus提供的ElInput和ElButton组件来分别接收用户输入的电话号码和邮箱地址，并且使用v-model指令来绑定到state.phone和state.email属性上。

4. 在checkPhone和checkEmail函数中，定义好需要校验的正则表达式，并且使用test方法来检查用户输入是否符合格式要求。如果不符合，弹出错误提示，否则提示正确。

通过以上步骤，就可以在Vue3结合Element Plus使用JS实现电话号码和邮箱的校验了。