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>
复制代码

下面是带异步校验规则的案例代码：

<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} 个字符',
                                },
                                {
                                        validateFunction: (rule, value, data, callback) => {
                                                        // 异步需要返回 Promise 对象
                                                        return new Promise((resolve, reject) => {
                                                                if(value == 'admin'){
                                                                        reject(new Error('非法的用户名'))
                                                                }
                                                                resolve()
                                                        })
                                                }
                                        }
                        ]
                },
                password: {
                        rules: [{
                                        required: true,
                                        errorMessage: '请输入密码',
                                },
                                {
                                        minLength: 6,
                                        maxLength: 20,
                                        errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
                                }
                        ]
                },
                password2: {
                        rules: [{
                                        required: true,
                                        errorMessage: '请再次确认密码',
                                },
                                {
                                        minLength: 6,
                                        maxLength: 20,
                                        errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
                                },{
                                                validateFunction:function(rule,value,data,callback){
                                                        // data 包含表单所有数据
                                                        if (value != data.password) {
                                                                callback('两次密码输入不一致')
                                                        }
                                                        return true
                                                }
                                        }
                        ]
                },
                sex: {
                        rules: [{
                                required: true,
                                errorMessage: '请选择性别',
                        }]
                },
                phone: {
                        rules: [{
                                        required: true,
                                        errorMessage: '请输入手机号码',
                                },
                                {
                                        minLength: 11,
                                        maxLength: 11,
                                        errorMessage: '手机号码长度为11个字符',
                                },
                                {
                                                validateFunction:function(rule,value,data,callback){
                                                 // 中国手机号码正则：11位，以13-19开头（含最新号段）
                                                        const phoneReg = /^1[3-9]\d{9}$/;
                                                        if (!phoneReg.test(value)) {
                                                          callback('手机号码格式不正确，需以13-19开头的11位数字');
                                                          return;
                                                        }
                                                }
                                        }
                        ]
                },
                captcha: {
                        rules: [{
                                        required: true,
                                        errorMessage: '请输入验证码',
                                },
                                {
                                        minLength: 6,
                                        maxLength: 6,
                                        errorMessage: '验证码长度为6个字符',
                                },
                                {
                                                validateFunction: (rule, value, data, callback) => {
                                                        // 异步需要返回 Promise 对象
                                                                return new Promise((resolve, reject) => {
                                                                        if(value == '888888'){
                                                                                reject(new Error('无效验证码'))
                                                                        }
                                                                resolve()
                                                        
                                                        })
                                                }
                                        }
                        ]
                },
        }
</script>

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