在开发中经常会用到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>
子组件(弹窗):
<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>
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>
验证文件:
// 验证函数
// 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' },
],
},
};