添加项目页面 表单校验

pages/Project/add.vue

@@ -1,15 +1,21 @@
 <template>
   <view class="content">
     <view class="title"> 新增项目 </view>
-    <uni-forms :modelValue="formData" label-position="left" class="form">
-      <uni-forms-item label="项目名称">
+    <uni-forms
+      :modelValue="formData"
+      label-position="left"
+      class="form"
+      ref="form"
+      :rules="rules"
+    >
+      <uni-forms-item required label="项目名称" name="project_name">
         <uni-easyinput
           type="text"
           v-model="formData.project_name"
           class="input"
         />
       </uni-forms-item>
-      <uni-forms-item label="项目类别">
+      <uni-forms-item label="项目类别" name="type" required>
         <picker
           @change="selectChangeType"
           :range="typeList"
@@ -22,7 +28,7 @@
           </view>
         </picker>
       </uni-forms-item>
-      <uni-forms-item label="流程">
+      <uni-forms-item label="流程" name="form">
         <picker disabled>
           <view class="select">
             {{
@@ -33,7 +39,9 @@
       </uni-forms-item>
       <uni-forms-item
         label="行业名称"
+        name="industry"
         v-show="!formData.type || (formData.type && formData.type.id != 7)"
+        required
       >
         <picker
           @change="selectChangeIndustry"
@@ -50,13 +58,16 @@
       </uni-forms-item>
       <uni-forms-item
         label="项目地区"
+        name="location"
         v-show="!formData.type || (formData.type && formData.type.id != 7)"
       >
         <picker> <view class="select"></view></picker>
       </uni-forms-item>
       <uni-forms-item
         label="项目简称"
+        name="name"
         v-show="!formData.type || (formData.type && formData.type.id != 7)"
+        required
       >
         <uni-easyinput
           type="text"
@@ -68,7 +79,9 @@
       </uni-forms-item>
       <uni-forms-item
         label="项目期数"
+        name="version"
         v-show="!formData.type || (formData.type && formData.type.id != 7)"
+        required
       >
         <picker @change="selectChangeVersion" :range="versionList">
           <view class="select">
@@ -78,6 +91,7 @@
       </uni-forms-item>
       <uni-forms-item
         label="项目编号"
+        name="code"
         v-show="!formData.type || (formData.type && formData.type.id != 7)"
       >
         <view>
@@ -119,6 +133,61 @@ export default {
           version: "*",
         },
       },
+      rules: {
+        project_name: {
+          rules: [
+            {
+              required: true,
+              errorMessage: "请输入项目名称",
+            },
+          ],
+        },
+        type: {
+          rules: [
+            {
+              required: true,
+              errorMessage: "请选择项目类别",
+            },
+          ],
+        },
+        industry: {
+          rules: [
+            {
+              required: this.formData?.type_id != 7,
+              errorMessage: "请选择行业",
+            },
+          ],
+        },
+        name: {
+          rules: [
+            {
+              required: this.formData?.type_id != 7,
+              errorMessage: "请填写项目简称",
+            },
+            {
+              maxLength: 3,
+              errorMessage: "项目简称不能超过3位",
+            },
+            {
+              validateFunction: function (rule, value, data, callback) {
+                if (value.match(/[^A-Za-z]/g)) {
+                  callback("项目简称只能是英文字符");
+                } else {
+                  callback();
+                }
+              },
+            },
+          ],
+        },
+        version: {
+          rules: [
+            {
+              required: this.formdata?.type_id != 7,
+              errorMessage: "请选择期数",
+            },
+          ],
+        },
+      },
       project_id: 0,
 
       typeList: [],
@@ -133,12 +202,23 @@ export default {
     this.project_id = options.project_id;
     this.init(options);
   },
+  onReady() {
+    this.$refs.form.setRules(this.rules);
+  },
   methods: {
     onHandleSubmit(value) {
-      if (value) console.log(this.formData);
-      uni.navigateTo({
-        url: "./list",
-      });
+      if (value) {
+        this.$refs.form.validate((err, formData) => {
+          if (!err) {
+            console.log("success", formData);
+            uni.navigateTo({
+              url: "./list",
+            });
+          } else {
+            console.log(err, formData);
+          }
+        });
+      } else uni.navigateTo({ url: "./list" });
     },
     async init(options) {
       let form = this.formData;
@@ -172,11 +252,15 @@ export default {
       res = await queryIndustry();
       this.industryList = res.data;
     },
+    binddata(name, value) {
+      this.$refs.form.setValue(name, value);
+    },
     selectChangeType(e) {
       let form = this.formData;
       let code = this.formData.code;
       form.type = this.typeList[e.target.value];
       code.type = form.type.code;
+      this.binddata("type", e.target.value);
       if (form.type.id == 7) {
         form.flow = this.typeList.find((item) => item.id == 1);
         form.industry = null;
@@ -192,6 +276,7 @@ export default {
     selectChangeIndustry(e) {
       this.formData.industry = this.industryList[e.target.value];
       this.formData.code.industry = this.formData.industry.code;
+      this.binddata("industry", e.target.value);
     },
     onChangeName(e) {
       let name = e.detail.value.toUpperCase();
@@ -202,6 +287,7 @@ export default {
     selectChangeVersion(e) {
       this.formData.version = e.target.value + 1;
       this.formData.code.version = this.formData.version + "";
+      this.binddata("version", e.target.value);
     },
   },
 };