uniapp rules动态验证
时间: 2023-08-02 07:05:47 浏览: 160
vue elementui el-form rules动态验证的实例代码详解
UniApp的rules可以用于动态验证表单数据。您可以在表单中定义rules对象,在提交表单时使用uni.verifyRules()方法进行验证。以下是一个例子:
```html
<template>
<form @submit="submitForm">
<input v-model="formData.name" placeholder="请输入姓名"/>
<input v-model="formData.age" placeholder="请输入年龄"/>
<button type="submit">提交</button>
</form>
</template>
<script>
export default {
data() {
return {
formData: {
name: '',
age: ''
},
rules: {
name: [
{ required: true, message: '请填写姓名' },
{ min: 2, max: 10, message: '姓名长度在2-10个字符之间' }
],
age: [
{ required: true, message: '请填写年龄' },
{ type: 'number', message: '年龄必须是数字' },
{ min: 0, max: 120, message: '年龄必须在0-120之间' }
]
}
}
},
methods: {
submitForm() {
const isValid = uni.verifyRules(this.rules, this.formData)
if (isValid) {
// 表单数据验证通过,可以提交数据了
console.log('表单数据验证通过')
} else {
// 表单数据验证不通过,提示错误信息
uni.showToast({ title: '请检查表单数据', icon: 'none' })
}
}
}
}
</script>
```
在上面的例子中,我们定义了一个包含姓名和年龄两个字段的表单,以及对应的规则对象。在提交表单时,我们调用uni.verifyRules()方法进行验证,如果验证通过则可以提交表单数据,否则提示错误信息。您可以根据自己的需求定义不同的规则来验证表单数据。
阅读全文