uniapp 表单验证

在UniApp中，可以使用uni-forms和uni-forms-item来进行表单验证。在uni-forms-item上使用rules属性可以定义单个表单域的校验规则。 可以使用以下示例代码来实现表单验证:

<template>
  <view>
    <uni-forms ref="form" :modelValue="formData" validate-trigger="bind">
      <uni-forms-item name="age" label="年龄">
        <!-- uni-easyinput 的校验时机是数据发生变化，即触发 input 时 -->
        <uni-easyinput v-model="formData.age" type="text" placeholder="请输入年龄" />
      </uni-forms-item>
      <uni-forms-item ref="input" name="email" label="邮箱">
        <!-- input 的校验时机 -->
        <input v-model="formData.email" @blur="(e) => $refs.input.onFieldChange($event.detail.value)" />
      </uni-forms-item>
      <button class="button" @click="submit">校验表单</button>
    </uni-forms>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        formData: {
          age: '',
          email: ''
        }
      };
    },
    methods: {
      submit() {
        this.$refs.form.validate((err, formData) => {
          if (!err) {
            console.log('表单校验成功', formData);
          }
        });
      }
    }
  };
</script>

在这个例子中，我们使用了uni-forms和uni-forms-item来创建表单验证。通过在uni-forms-item上使用rules属性来定义单个表单域的校验规则。当点击"校验表单"按钮时，可以调用this.$refs.form.validate方法来进行表单校验，并传入一个回调函数来处理校验结果。如果校验成功，会在控制台输出表单数据。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [uniapp之表单校验](https://blog.csdn.net/weixin_44634613/article/details/129876563)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]