[uni-app] uni-app注册页面编写代码

<template>
        <view>
                <uni-notice-bar show-icon scrollable :text="notice" />
        </view>
        <view class="reg-view">
                <uni-forms ref="userFormRef" :model="userForm" :label-width="80" :rules="rules">
                        <uni-forms-item label="昵称" required name="nickname">
                                <uni-easyinput v-model="userForm.nickname" placeholder="请输入昵称" />
                        </uni-forms-item>
                        <uni-forms-item label="用户名" required name="username">
                                <uni-easyinput v-model="userForm.username" placeholder="请输入用户名" />
                        </uni-forms-item>
                        <uni-forms-item label="密码" required name="password">
                                <uni-easyinput type="password" v-model="userForm.password" placeholder="请输入密码" />
                        </uni-forms-item>
                        <uni-forms-item label="确认密码" required name="password2">
                                <uni-easyinput type="password" v-model="userForm.password2" placeholder="请再次确认密码" />
                        </uni-forms-item>
                        <uni-forms-item label="性别" required name="sex">
                                <uni-data-checkbox v-model="userForm.sex" :localdata="sexs" />
                        </uni-forms-item>
                        <uni-forms-item label="手机号码" required name="phone">
                                <uni-easyinput v-model="userForm.phone" placeholder="请输入手机号码" />
                        </uni-forms-item>
                        <uni-forms-item label="验证码" required name="captcha">
                                <view style="display: flex;justify-content: space-between;">
                                        <view class="" style="width: 50%;">
                                                <uni-easyinput v-model="userForm.captcha" placeholder="请输入验证码" />
                                        </view>
                                        <view class="" style="width: 48%;">
                                                <button type="default" style="width: 99%;height: 35px;line-height: 35px;"
                                                        size="mini">获取验证码</button>
                                        </view>
                                </view>

                        </uni-forms-item>
                </uni-forms>
                <button type="primary" class="round-button" @tap="reg">注册</button>
        </view>
</template>

<script setup>
        import {
                ref
        } from 'vue';
        const userFormRef = ref()
        const reg = () => {
                userFormRef.value.validate().then(res => {
                        console.log('验证通过：', res);
                }).catch(err => {
                        console.log('表单错误信息：', err);
                })
        }
        const userForm = ref({})

        const sexs = ref([{
                text: '男',
                value: 0
        }, {
                text: '女',
                value: 1
        }, {
                text: '保密',
                value: 2
        }])
        const notice = ref("明天放假了")

        // 表单验证规则
        const rules = {
                // 对name字段进行必填验证
                nickname: {
                        rules: [{
                                        required: true,
                                        errorMessage: '请输入昵称',
                                },
                                {
                                        minLength: 2,
                                        maxLength: 50,
                                        errorMessage: '昵称长度在 {minLength} 到 {maxLength} 个字符',
                                }
                        ]
                },
                username: {
                        rules: [{
                                        required: true,
                                        errorMessage: '请输入用户名',
                                },
                                {
                                        minLength: 3,
                                        maxLength: 20,
                                        errorMessage: '用户名长度在 {minLength} 到 {maxLength} 个字符',
                                }
                        ]
                },
                password: {
                        rules: [{
                                        required: true,
                                        errorMessage: '请输入密码',
                                },
                                {
                                        minLength: 6,
                                        maxLength: 20,
                                        errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
                                }
                        ]
                },
                password2: {
                        rules: [{
                                        required: true,
                                        errorMessage: '请再次确认密码',
                                },
                                {
                                        minLength: 6,
                                        maxLength: 20,
                                        errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
                                }
                        ]
                },
                sex: {
                        rules: [{
                                required: true,
                                errorMessage: '请选择性别',
                        }]
                },
                phone: {
                        rules: [{
                                        required: true,
                                        errorMessage: '请输入手机号码',
                                },
                                {
                                        minLength: 11,
                                        maxLength: 11,
                                        errorMessage: '手机号码长度为11个字符',
                                }
                        ]
                },
                captcha: {
                        rules: [{
                                        required: true,
                                        errorMessage: '请输入验证码',
                                },
                                {
                                        minLength: 6,
                                        maxLength: 6,
                                        errorMessage: '验证码长度为6个字符',
                                }
                        ]
                },
        }
</script>

<style lang="scss">
        .reg-view {
                padding: 20px;
        }
</style>
复制代码