uniapp中的uview组件库丰富的Form 表单用法

<template>
  <view>
    <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
    <u--form
        labelPosition="left"
        :model="model1"
        :rules="rules"
        ref="uForm"
    >
      <u-form-item
          label="姓名"
          prop="userInfo.name"
          borderBottom
          ref="item1"
      >
        <u--input
            v-model="model1.userInfo.name"
            border="none"
        ></u--input>
      </u-form-item>
      <u-form-item
          label="性别"
          prop="userInfo.sex"
          borderBottom
          @click="showSex = true; hideKeyboard()"
          ref="item1"
      >
        <u--input
            v-model="model1.userInfo.sex"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择性别"
            border="none"
        ></u--input>
        <u-icon
            slot="right"
            name="arrow-right"
        ></u-icon>
      </u-form-item>
    </u--form>
    <u-action-sheet
        :show="showSex"
        :actions="actions"
        title="请选择性别"
        description="如果选择保密会报错"
        @close="showSex = false"
        @select="sexSelect"
    >
    </u-action-sheet>
  </view>
</template>
<script>
export default {
  data() {
    return {
      showSex: false,
      model1: {
        userInfo: {
          name: 'uView UI',
          sex: '',
        },
      },
      actions: [{
        name: '男',
        },
        {
          name: '女',
        },
        {
          name: '保密',
        },
      ],
      rules: {
        'userInfo.name': {
          type: 'string',
          required: true,
          message: '请填写姓名',
          trigger: ['blur', 'change']
        },
        'userInfo.sex': {
          type: 'string',
          max: 1,
          required: true,
          message: '请选择男或女',
          trigger: ['blur', 'change']
        },
      },
      radio: '',
      switchVal: false
    };
  },
  methods: {
    sexSelect(e) {
      this.model1.userInfo.sex = e.name
      this.$refs.uForm.validateField('userInfo.sex')
    },
  },
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
      this.$refs.uForm.setRules(this.rules)
    },
};
</script>

rules: {
  'userInfo.name': {
    type: 'string',
        required: true,
        message: '请填写姓名',
        trigger: ['blur', 'change']
  },
  code: {
    type: 'string',
        required: true,
        len: 4,
        message: '请填写4位验证码',
        trigger: ['blur']
  },
  'userInfo.sex': {
    type: 'string',
        max: 1,
        required: true,
        message: '请选择男或女',
        trigger: ['blur', 'change']
  },
  radiovalue1: {
    type: 'string',
        min: 1,
        max: 2,
        message: '生命是美好的，请不要放弃治疗',
        trigger: ['change']
  },
  checkboxValue1: {
    type: 'array',
        min: 2,
        required: true,
        message: '不能太宅，至少选两项',
        trigger: ['change']
  },
  intro: {
    type: 'string',
        min: 3,
        required: true,
        message: '不低于3个字',
        trigger: ['change']
  },
  hotel: {
    type: 'string',
        min: 2,
        required: true,
        message: '请选择住店时间',
        trigger: ['change']
  },
  'userInfo.birthday': {
    type: 'string',
        required: true,
        message: '请选择生日',
        trigger: ['change']
  },
},

rules: {
  // 字段名称
  mobile: [
    {
      required: true, 
      message: '请输入手机号',
      trigger: ['change','blur'],
    },
    {
      // 自定义验证函数，见上说明
      validator: (rule, value, callback) => {
        // 上面有说，返回true表示校验通过，返回false表示不通过
        // uni.$u.test.mobile()就是返回true或者false的
        return uni.$u.test.mobile(value);
      },
      message: '手机号码不正确',
      // 触发器可以同时用blur和change
      trigger: ['change','blur'],
    }
  ]
}

rules: {
  name: [
    // 必填规则
    {
      required: true,
      message: '此为必填字段',
      // blur和change事件触发检验
      trigger: ['blur', 'change'],
    },
    // 正则判断为字母或数字
    {
      pattern: /^[0-9a-zA-Z]*$/g,
      // 正则检验前先将值转为字符串
      transform(value) {
        return String(value);
      },
      message: '只能包含字母或数字'
    },
    // 6-8个字符之间的判断
    {
      min: 6,
      max: 8,
      message: '长度在6-8个字符之间'
    },
    // 自定义规则判断是否包含字母"A"
    {
      validator: (rule, value, callback) => {
        return uni.$u.test.contains(value, "A");
      },
      message: '必须包含字母"A"'
    },
    // 校验用户是否已存在
    {
      asyncValidator: (rule, value, callback) => {
        uni.$u.http.post('/xxx/xxx', {name: value}).then(res => {
          // 如果验证不通过，需要在callback()抛出new Error('错误提示信息')
          if(res.error) {
            callback(new Error('姓名重复'));
          } else {
            // 如果校验通过，也要执行callback()回调
            callback();
          }
        })
      },
      // 如果是异步校验，无需写message属性，错误的信息通过Error抛出即可
      // message: 'xxx'
    }
  ]
}

<template>
  <u--form :errorType="errorType">
    ......
  </u--form>
</template>
<script>
export default {
  data() {
    return {
      // 文字提示
      errorType: 'message',
      // 不提示
      // errorType: 'none',
      // 下划线提示，要求给form-item设置了borderBottom=true才有效
      // errorType: 'border-bottom'
    };
  }
};
</script>

<template>
  <view class="">
    <u--form :model="form" ref="uForm">
      <u-form-item label="姓名" prop="name">
        <u-input v-model="form.name" />
      </u-form-item>
    </u--form>
    <u-button @click="submit">提交</u-button>
  </view>
</template>
<script>
export default {
  data() {
    return {
      form: {
        name: '',
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入姓名',
            trigger: ['blur', 'change']
          }
        ]
      }
    };
  },
  methods: {
    submit() {
      this.$refs.uForm.validate().then(res => {
        uni.$u.toast('校验通过')
      }).catch(errors => {
        uni.$u.toast('校验失败')
      })
    }
  },
};
</script>