vue3 rules表单验证

表单头:rules="rules"

提交事件里增加判断

dataFormRef.value.validate((valid: boolean) => {

    if (!valid) {

      return false;

    }

}

具体的规则

const rules = ref({

    gatewayMac: [

      { required: true, message: '必填项不能为空', trigger: 'blur' }

      ,{validator:validateMacAddr,trigger:'blur'}

    ],

 

全部代码如下：

 

<template>
<el-dialog v-model="visible" :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :close-on-press-escape="false">
<el-form :model="dataForm" :rules="rules" ref="dataFormRef" @keyup.enter="dataFormSubmitHandle()" label-width="120px">
<el-form-item prop="groupCode" label="分组编码" class="w-percent-100">
<el-select v-model="dataForm.groupCode" clearable @change="groupCodeChange" placeholder="请选择">
<el-option v-for="item in groupCodeList" :key="item.id" :label="item.groupCode" :value="item.groupCode"></el-option>
</el-select>
</el-form-item>
<el-form-item label="分组名称" prop="groupName">
<el-input v-model="dataForm.groupName" placeholder="分组名称"></el-input>
</el-form-item>
<el-form-item label="网关ID" prop="gatewayId">
<el-input v-model="dataForm.gatewayId" placeholder="网关ID"></el-input>
</el-form-item>
<el-form-item label="网关MAC" prop="gatewayMac">
<el-input v-model="dataForm.gatewayMac" placeholder="网关MAC"></el-input>
</el-form-item>
<el-form-item label="设备名称" prop="deviceName">
<el-input v-model="dataForm.deviceName" placeholder="设备名称"></el-input>
</el-form-item>

</el-form>

<template v-slot:footer>
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="dataFormSubmitHandle()">确定</el-button>
</template>
</el-dialog>
</template>

<script lang="ts" setup>
import { IFunction, IObject } from "@/types/interface";
import { reactive, ref } from "vue";
import baseService from "@/service/baseService";
import { ElMessage } from "element-plus";
import MapContainer from "../../components/base/MapContainer.vue";//高德地图
const emit = defineEmits(["refreshDataList"]);

const visible = ref(false);
const dataFormRef = ref();
const projectCodeList = ref<any[]>([]);
const groupCodeList = ref<any[]>([]);
const projectNodeCodeList = ref<any[]>([]);
const dataDictList = ref<any[]>([]);

const dataForm = reactive({
groupCode: '',
groupName: '',
gatewayId: '',
gatewayMac: '',
deviceName: '',
id: [] as string[],
creator: '',
createDate: '',
deviceCode: '',
devicePosition: '',
deviceType: 1,
state: '',
deviceModel: '',
version: '',
simCard: '',
projectPosition: '',
projectCode: '',
projectName: '',
projectNode: '',
mountDeviceNum: '',
communicationType: '',
iccid: '',
signalIntensity: '',
heartbeatInterval: '',
switchState: '',
alarmState: '',
switchWorkMode: '',
voltage: '',
electric: '',
frequency: '',
leakageElectric: '',
deviceTemperature: '',
temperature: '',
powerFactor: '',
activePower: '',
activeEnergy: '',
dataModelList: [] as IObject[],
projectNodeCode:''
});

const validateMacAddr = (rule: any, value: string, callback: (e?: Error) => any): any => {
const macReg = /^([0-9a-fA-F]{2})(([/\s:-][0-9a-fA-F]{2}){5})$/;
if (value && !macReg.test(value)) {
return callback(new Error("Mac地址格式错误"));
}
callback();
};

const rules = ref({
groupName: [
{ required: true, message: '必填项不能为空', trigger: 'blur' }
],
gatewayId: [
{ required: true, message: '必填项不能为空', trigger: 'blur' }
],
gatewayMac: [
{ required: true, message: '必填项不能为空', trigger: 'blur' }
,{validator:validateMacAddr,trigger:'blur'}
],
deviceName: [
{ required: true, message: '必填项不能为空', trigger: 'blur' }
]
});

const init = (id?: string[]) => {
visible.value = true;
dataForm.id = id as string[];

// 重置表单数据
if (dataFormRef.value) {
dataFormRef.value.resetFields();
}

 

const url2 = "/iot/groupinfo/all";
getMethodsGroupInfoAllList(url2);
};

// 获取信息
const getInfo = (id: number) => {
baseService.get("/iot/deviceinfo/" + id).then((res) => {
Object.assign(dataForm, res.data);
});
};

// 表单提交
const dataFormSubmitHandle = () => {
dataFormRef.value.validate((valid: boolean) => {
if (!valid) {
return false;
}
(!dataForm.id ? baseService.post : baseService.put)("/iot/deviceinfo", dataForm).then((res) => {
ElMessage.success({
message: '成功',
duration: 500,
onClose: () => {
visible.value = false;
emit("refreshDataList");
}
});
});
});
};

defineExpose({
init
});

const getMethodsProjectInfoAllList = (url :string) => {
baseService.get(url).then((res) => {
// console.log("res.data--->",res.data);
projectCodeList.value = res.data;
});
};

const getMethodsGroupInfoAllList = (url :string) => {
baseService.get(url).then((res) => {
// console.log("getMethodsGroupInfoAllList,res.data--->",res.data);
groupCodeList.value = res.data;
});
};

const groupCodeChange = (val :string ) => {
console.log("groupCodeChange",val);
const url = "/iot/groupinfo/getGroupInfoByGroupCode/" + val;

baseService.get(url).then((res) => {

dataForm.groupName = res.data.groupName;

});

}

const projectNodeCodeChange = (val :string ) => {
console.log("projectNodeCodeChange",val);
const url = "/iot/projectnode/getProjectNodeByProjectNodeCode/" + val;

baseService.get(url).then((res) => {
console.log("res.data--->",res.data);
dataForm.projectNode = res.data.projectNodeName;
});

}

 

const getMethodsUrlSend = (url :string) => {
baseService.get(url).then((res) => {
dataDictList.value = res.data;
});
};

</script>