vue3中结合element常用表单自定义正则校验

在Vue 3中，结合Element UI常用表单进行自定义正则验证的方法如下：

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

import { ElForm, ElFormItem, ElInput } from 'element-plus';

然后，在你的组件中定义一个自定义验证规则，使用Form组件的rules属性，并在规则中使用正则表达式。

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>
 
<script>
import { ElMessage } from 'element-plus';
import { ref } from 'vue';
 
export default {
  setup() {
    const form = ref({
      username: '',
    });
 
    const validateUsername = (rule, value, callback) => {
      const regex = /^[a-zA-Z0-9_-]{4,16}$/; // 用户名正则，4到16个字符，可包含字母、数字、下划线、连字符
      if (!regex.test(value)) {
        callback(new Error('请输入正确的用户名'));
      } else {
        callback();
      }
    };
 
    const rules = {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { validator: validateUsername, trigger: 'blur' },
      ],
    };
 
    const submitForm = () => {
      form.value.username = form.value.username.trim(); // 去除用户名输入的前后空格
      this.$refs.form.validate((valid) => {
        if (valid) {
          ElMessage.success('提交成功');
        } else {
          ElMessage.error('表单验证失败');
          return false;
        }
      });
    };
 
    return {
      form,
      rules,
      submitForm,
    };
  },
};
</script>

在这个例子中，我们定义了一个validateUsername的验证规则，它使用正则表达式来检查用户名是否符合规定的格式（4到16个字符，可包含字母、数字、下划线、连字符）。在rules对象中，我们将这个自定义规则应用到username字段上。当表单提交时，会调用submitForm方法，该方法会触发表单的验证，如果验证通过，则提交表单；如果验证失败，则显示错误信息。