系统权限添加账户和角色的表单验证

src/views/ums/admin/index.vue

@@ -124,8 +124,8 @@
       :visible.sync="dialogVisible"
       width="40%"
     >
-      <el-form :model="admin" ref="adminForm" label-width="150px" size="small">
+      <el-form :model="admin" ref="adminForm" :rules="rules" label-width="150px" size="small">
-        <el-form-item label="帐号：">
+        <el-form-item label="帐号：" prop="username">
           <el-input v-model="admin.username" style="width: 250px"></el-input>
         </el-form-item>
         <el-form-item label="姓名：">
@@ -134,7 +134,7 @@
         <el-form-item label="邮箱：">
           <el-input v-model="admin.email" style="width: 250px"></el-input>
         </el-form-item>
-        <el-form-item label="密码：">
+        <el-form-item label="密码：" prop="password">
           <el-input
             v-model="admin.password"
             type="password"
@@ -158,7 +158,7 @@
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false" size="small">取 消</el-button>
-        <el-button type="primary" @click="handleDialogConfirm()" size="small"
+        <el-button type="primary" @click="submitForm('adminForm')" size="small"
           >确 定</el-button
         >
       </span>
@@ -234,7 +234,11 @@ export default {
       allocDialogVisible: false,
       allocRoleIds: [],
       allRoleList: [],
-      allocAdminId: null
+      allocAdminId: null,
+      rules: {
+        username: [{ required: true, message: '请输入帐号', trigger: 'blur' }],
+        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+      }
     };
   },
   created() {
@@ -311,6 +315,13 @@ export default {
       this.isEdit = true;
       this.admin = Object.assign({}, row);
     },
+    submitForm(formName){
+      this.$refs[formName].validate(valid=>{
+        if(valid){
+          this.handleDialogConfirm()
+        }
+      })
+    },
     handleDialogConfirm() {
       this.$confirm('是否要确认?', '提示', {
         confirmButtonText: '确定',
@@ -339,6 +350,10 @@ export default {
       });
     },
     handleAllocDialogConfirm() {
+      if(!this.allocRoleIds.length) return this.$message({
+        type: 'warning',
+        message: '请至少选择一个角色!'
+      });
       this.$confirm('是否要确认?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',

src/views/ums/role/index.vue

@@ -163,8 +163,8 @@
       :visible.sync="dialogVisible"
       width="40%"
     >
-      <el-form :model="role" ref="roleForm" label-width="150px" size="small">
+      <el-form :model="role" ref="roleForm" :rules="rules" label-width="150px" size="small">
-        <el-form-item label="角色名称：">
+        <el-form-item label="角色名称：" prop="name">
           <el-input v-model="role.name" style="width: 250px"></el-input>
         </el-form-item>
         <el-form-item label="描述：">
@@ -184,7 +184,7 @@
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false" size="small">取 消</el-button>
-        <el-button type="primary" @click="handleDialogConfirm()" size="small"
+        <el-button type="primary" @click="submitForm('roleForm')" size="small"
           >确 定</el-button
         >
       </span>
@@ -223,7 +223,10 @@ export default {
       listLoading: false,
       dialogVisible: false,
       role: Object.assign({}, defaultRole),
-      isEdit: false
+      isEdit: false,
+      rules: {
+        name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
+      }
     };
   },
   created() {
@@ -306,6 +309,13 @@ export default {
       this.isEdit = true;
       this.role = Object.assign({}, row);
     },
+    submitForm(formName){
+      this.$refs[formName].validate(valid=>{
+        if(valid){
+          this.handleDialogConfirm()
+        }
+      })
+    },
     handleDialogConfirm() {
       this.$confirm('是否要确认?', '提示', {
         confirmButtonText: '确定',