邓洁: 表单校验

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-item label="站点名称">
+      <el-form :model="form" :label-position="right" :rules="formRules" ref="formInstance" label-width="190px">
+        <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([
-  // {
-  //   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 siteList = ref([])
 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;
 }