feat: ElementUI的form组件使用rules时动态计算并传入组件实例

src/router/modules/demo.ts

@@ -142,6 +142,10 @@ const titleArr = [
         key: 'resizeElementDialog',
         title: '动态调整element弹窗大小',
     },
+    {
+        key: 'computedRules',
+        title: 'ElementUI的form组件使用rules时动态计算并传入组件实例',
+    },
 ];
 
 // @/views/demo/**/*.vue

src/views/demo/computedRules/config.js

@@ -0,0 +1,57 @@
+export const checkIdNumber = (context) => {
+    const { form } = context;
+    return (rule, value, callback) => {
+        if (!form.idType) {
+            return callback(new Error('请选择证件类型'));
+        }
+        if (form.idType === '身份证') {
+            if (!/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|21|22|23|24|25|26|27|28)\d{3}[0-9Xx]$/i.test(value)) {
+                callback(new Error('身份证格式不正确'));
+            }
+        } else if (form.idType === '护照') {
+            if (!/^[1-9]\d{7}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|21|22|23|24|25|26|27|28)\d{3}[0-9Xx]$/i.test(value)) {
+                callback(new Error('护照格式不正确'));
+            }
+        }
+    };
+};
+
+export const getRules = (context) => {
+    console.log(context, '传递过来的context内容');
+    return {
+        name: [
+            {
+                required: true,
+                message: '请输入名称',
+                trigger: 'blur',
+            },
+        ],
+        age: [
+            {
+                required: true,
+                message: '请输入年龄',
+                trigger: 'blur',
+            },
+        ],
+        idType: [
+            {
+                required: true,
+                message: '请选择证件类型',
+                trigger: 'change',
+            },
+        ],
+        // 这里演示证件号码校验，必须依赖证件类型的值，比如证件类型是身份证，校验一种格式，是护照，校验另一种格式，等等
+        idNumber: [
+            {
+                required: true,
+                message: '请输入证件号码',
+                trigger: 'blur',
+            },
+            {
+                required: true,
+                validator: checkIdNumber(context),
+                trigger: 'blur',
+            },
+        ],
+    };
+};

src/views/demo/computedRules/index.vue

@@ -0,0 +1,138 @@
+<template>
+    <div class="p-5 space-y-5 !bg-gray-100">
+        <el-card header="ElementUI的form组件使用rules时动态计算并传入组件实例">
+            <!-- validate-on-rule-change需要设置为false，否则会导致表单每次页面加载后都会直接触发表单校验 -->
+            <el-form
+                ref="formRef"
+                :rules="rules"
+                :model="form"
+                label-width="120px"
+                :validate-on-rule-change="false"
+            >
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item
+                            label="姓名"
+                            prop="name"
+                        >
+                            <el-input
+                                placeholder="请输入姓名"
+                                v-model="form.name"
+                            />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item
+                            label="年龄"
+                            prop="age"
+                        >
+                            <el-input
+                                placeholder="请输入年龄"
+                                v-model="form.age"
+                            />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item
+                            label="证件类型"
+                            prop="idType"
+                        >
+                            <el-select
+                                v-model="form.idType"
+                                placeholder="请选择"
+                                clearable
+                            >
+                                <el-option
+                                    label="身份证"
+                                    value="身份证"
+                                ></el-option>
+                                <el-option
+                                    label="护照"
+                                    value="护照"
+                                ></el-option>
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item
+                            label="证件号码"
+                            prop="idNumber"
+                        >
+                            <el-input
+                                placeholder="请输入证件号码"
+                                v-model="form.idNumber"
+                            />
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+
+                <el-button
+                    type="primary"
+                    @click="submitForm"
+                    >提交</el-button
+                >
+            </el-form>
+        </el-card>
+    </div>
+</template>
+
+<!-- setup写法，不会传递this，但是可以传递任何你想传递的参数，比如表单实例等 -->
+<!-- <script setup>
+import { ref, computed } from 'vue';
+import { getRules } from './config.js';
+cpnst formRef = ref(null);
+const form = ref({
+    username: '',
+    password: '',
+    gender: '',
+    hobbies: [],
+    city: '',
+    birthday: '',
+    desc: '',
+});
+
+const rules = computed(() => {
+    return getRules(form.value);
+});
+</script> -->
+
+<!-- options写法，可以传递this，同样可以传递任何你想传递的参数 -->
+<script>
+import { getRules } from './config.js';
+
+export default {
+    data() {
+        return {
+            form: {
+                username: '',
+                password: '',
+                gender: '',
+                hobbies: [],
+                city: '',
+                birthday: '',
+                desc: '',
+            },
+        };
+    },
+    computed: {
+        rules() {
+            // 这里就将整个this传递过去了
+            return getRules(this);
+        },
+    },
+    methods: {
+        submitForm() {
+            this.$refs.formRef.validate((valid) => {
+                if (valid) {
+                    console.log('submit!');
+                } else {
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped></style>