邓洁: 表单校验

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'}],
-  serialNumber: [{required: true, message: '请输入序列号', trigger: 'blur'}]
+  tunnelName: [{required: true, message: '请输入隧道名称', trigger: ['blur', 'change']}],
+  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)
@@ -193,7 +201,7 @@ const pageInfo = reactive({
   pageSize: 12
 });
 const total = ref(10);
-onMounted(()=>{
+onMounted(() => {
   showOperation.value = localStorage.getItem('roleKey') !== 'tunnel_admin';
 })
 const handleGoSiteOrIndex = () => {
@@ -232,16 +240,13 @@ const handleCurrentChange = (val) => {
   getList()
 }
 const handleSubmit = (instance) => {
-  // if (!instance) return
-  // console.log('instance',instance)
-  // instance.validate(async (valid) => {
-  //   console.log('valid',valid)
-  //   if (!valid) return
-  const data = {
-    siteId: siteId,
-    ...form.value
-  }
-  if (form.value.tunnelName && form.value.serialNumber && form.value.totalLength) {
+  if (!instance) return
+  instance.validate(async (valid) => {
+    if (!valid) return
+    const data = {
+      siteId: siteId,
+      ...form.value
+    }
     addTunnel(data).then(res => {
       if (res.code === 1000) {
         ElMessage.success('新增成功')
@@ -251,16 +256,13 @@ const handleSubmit = (instance) => {
         ElMessage.warning(res.msg)
       }
     })
-  } else {
-    ElMessage.warning('请先完善信息再新增')
-  }
-  // })
+  })
 }
 //预览隧道
-const handlePreview=(id)=>{
+const handlePreview = (id) => {
   console.log('预览')
-  if(id){
-    router.push('/'+id)
+  if (id) {
+    router.push('/' + id)
   }
 }
 const handleGoToEditTunnel = (tunnelId) => {
@@ -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;