elementPlus＜script setup＞中正则校验手机号和密码

在 Element Plus 中，可以使用 <el-form> 组件和它的相关组件（如 <el-form-item> 和 <el-input>）来创建一个表单，并使用 Vue 3 的 <script setup> 语法来编写组件逻辑。

<template>  
  <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">  
    <el-form-item label="手机号" prop="phone">  
      <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>  
    </el-form-item>  
    <el-form-item label="密码" prop="password">  
      <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>  
    </el-form-item>  
    <el-form-item>  
      <el-button type="primary" @click="submitForm('form')">提交</el-button>  
    </el-form-item>  
  </el-form>  
</template>  
  
<script setup>  
import { reactive, ref } from 'vue';  
import { ElMessage } from 'element-plus';  
  
const form = reactive({  
  phone: '',  
  password: '',  
});  
  
const formRef = ref(null);  
  
const rules = reactive({  
  phone: [  
    { required: true, message: '请输入手机号', trigger: 'blur' },  
    {  
      pattern: /^1[3456789]\d{9}$/,  
      message: '请输入正确的手机号格式',  
      trigger: 'blur',  
    },  
  ],  
  password: [  
    { required: true, message: '请输入密码', trigger: 'blur' },  
    { min: 6, max: 16, message: '密码长度在 6 到 16 个字符', trigger: 'blur' },  
  ],  
});  
  
const submitForm = (formName) => {  
  formRef.value.validate((valid) => {  
    if (valid) {  
      alert('提交成功');  
      // 这里可以添加提交表单数据的逻辑  
    } else {  
      console.log('验证失败');  
      return false;  
    }  
  });  
};  
</script>

在这个示例中：

• form 是一个响应式对象，它包含了表单中的数据（手机号和密码）。
• formRef 是一个引用（ref），它指向了 <el-form> 组件的实例，用于在方法中访问表单的验证功能。
• rules 是一个响应式对象，它定义了表单项的验证规则。对于手机号，我们使用了正则表达式 /^1[3456789]\d{9}$/ 来确保它符合中国大陆的手机号码格式。对于密码，我们设置了最小和最大长度限制。
• submitForm 方法是当点击提交按钮时调用的方法。它使用 formRef.value.validate 来触发表单的验证。如果验证通过（valid 为 true），则可以执行表单提交的逻辑；如果验证失败，则可以在控制台中看到验证失败的信息。