表单校验

src/views/permissions/permission.vue

@@ -499,7 +499,7 @@ const permissionEdit = async function () {
         market: permissionEditObj.value.market,//地区
         postiton: permissionEditObj.value.postiton,//职位
         roleId: permissionEditObj.value.roleId,//角色id
-        machineId: permissionEditObj.value.machineId,//机器码
+        machineId: permissionEditObj.value.machineIds[0],//机器码
         machineIds: permissionEditObj.value.machineIds[1],//机器码
         password: permissionEditObj.value.password,//
         remark: permissionEditObj.value.remark//备注
@@ -579,6 +579,15 @@ const delRoleConfirm = async function () {
 }
 const handleAddRole = async function () {
   try {
+   await new Promise((resolve, reject) => {
+      Ref.value.validate((valid) => {
+        if (valid) {
+          resolve(); // 验证通过，继续执行后续代码
+        } else {
+          reject(new Error('请检查并完善表单信息')); // 验证失败，抛出错误
+        }
+      });
+    });
     const res = await API({
 
 
@@ -723,6 +732,20 @@ onMounted(async function () {
   await getRoleList()
   await getAdminData()
 })
+
+ const Rolerules = reactive({
+      roleName: [
+        { required: true, message: '请输入角色名称', trigger: 'blur' },
+        { min: 2, max: 20, message: '角色名称长度应在2-20个字符之间', trigger: 'blur' }
+      ],
+      market: [
+        { required: true, message: '请选择所属地区', trigger: 'change' }
+      ],
+      grade: [
+        { required: true, message: '请输入优先级', trigger: 'blur' },
+        { pattern: /^[1-9]\d{0,2}$/, message: '优先级应为1-999的数字', trigger: 'blur' }
+      ]
+    });
 </script>
 
 <template>
@@ -1030,7 +1053,7 @@ onMounted(async function () {
   <!-- 新增角色 -->
   <el-dialog v-model="permissionAddVisible" title="新增角色" width="800px" :close-on-click-modal="false">
     <template #footer>
-      <el-form ref="Ref" :model="addRole" label-width="auto" style="max-width: 600px; align-items: center">
+      <el-form ref="Ref" :rules="Rolerules" :model="addRole" label-width="auto" style="max-width: 600px; align-items: center">
         <el-form-item prop="roleName" label="角色名称:" required>
           <el-input v-model="addRole.roleName" placeholder="请输入用户名" style="width: 220px" />
         </el-form-item>