uniapp uniform 自定义表单校验规则

Uni-app 中，可以通过在 `input` 组件上绑定 `@blur` 事件，在事件处理函数中进行校验。校验规则可以通过编写自定义方法来实现。

下面是一个示例代码，演示了如何自定义 `uni-form` 组件的校验规则。

<template>
  <view class="uni-form">
    <view class="uni-form-item">
      <view class="uni-form-label">用户名</view>
      <view class="uni-form-input">
        <input v-model="username" @blur="checkUsername" />
      </view>
      <view class="uni-form-msg">{{ usernameMsg }}</view>
    </view>
    <view class="uni-form-item">
      <view class="uni-form-label">密码</view>
      <view class="uni-form-input">
        <input type="password" v-model="password" @blur="checkPassword" />
      </view>
      <view class="uni-form-msg">{{ passwordMsg }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      usernameMsg: '',
      passwordMsg: '',
    };
  },
  methods: {
    checkUsername() {
      if (!this.username) {
        this.usernameMsg = '用户名不能为空';
      } else {
        this.usernameMsg = '';
      }
    },
    checkPassword() {
      if (!this.password) {
        this.passwordMsg = '密码不能为空';
      } else if (this.password.length < 6) {
        this.passwordMsg = '密码长度不能小于6位';
      } else {
        this.passwordMsg = '';
      }
    },
  },
};
</script>

在上面的代码中，我们定义了两个输入框，分别用于输入用户名和密码。在每个输入框上，我们都绑定了 `@blur` 事件，用于在输入框失去焦点后校验输入内容。校验规则定义在 `checkUsername` 和 `checkPassword` 方法中，根据输入内容的不同，这些方法会设置不同的提示信息，将其显示在对应的提示框中。

当用户提交表单时，我们只需要检查提示信息是否为空，如果不为空，说明输入内容有误，需要提示用户重新输入。如果所有提示信息都为空，说明输入内容符合要求，可以提交表单。