uniapp uview2 表单验证：自定义校验规则并显示红色提示

<template>
  <view class='content'>
    <u-form :model='formData' :rules='rules' @submit='submitForm'>
      <u-input v-model='formData.username' label='用户名' placeholder='请输入用户名'></u-input>
      <u-input v-model='formData.password' label='密码' placeholder='请输入密码' type='password'></u-input>
      <u-button type='primary' formType='submit'>登录</u-button>
    </u-form>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        formData: {
          username: '',
          password: ''
        },
        rules: {
          username: [
            { required: true, message: '用户名不能为空' },
            { min: 3, max: 10, message: '用户名长度为3-10个字符' }
          ],
          password: [
            { required: true, message: '密码不能为空' },
            { min: 6, max: 20, message: '密码长度为6-20个字符' }
          ]
        }
      }
    },
    methods: {
      submitForm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            // 表单校验通过，可以提交表单
            console.log('表单校验通过，可以提交表单')
          } else {
            // 表单校验不通过，给出红色提示
            this.$refs.form.showErrorMessage()
          }
        })
      }
    }
  }
</script>
<style>
  .content {
    padding: 20px;
  }
</style>
<p>在上面的代码中，我们定义了一个包含两个输入框的表单，分别是用户名和密码，同时定义了它们的校验规则。在表单中，我们使用了 u-input 组件来渲染输入框，使用了 u-button 组件来渲染提交按钮。在 u-form 组件中，我们传入了表单数据和校验规则，同时监听了表单的 submit 事件，在事件处理函数中调用了 u-form 组件的 validate 方法来进行表单校验。如果校验通过，就可以提交表单；如果校验不通过，就调用 u-form 组件的 showErrorMessage 方法来给出红色提示。</p>
<p>需要注意的是，在 u-input 组件中，我们使用了 v-model 指令来绑定表单数据，但是在 u-form 组件中，我们不能直接使用 v-model 指令来绑定表单数据，而是需要使用 :model 属性来传入表单数据。</p>
<p>另外，需要在页面的 script 标签中引入 u-form 组件和 u-input 组件：</p>
<pre><code class="language-javascript">import {uForm, uInput} from 'uview-ui'

export default {
  components: {
    uForm,
    uInput
  }
}
</code></pre>