uniapp 表单验证
时间: 2023-08-26 20:04:44 浏览: 118
表单的验证
在UniApp中,可以使用uni-forms和uni-forms-item来进行表单验证。在uni-forms-item上使用rules属性可以定义单个表单域的校验规则。 可以使用以下示例代码来实现表单验证:
```html
<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 ]
阅读全文