uview form自定义组件如何做表单验证

uview form组件提供了一些表单验证的方法，可以在组件上设置验证规则。

1. 设置验证规则

在form组件上设置rules属性，rules属性是一个数组，数组中每个对象表示一个表单项的验证规则。例如：

<template>
  <u-form :rules="rules">
    <u-form-item label="姓名" prop="name">
      <u-input v-model="form.name"></u-input>
    </u-form-item>
    <u-form-item label="年龄" prop="age">
      <u-input v-model="form.age"></u-input>
    </u-form-item>
  </u-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        age: ''
      },
      rules: [
        {
          prop: 'name',
          required: true,
          message: '请输入姓名'
        },
        {
          prop: 'age',
          required: true,
          message: '请输入年龄'
        }
      ]
    }
  }
}
</script>

上面代码中，设置了两个表单项的验证规则，分别是必填项验证。

2. 触发验证

在form组件上设置ref属性，可以通过ref属性获取form组件实例，然后调用实例的validate方法触发验证。

<template>
  <u-form :rules="rules" ref="form">
    <u-form-item label="姓名" prop="name">
      <u-input v-model="form.name"></u-input>
    </u-form-item>
    <u-form-item label="年龄" prop="age">
      <u-input v-model="form.age"></u-input>
    </u-form-item>
    <u-button type="primary" @click="submit">提交</u-button>
  </u-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        age: ''
      },
      rules: [
        {
          prop: 'name',
          required: true,
          message: '请输入姓名'
        },
        {
          prop: 'age',
          required: true,
          message: '请输入年龄'
        }
      ]
    }
  },
  methods: {
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单验证通过，执行提交操作
        } else {
          // 表单验证未通过，提示错误信息
        }
      })
    }
  }
}
</script>

上面代码中，点击“提交”按钮时，调用submit方法，通过this.$refs.form.validate方法触发表单验证，验证通过后执行提交操作，验证未通过则提示错误信息。

3. 定制验证规则

除了设置默认的验证规则，也可以在表单项上设置自定义的验证规则。

<template>
  <u-form :rules="rules" ref="form">
    <u-form-item label="姓名" prop="name">
      <u-input v-model="form.name"></u-input>
    </u-form-item>
    <u-form-item label="年龄" prop="age">
      <u-input v-model="form.age"></u-input>
    </u-form-item>
    <u-button type="primary" @click="submit">提交</u-button>
  </u-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        age: ''
      },
      rules: [
        {
          prop: 'name',
          validator: (rule, value, callback) => {
            if (!value || value.length < 2) {
              callback(new Error('姓名长度不能少于2个字符'))
            } else {
              callback()
            }
          }
        },
        {
          prop: 'age',
          required: true,
          message: '请输入年龄'
        }
      ]
    }
  },
  methods: {
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单验证通过，执行提交操作
        } else {
          // 表单验证未通过，提示错误信息
        }
      })
    }
  }
}
</script>

上面代码中，自定义了姓名表单项的验证规则，如果输入的姓名长度少于2个字符，会提示“姓名长度不能少于2个字符”的错误信息。自定义的验证规则需要在validator属性中设置，validator属性是一个函数，函数接收3个参数：验证规则对象、表单项的值、回调函数。当验证规则不符合时，调用回调函数并传入错误信息，否则不传入任何参数。