uni-forms 表单校验梳理

发表于 分类于
本文字数： 1.8k 阅读时长 ≈ 2 分钟

参考文档

一、前置条件

uni-forms 需要绑定 model 属性，值为表单的 key/value 组成的对象。uni-form-item 需要设置 name 属性为当前字段名，字段为 String|Array 类型。

1
2
3
4
5
6
7
8
<uni-forms :modelValue="formData">
	<uni-forms-item label="姓名" name="name">
		<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
	</uni-forms-item>
	<uni-forms-item required :name="['data','hobby']" label="兴趣爱好">
		<uni-data-checkbox multiple v-model="formData.data.hobby" :localdata="hobby"/>
	</uni-forms-item>
</uni-forms>

二、rules 属性

通过 rules 属性传入约定的校验规则。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<template>
  <uni-forms ref="form" :rules="rules">
    <uni-forms-item label="姓名" name="name">
      <uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
    </uni-forms-item>
    <uni-forms-item label="昵称" name="nickname">
      <uni-easyinput type="text" v-model="formData.nickname" placeholder="请输入昵称" />
    </uni-forms-item>
  </uni-forms>
</template>

<script>
  export default {
    data() {
      return {
        rules: {
          name: {
            rules: [
              // 校验 name 不能为空
              {
                required: true,
                errorMessage: '请填写姓名',
              },
              // 对 name 字段进行长度验证
              {
                minLength: 3,
                maxLength: 5,
                errorMessage: '{label}长度在 {minLength} 到 {maxLength} 个字符',
              },
              // 自定义校验规则
              {
                validateFunction: function(rule, value, data, callback){
                  if (value === data.nickname) {
                    callback('名字与昵称不能相同')
                  }
                  return true
                }
              }
            ],
            // 当前表单域的字段中文名，可不填写
            label:'姓名',
            validateTrigger:'submit'
          }
        }
      }
    }
  }
</script>