邓洁: 表单校验

src/views/site/index.vue

@@ -62,8 +62,8 @@
       <div class="siteId">
         <span>{{ title }}</span>
       </div>
-      <el-form :model="form" :label-position="right" :rules="formRules" ref="formInstance" label-width="168px">
+      <el-form :model="form" :label-position="right" :rules="formRules" ref="formInstance" label-width="190px">
-        <el-form-item label="站点名称">
+        <el-form-item label="站点名称" prop="siteName">
           <el-input v-model="form.siteName" placeholder="请输入站点名称"/>
         </el-form-item>
         <el-form-item label="是否默认">
@@ -108,35 +108,7 @@ import {ElMessage, ElMessageBox} from "element-plus";
 
 const router = useRouter()
 const userId = reactive(router.currentRoute.value.params.userId)
-const siteList = ref([
+const siteList = ref([])
-  // {
-  //   siteName: '松江站',
-  //   info:{
-  //     tunnelNum: 1,
-  //     tunnelName: '一号隧道',
-  //     constructionLength: 500,
-  //     implementationLength: 10
-  //   }
-  // },
-  // {
-  //   siteName: '松江站',
-  //   info:{
-  //     tunnelNum: 1,
-  //     tunnelName: '二号隧道',
-  //     constructionLength: 500,
-  //     implementationLength: 10
-  //   }
-  // },
-  // {
-  //   siteName: '松江站',
-  //   info:{
-  //     tunnelNum: 1,
-  //     tunnelName: '三号隧道',
-  //     constructionLength: 500,
-  //     implementationLength: 10
-  //   }
-  // }
-])
 const siteIds = ref([])
 const siteNameList = ref([])
 const info = ref({
@@ -160,7 +132,7 @@ const form = ref({
   isDefault: false
 });
 const formRules = ref({
-  siteName: [{required: true, message: '请输入站点名称', trigger: 'blur'}]
+  siteName: [{required: true, message: '请输入站点名称', trigger:['blur','change']}]
 })
 const formInstance = ref()
 const getList = () => {
@@ -235,7 +207,7 @@ const handleAdd = () => {
 }
 const handleSubmit = (instance) => {
   if (!instance) return
-  instance.validate(async (valid) => {
+  instance.validate(valid => {
     if (!valid) return
     if (title.value === '编辑站点') {
       editSite(form.value).then((res) => {
@@ -328,6 +300,9 @@ const handleCurrentChange = (val) => {
 </script>
 
 <style scoped lang="scss">
+:deep(.el-form-item__error){
+  font-size: 35px;
+}
 :deep(.el-radio-group) {
   margin-top: 10px;
 }

src/views/tunnel-manage/index.vue

@@ -67,13 +67,13 @@
         <span>{{ title }}</span>
       </div>
       <el-form :model="form" :label-position="right" label-width="188px" :rules="formRules" ref="formInstance">
-        <el-form-item label="隧道名称" required>
+        <el-form-item label="隧道名称" prop="tunnelName">
           <el-input v-model="form.tunnelName" placeholder="请输入隧道名称"/>
         </el-form-item>
-        <el-form-item label="序列号" required>
+        <el-form-item label="序列号" prop="serialNumber">
           <el-input v-model="form.serialNumber" placeholder="请输入序列号"/>
         </el-form-item>
-        <el-form-item label="隧道长度" required>
+        <el-form-item label="隧道长度" prop="totalLength">
           <el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/>
         </el-form-item>
         <el-form-item label="是否默认">
@@ -117,9 +117,17 @@ const params = router.currentRoute.value.params;
 const siteId = reactive(params.siteId)
 const userId = reactive(params.userId)
 const type = reactive(params.type)
+const validateNumber = (rule, value) => {
+  const reg = /^[A-Za-z0-9]+$/;
+  return reg.test(value);
+}
 const formRules = ref({
-  tunnelName: [{required: true, message: '请输入隧道名称', trigger: 'blur'}],
+  tunnelName: [{required: true, message: '请输入隧道名称', trigger: ['blur', 'change']}],
-  serialNumber: [{required: true, message: '请输入序列号', trigger: 'blur'}]
+  serialNumber: [
+    {required: true, message: '请输入序列号', trigger: ['blur', 'change']},
+    {validator: validateNumber, message: '请输入英文、数字、英文数字组合的用户名', trigger: ['blur', 'change']}
+  ],
+  totalLength: [{required: true, message: '请输入隧道长度', trigger: ['blur', 'change']}]
 })
 const showFirst = ref(true)
 const showOperation = ref(true)
@@ -232,16 +240,13 @@ const handleCurrentChange = (val) => {
   getList()
 }
 const handleSubmit = (instance) => {
-  // if (!instance) return
+  if (!instance) return
-  // console.log('instance',instance)
+  instance.validate(async (valid) => {
-  // instance.validate(async (valid) => {
+    if (!valid) return
-  //   console.log('valid',valid)
-  //   if (!valid) return
     const data = {
       siteId: siteId,
       ...form.value
     }
-  if (form.value.tunnelName && form.value.serialNumber && form.value.totalLength) {
     addTunnel(data).then(res => {
       if (res.code === 1000) {
         ElMessage.success('新增成功')
@@ -251,10 +256,7 @@ const handleSubmit = (instance) => {
         ElMessage.warning(res.msg)
       }
     })
-  } else {
+  })
-    ElMessage.warning('请先完善信息再新增')
-  }
-  // })
 }
 //预览隧道
 const handlePreview = (id) => {
@@ -353,6 +355,10 @@ const handleMoreDelete = () => {
 </script>
 
 <style scoped lang="scss">
+:deep(.el-form-item__error) {
+  font-size: 35px;
+}
+
 .site-name {
   position: absolute;
   left: 250px;

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'}],
+  userName: [
-  password: [{required: true, message: '请输入密码', trigger: 'blur'}]
+    {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 = localStorage.getItem('userId') == 2;
-    showAdmin.value = true
-  } else {
-    showAdmin.value = false
-  }
 })
+
 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 {
     min-height: 75px;
     height: auto !important;
   }
+
   .el-select__popper {
     margin-top: -12px !important;
     background: #072247 !important;
@@ -358,6 +367,7 @@ const handleSelect = async (selection, row) => {
     font-size: 38px !important;
     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;
 }