el-form表单验证（初级）vue3 + element plus_vue3el-form如何验证整体表单是否为空

在开发中经常会用到form表单验证，我在开发中用到最多的就是elementUI plus中的表单验证，经常用到所以写一篇文章总结一下：

父组件：

<div>
   <OTADialog
        :dialog-visible="dialogVisible"
        @close-dialog="handleClose"
    >
    </OTADialog>
</div>
<script lang="ts" setup>
const dialogVisible = ref(false);
// 子组件传递过来的值，这样接收，
const handleClose = () => {
    getListData();
    dialogVisible.value = false;
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

子组件(弹窗)：

<template>
    <el-dialog
        :model-value="dialogVisible"
        title="模块注册"
        width="500px"
        center
        :before-close="handleClose"
    >
        <el-form
            ref="formVal"
            :rules="formItemRulesConfig.rules"
            :inline="true"
            :model="formData"
            class="OTA-dialog-form"
        >
            <el-form-item prop="module_name" label="模块：" class="OTA-dialog-form-item">
                <el-input v-model.trim="formData.module_name" placeholder="请输入模块"></el-input>
            </el-form-item>
            <el-form-item prop="locale_name" label="名称：" class="OTA-dialog-form-item">
                <el-input v-model.trim="formData.locale_name" placeholder="请输入模块名称"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button
                    type="primary"
                    @click="onSubmit(formVal)"
                >注册</el-button>
                <el-button @click="handleClose">取消</el-button>
            </span>
        </template>
    </el-dialog>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

typeScript部分：

<script lang="ts" setup>
import { ref, reactive, defineEmits, defineProps, toRefs } from 'vue';
import type { FormInstance } from 'element-plus';
import { ElMessage } from 'element-plus';
// 引入验证文件，通过ref绑定到<el-form>中
import { formItemRulesConfig } from '../config';

interface adrnDialogProps {
    dialogVisible: boolean
}

interface formDataModel {
    module_name: string
    locale_name: string
}
// 声明一下form中绑定的ref="formVal"
const formVal = ref<FormInstance>();
// 接受父组件参数
const props = withDefaults(defineProps<adrnDialogProps>(), {
    dialogVisible: false,
});
// 父往子传值
const emits = defineEmits(['close-dialog']);
// 取出要用的变量
const { dialogVisible } = toRefs(props);
// form表单格式
const formData = reactive<formDataModel>({
    module_name: '',
    locale_name: '',
});

const handleClose = () => {
 	// 在此触发往父组件传值
    emits('close-dialog');
    formData.module_name = '';
    formData.locale_name = '';
};
const onSubmit = (formEl:FormInstance | undefind) => {
	// vue3中form表单中绑定的ref需要当作点击事件的参数传递过来
	// 绑定ref中的validate()函数是用来验证表单的
    formEl.validate(v => {
        if (v) {
             //这个参数是表单验证后的结果，boolean值，
             //只有表单中的内容全部符合之后还会走到这里
            }).catch(e => { throw e; });
        }
    });
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

验证文件：

// 验证函数
// validator对应的函数，有三个参数：rules, value, callback；必传。
const LocaleNameValidator = (rules:any, value:string, callback:any) => {
    const reg = /[\u4e00-\u9fa5]+$/;
    if (!(reg.test(value))) {
        return callback(Error('请填写中文'));
    }
    return callback();
};
const ModuleNameValidator = (rules:any, value:string, callback:any) => {
    const reg = /^[a-zA-Z_]+$/;
    if (!(reg.test(value))) {
        return callback(Error('请填写英文与_'));
    }
    return callback();
};
export const formItemRulesConfig = {
    rules: {
        module_name: [
            { required: true, message: '此项为必填', trigger: 'blur' },
            // 需写到另一个对象中等待事件触发再执行
            { validator: ModuleNameValidator, trigger: 'change' },
        ],
        locale_name: [
            { required: true, message: '此项为必填', trigger: 'blur' },
            { validator: LocaleNameValidator, trigger: 'change' },
        ],
    },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29