VUE3中使用ElementUI的表单验证

以下是一个示例，展示如何在组件中使用校验规则：

<template>
    //:rules="rules" 为表单项添加校验规则
  <el-form ref="form" :model="form" :rules="rules">
      //prop="phone" 为表单项添加字段名
    <el-form-item label="手机号" prop="phone">
        //v-model="form.phone" 为表单项添加双向绑定
      <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
    </el-form-item>
    <!-- 其他表单项 -->
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

定义一个包含手机号校验规则的 rules 对象。其中，prop 属性是表单项的字段名，rules 属性是校验规则数组。

<script setup>
import { ref } from 'vue';

const form = ref({
  phone: '',
  // 其他表单项
});

const rules = {
  phone: [
      // required: true 为必填项
      // pattern: /^1[3456789]\d{9}$/ 为手机号的正则表达式
      // message: '手机号格式不正确' 为校验不通过时的提示信息
      // trigger: 'blur' 为失去焦点时触发校验
    { required: false, pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' },
    // min: 11, max: 11 为手机号长度的校验规则
    { min: 11, max: 11, message: '手机号长度为11位', trigger: 'blur'}
  ],
  // 其他表单项的校验规则
};

const submitForm = () => {
  // 校验表单
  form.value.$refs.form.validate((valid) => {
    if (valid) {
      // 表单校验通过，执行提交操作
      // ...
    }
  });
};
</script>

请确保你在表单项的组件中正确绑定了 prop 属性，并将其与校验规则对象中的属性名称相对应。这样在调用 form.validate 方法时，校验规则才会生效。
添加微信