邓洁: 表单校验

src/views/user/index.vue

@@ -72,16 +72,16 @@
         <el-form-item label="当前站点">
           <div class="current-site">{{ currentSite }}<span v-if="showAdmin">如果需要切换站点,请返回首屏切换</span></div>
         </el-form-item>
-        <el-form-item label="输入用户名">
+        <el-form-item label="输入用户名" prop="userName">
           <el-input v-model="form.userName" placeholder="请输入用户名"/>
         </el-form-item>
-        <el-form-item label="输入密码" v-if="title==='添加用户'">
+        <el-form-item label="输入密码" v-if="title==='添加用户'" prop="password">
           <el-input type="password" show-password v-model="form.password" placeholder="请输入密码"/>
         </el-form-item>
-        <el-form-item label="输入昵称">
+        <el-form-item label="输入昵称" prop="nickName">
           <el-input v-model="form.nickName" placeholder="请输入昵称"/>
         </el-form-item>
-        <el-form-item label="输入电话号码">
+        <el-form-item label="输入电话号码" prop="phoneNumber">
           <el-input v-model="form.phoneNumber" placeholder="输入电话号码"/>
         </el-form-item>
         <el-form-item label="是否启用">
@@ -90,7 +90,7 @@
             <el-radio label="0">停用</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="选择身份">
+        <el-form-item label="选择身份" prop="roleId">
           <el-radio-group v-model="form.roleId" @change="(val) => {
             if (val >3){
                  getTunnel()
@@ -98,7 +98,7 @@
             <el-radio v-for="item in radioList" :label="item.value" :key="item.value">{{ item.label }}</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="选择隧道" v-if="form.roleId>3">
+        <el-form-item label="选择隧道" v-if="form.roleId>3" prop="tunnelList">
           <div class="user-select">
             <el-select
                 v-model="form.tunnelList"
@@ -172,20 +172,27 @@ const form = ref({
   roleId: [],
   tunnelList: [1]
 });
+const validateName = (rule, value) => {
+  const reg = /^[A-Za-z0-9]+$/;
+  return reg.test(value);
+}
 const formRules = ref({
-  userName: [{required: true, message: '请输入用户名', trigger: 'blur'}],
-  password: [{required: true, message: '请输入密码', trigger: 'blur'}]
+  userName: [
+    {required: true, message: '请输入用户名', trigger: ['blur', 'change']},
+    {validator: validateName, message: '请输入英文、数字、英文数字组合的用户名', trigger: ['blur', 'change']}
+  ],
+  password: [{required: true, message: '请输入密码', trigger: ['blur', 'change']}],
+  nickName: [{required: true, message: '请输入昵称', trigger: ['blur', 'change']}],
+  roleId: [{required: true, message: '请选择身份', trigger: ['blur', 'change']}],
+  tunnelList: [{required: true, message: '请选择隧道', trigger: ['blur', 'change']}]
 })
 const radioList = ref([])
 const tunnelList = ref([])
 const multipleTable = ref()
 onMounted(() => {
-  if (localStorage.getItem('userId') == 2) {
-    showAdmin.value = true
-  } else {
-    showAdmin.value = false
-  }
+  showAdmin.value = localStorage.getItem('userId') == 2;
 })
+
 const getTunnel = () => {
   getTunnelOption(siteId).then(res => {
     if (res.code === 1000) {
@@ -280,9 +287,9 @@ const handleCurrentChange = (val) => {
   pageInfo.pageNum = val
   getInfo()
 }
-const handleSubmit = async (formInstance) => {
+const handleSubmit = (formInstance) => {
   if (!formInstance) return;
-  formInstance.validate(async (valid) => {
+  formInstance.validate((valid) => {
     if (!valid) return;
     const data = {
       siteId: siteId,
@@ -295,7 +302,7 @@ const handleSubmit = async (formInstance) => {
       tunnelList: form.value.tunnelList
     }
     if (title.value === '添加用户') {
-      await addUser(data).then(res => {
+      addUser(data).then(res => {
         if (res.code === 1000) {
           getInfo()
           isVisited.value = false
@@ -309,7 +316,7 @@ const handleSubmit = async (formInstance) => {
         userId: form.value.userId,
         ...data
       }
-      await editUser(editData).then(res => {
+      editUser(editData).then(res => {
         if (res.code === 1000) {
           getInfo()
           isVisited.value = false
@@ -335,11 +342,13 @@ const handleSelect = async (selection, row) => {
 }
 </script>
 <style lang="scss">
+
 .user-select {
-  .el-input{
+  .el-input {
     min-height: 75px;
-    height: auto!important;
+    height: auto !important;
   }
+
   .el-select__popper {
     margin-top: -12px !important;
     background: #072247 !important;
@@ -357,7 +366,8 @@ const handleSelect = async (selection, row) => {
   .el-select-dropdown__item {
     font-size: 38px !important;
     height: 60px !important;
-    line-height:60px !important;
+    line-height: 60px !important;
+
     > span {
       color: #FFFFFF;
     }
@@ -390,6 +400,10 @@ const handleSelect = async (selection, row) => {
 }
 </style>
 <style scoped lang="scss">
+:deep(.el-form-item__error) {
+  font-size: 35px;
+}
+
 :deep(.el-input .el-input__password) {
   font-size: 60px;
 }
@@ -415,7 +429,6 @@ const handleSelect = async (selection, row) => {
 }
 
 
-
 :deep(.el-radio-group) {
   margin-top: 10px;
 }