写一个 uniapp uview框架 form多表单校验字段
在uniapp uview框架中,可以使用u-form组件来实现表单的校验。首先需要设置表单的校验规则,然后在提交表单时进行校验。
以下是一个示例代码:
<template>
<view>
<u-form :rules="rules" @submit="submitForm">
<u-input v-model="name" label="姓名" name="name"></u-input>
<u-input v-model="email" label="邮箱" name="email"></u-input>
<u-input v-model="phone" label="电话" name="phone"></u-input>
<u-button type="primary" form-type="submit">提交</u-button>
</u-form>
</view>
</template>
<script>
export default {
data() {
return {
name: '',
email: '',
phone: '',
rules: {
name: [{ required: true, message: '请输入姓名' }],
email: [
{ required: true, message: '请输入邮箱' },
{ type: 'email', message: '邮箱格式不正确' }
],
phone: [
{ required: true, message: '请输入电话号码' },
{ pattern: /^1[3-9]\d{9}$/, message: '电话号码格式不正确' }
]
}
}
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
// 表单校验成功,可以提交表单
console.log('表单校验成功')
} else {
// 表单校验失败,提示错误信息
console.log('表单校验失败')
}
})
}
}
}
</script>
在上面的代码中,规定了三个表单字段的校验规则,分别为姓名、邮箱和电话号码。其中,姓名和邮箱为必填项,而电话号码需要满足正则表达式的要求。在提交表单时,通过调用u-form组件的validate方法,可以进行表单的校验。如果校验成功,则可以提交表单,否则需要提示错误信息
原文地址: https://www.cveoy.top/t/topic/ffE0 著作权归作者所有。请勿转载和采集!