一、基础使用

<template>
    // v-model 绑定 data 中的对象：form
    // ref 主要用在注册方法上面
    <u-form :model="form" ref="uForm">
        /* 
           label设置左侧内容，label-width设置label的宽度，
           prop很重要！是验证是否有效的重要属性。
           且避坑点是，这个prop只能写在u-form-item标签里，写在u-input里无效
        */
        <u-form-item
        label="姓名"
        label-width="80"
        prop="name"
        >
            // v-model和data中的form对象中的name做绑定，input-align可以使input输入框的字体居右
            <u-input v-model="form.name" input-align="right" placeholder="请输入姓名" />
        </u-form-item>
        <u-form-item
        label="手机号"
        label-width="80"
        prop="phone"
        >
            <u-input v-model="form.name" input-align="right" placeholder="请输入姓名" />
        </u-form-item>
        <!-- 提交按钮 -->
        <u-button
        :custom-style="submitBtnStyle"
        @click="submit"
        >
            提交
        </u-button>
    </u-form>
</template>

<script>
    export default {
        data() {
            return {
                form: {
                    name: 'thiStefan',
                    phone: '188',
                },
                // 提交按钮样式
                submitBtnStyle: {
                    margin: "30rpx 0rpx 0rpx",
                    color: "#ffffff",
                    fontWeight: "550",
                    letterSpacing: "10rpx",
                    backgroundColor: "#00b8b4",
                },
                /* 
                    rules规则是一个对象形式，rules对象下每一个prop绑定的规则是数组形式， 
                    这个数组里，可以有多个对象，每个对象都可以设置不同的规则。
                */
                rules: {
                    name:[
                        {
                            // 必填项
                            required: true,
                            // 提示内容（会出现在u-form-item内的底部）
                            message: "姓名不能为空",
                            // 触发方式（可选多种）
                            trigger:["change","blur"]
                        }
                    ],
                    phone: [
                          {
                            required: true,
                            message: "请输入手机号",
                            trigger: ["blur"],
                          },
                          {
                            /*
                             u-form提供的可直接调用的js验证，
                             具体有哪些可以观看官方文档，这里就不在赘述了。
                            */
                            validator: (rule, value, callback) => {
                                return this.$u.test.mobile(value);
                            },
                            message: "手机号格式不正确",
                            trigger: ["blur"],
                          },
                    ],
                }
            }
        },
        /* 
          重要步骤，必须要通过u-form标签定义的ref名来设置验证。
          setRules就是这个ref上面挂载的设置验证的方法。
          可以console.log打出来看看这个ref到底包含了些什么。
        */
        onReady() {
            this.$refs.uForm.setRules(this.rules);
            console.log(this.$refs.uForm);
        },
        methods() {
            // 提交表单
            submit() {
              this.$refs.uForm.validate((valid) => {
                  if (valid) {
                      console.log("验证通过");
                      this.saveForm();    // 这里调用你保存数据的接口
                      return;
                  } else {
                      console.log("验证失败");
                      return;
                  }
              });
            },
        },
    }
</script>

二、picker组件的小坑

在用户点击submit提交按钮，走过uView rules的验证之后，且失败后，失败项再次填写后，这个未填提示依然会出现在那里。

方法：

1、通过判断picker中的view绑定的值，是否为空，决定是否显隐message未填提醒

当time不为空的时候，也就是用户选了时间的时候，通过picker的change事件再拿picker的dom，遍历dom的children，设置未填提示的dom的style为none。

<template>
    <view class="demo">
      <u-form :model="form" ref="uForm">
        <u-form-item
            label="发热时间"
            label-width="160"
            prop="time"
            class="uFormItem-time"
          >
            <picker
              mode="date"
              @change="timeChange"
              :start="startDate"
              :end="endDate"
            >
              <view class="chooseDate">
                {{ form.time || "请选择时间" }}
              </view>
            </picker>
        </u-form-item>
      </u-form>
    </view>
</template>

<script>
export default {
  data() {
    return: {
        form: {
          time: "",
        },
        rules: {
            time: [
                {
                   required: true,
                   message: "时间不能为空"
                   trigger: ["blur", "change"]
                }
            ]
        }
    }
  },
  onReady(){
    this.$refs.uForm.setRules(this.rules);
    console.log(this.$refs.uForm);
  },
  methods: {
    timeChange(e) {
      this.form.time = e.detail.value;
      console.log("this.form.time：" + this.form.time);
      if (this.form.time != "") {
        let dom = document.getElementsByClassName("uFormItem-time")[0];
        let child = dom.children;
        child.forEach((item) => {
          if (item.className == "u-form-item__message") {
            item.style.display = "none";
          }
        });
      }
    },
  },
};
</script>

2、使用v-model双向绑定picker下面的view

<picker
mode="date"
@change="timeChange"
:start="startDate"
:end="endDate"
>
    <view class="chooseDate" v-model="form.time">
        {{ form.time || "请选择时间" }}
    </view>
</picker>