文档地址 ： https://www.uviewui.com/components/form.html

文档已经很详细了，但是在使用过程中，遇见了 验证不灵敏的情况 ：

  • 用户修改了 输入内容，但是form校验并没有更新提示。
  • 添加校验方式 ，完全不能监听到输入，触发form校验。

代码如下：

  1. <u-form :model="supervisoryForm" ref="uForm">
  2.       <view class="form_item">
  3.         <u-form-item prop="handleContent" :border-bottom="false">
  4.           <u-input
  5.             v-model="supervisoryForm.handleContent"
  6.             label-width="0"
  7.             placeholder="请输入督办内容"
  8.             :border-bottom="false"
  9.             type="textarea"
  10.             maxlength="300"
  11.             height="400"
  12.             :trim="true"
  13.             :placeholder-style="{
  14.               background: '#f8f9fb',
  15.               color: '#b2b2b2',
  16.               'font-size': '28rpx',
  17.               'line-height': '40rpx',
  18.             }"
  19.             :custom-style="{
  20.               position: 'relative',
  21.               background: '#f8f9fb',
  22.               padding: '16rpx 20rpx',
  23.               height: '400rpx',
  24.               'padding-bottom': '50rpx',
  25.             }"
  26.           ></u-input>
  27.           <view class="remand_text">如需上传文件附件，请至PC端处理</view>
  28.         </u-form-item>
  29.         <u-form-item
  30.             label="督办对象"
  31.             prop="handleOrgId"
  32.             :label-width="140"
  33.             :required="true"
  34.               >
  35.             <organization-for-projectId
  36.               :projectId="curPjId"
  37.               v-model="supervisoryForm.handleOrgId"
  38.             />
  39.           </u-form-item>
  40.         <u-form-item>
  41.           <u-button type="primary" @click="validateUForm" :loading="saveLoading"
  42.             >提交</u-button>
  43.           </u-form-item>
  44.       </view>
  45.   </u-form>
  47. <script>
  48.   data() {
  49.     return {
  50.         supervisoryForm: {
  51.         handleContent: "",
  52.         handleOrgId: null,
  53.         saveLoading:false,
  54.       },
  55.       rules:{
  56.           handleContent: [
  57.           {
  58.             required: true,
  59.             message: "请输入督办内容",
  60.             trigger: ["change","blur"],
  61.           },
  62.         ],
  63.         handleOrgId: [
  64.           {
  65.             required: true,
  66.             message: "请选择督办对象",
  67.             trigger: ["change"],
  68.             type: "number",
  69.           },
  70.         ],
  71.       }
  72.     }
  73.     },
  74.   onReady() {
  75.     this.$refs.uForm.setRules(this.rules);
  76.   },
  77.   methods:{
  78.       validateUForm() {
  79.       this.$refs.uForm.validate((valid) => {
  80.         if (valid) {
  81.           // 校验通过后执行函数
  82.         }
  83.       });
  84.     },
  85.   }
  87. </script>

排查很久，到最后发现是自定义的表单组件，在rules配置项里面，没有配置 type 参数项，导致的form验证失灵 ( 文档并没有写明必须配置 ，但是不配置会出现问题)

使用From 组件需要注意到的点：

  1. form 标签 需要使用ref 绑定 【ref=”uForm”】 在校验时 使用 【this.$refs.uForm.validate】 验证
  2. 需要在 【onReady】声明周期 配置rules 【this.$refs.uForm.setRules】
  3. u-form-item标签需要添加 prop属性，并且属性值和 内部的表单v-model绑定的值一致
  4. 当表单校验不生效的时候 可以尝试给rules配置 type值
  5. @input + : value 相当于 v-model