uni-app:表单的验证(hbuilderx 3.7.3)

一，官方的文档地址:

https://uniapp.dcloud.net.cn/component/uniui/uni-forms.html

说明：刘宏缔的架构森林是一个专注架构的博客，

网站：https://blog.imgtouch.com
原文: https://blog.imgtouch.com/index.php/2023/06/05/uniapp-biao-dan-de-yan-zheng-hbuilderx-3-7-3/

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，js代码：

<template>
    <view style="padding-left: 30rpx;padding-right: 30rpx;">
        <uni-forms ref="form" :modelValue="formData" :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="email">
                <uni-easyinput type="text" v-model="formData.email" placeholder="请输入用户邮箱"></uni-easyinput>
            </uni-forms-item>
            <uni-forms-item label="密码" name="password">
                <uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码"></uni-easyinput>
            </uni-forms-item>
        </uni-forms>
        <button @click="submit">Submit</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                // 表单数据
                formData: {
                    name: '',
                    email: '',
                    password: '',
                },
                rules: {
                    // 对name字段进行必填验证
                    name: {
                        rules: [{
                                required: true,
                                errorMessage: '请输入姓名',
                            },
                            {
                                minLength: 3,
                                maxLength: 5,
                                errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
                            }
                        ]
                    },
                    // 对password字段进行必填验证
                    password: {
                        rules: [
                           {
                                required: true,
                                errorMessage: '请输入密码',
                            },{
                            minLength: 6,
                            maxLength: 20,
                            errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
                        }]
                    },
                    
                    // 对email字段进行必填验证
                    email: {
                        rules: [
                            {
                                required: true,
                                errorMessage: '请输入邮箱',
                            },
                            {
                                format: 'email',
                                 errorMessage: '请输入正确的邮箱地址',
                            }]
                    },
                }
            }
        },
        methods: {
          submit() {
               this.$refs.form.validate().then(res=>{
                  console.log('表单数据信息：', res);
                  alert('验证成功');
               }).catch(err =>{
                  console.log('表单错误信息：', err);
                  alert('验证失败');
               })
          }
        }
    }
</script>

<style>

</style>

三，测试效果

四,查看hbuilderx的版本: