用uniapp组件写登录注册

最新推荐文章于 2024-08-02 16:13:08 发布

原创

最新推荐文章于 2024-08-02 16:13:08 发布 · 5.7k 阅读

103 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #webview #前端

本文展示了如何使用uni-app框架创建注册和登录页面。注册页面包括用户名、昵称、密码、电话号码、性别、邮箱和身份证号字段，并应用了严格的正则表达式验证规则。登录页面则包含用户名和密码输入，同样有验证机制。页面设计简洁，提供了从注册页面跳转到登录页面和忘记密码的功能。

首先创建一个注册页面

<template>
	<view class="register">
		//<u-avatar v-show="false" :src="imgsrc"></u-avatar>
		<u-form label-position="left" :error-type="errorType" ref="uForm" :model="form">
			<u-form-item label="用户名:" label-width=135px; prop="userName">
				<u-input type="text" v-model="form.userName" placeholder="请输入用户名" />
			</u-form-item>
			<u-form-item label="昵称:" prop="nickName">
				<u-input type="text" v-model="form.nickName" placeholder="请输入昵称" />
			</u-form-item>
			<u-form-item label="密码:" prop="password">
				<u-input type="password" v-model="form.password" password="true" placeholder="请输入密码" />
			</u-form-item>
			<u-form-item label="电话号码:" label-width=135px; prop="phonenumber" maxlength="11">
				<u-input type="number" v-model="form.phonenumber" placeholder="请输入电话号码" />
			</u-form-item>
			<u-form-item>
				<u-radio-group v-model="form.sex">
					<u-radio v-for="(item,index) in list" :key="index" :name="item.sex" :disabled="item.disabled">
						{
  
  {item.value}}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="邮箱:" prop="email">
				<u-input type="email" v-model="form.email" placeholder="请输入邮箱" />
			</u-form-item>
			<u-form-item label="身份证号码:" label-width=135px; prop="idCard" placeholder="请输入身份证号码">
				<u-input type="idcard" v-model="form.idCard" />
			</u-form-item>
			<u-button @tap="register">注册</u-button>
		</u-form>
		<view class="other">
			<navigator url="/pages/login/login">已有账户,点击登入</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				errorType: ['message'],
				imgsrc: '../../static/4068DBAD4FB786E27344EFA0866DC4AF.jpg',
				form: {
					userName: '',
					nickName: '',
					password: '',
					phonenumber: '',
					email: '',
					idCard: '',
					sex: '',
					
				},
                //这里写的是一些验证规则
				rules: {
					userName: [{
							max: 6,
							message: '不能大于6',
							tr