用uniapp组件写登录注册

最新推荐文章于 2024-05-06 20:40:56 发布
最新推荐文章于 2024-05-06 20:40:56 发布
阅读量5.3k 收藏 99
点赞数 9
文章标签： elementui vue.js webview 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59300059/article/details/124702226
版权

 首先创建一个注册页面

<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',
							trigger: 'change'
						},
						{
							required: true,
							message: '请输入用户名',
							trigger: ['change', 'blur']
						}
					],
					nickName: [{
						required: true,
						message: '请输入昵称',
						trigger: ['change', 'blur']
					}],
					password: [{
							pattern: /^[a-zA-Z]\w{5,17}$/,  //正则表达式
							transform(value) {
								return String(value);
							},
							message: '以字母开头，长度在6~18之间，只能包含字母、数字和下划线',
							trigger: ['change', 'blur']
						},
						{
							min: 6,
							max: 18,
							message: '密码字数6-18之间',
							trigger: 'change'
						}, {
							required: true,
							message: '请输入密码',
							trigger: ['change', 'blur']
						}
					],
					phonenumber: [{
							required: true,
							message: '请输入手机号码',
							trigger: ['change', 'blur']
						},
						{
							max: 11,
							message: '手机号码不正确',
							trigger: ['change', 'blur']
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.phonenumber(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur']
						}, {
							pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,
							transform(value) {
								return String(value);
							},
							message: '手机号码输入不正确',
							trigger: ['change', 'blur']
						}
					],
					email: [{
						required: true,
						message: '请输入邮箱',
						trigger: ['change', 'blur']
					}, {
						pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
						message: '邮箱格式不正确',
						trigger: ['change', 'blur']
					}],
					idCard: [{
							pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
							transform(value) {
								return String(value);
							},
							message: '身份证号码不正确',
							trigger: ['change', 'blur']
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.idCard(value)
							},
							message: '身份证号码输入不正确',
							trigger: ['change', 'blur']
						},
						{
							required: true,
							message: '请输入身份证号码',
							trigger: ['change', 'blur']
						}
					]
				},
                //这个是设置radio
				list: [{
						value: '男',
						disabled: false,
						sex: 0
					},
					{
						value: '女',
						disabled: false,
						sex: 1
					}

				],
				radio: '',
				img: '../../static/4068DBAD4FB786E27344EFA0866DC4AF.jpg'
			}
		},
		mounted() {
			// this.register();
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			register() {
				this.$refs.uForm.validate(valid => {
						if (valid) {
							console.log('验证通过');
						} else {
							console.log('验证失败');
						}
					}),
					uni.showLoading({
						title: '加载中..'
					})
				uni.request({
					url: 'xxxxxxxxx',  //写接口的
					data: {    
						userName: this.form.userName,
						nickName: this.form.nickName,
						password: this.form.password,
						phonenumber: this.form.phonenumber,
						sex: this.form.sex,
						email: this.form.email,
						idCard: this.form.idCard,
						avatar:this.imgsrc
					},
					method: "POST",
					success: res => {
						if (res.data.code == 200) {  //注册成功就执行下面这些代码
							uni.hideLoading();
							console.log(this.imgsrc);
							//this.login(res.data);
							uni.showToast({          //显示注册成功
								title: '注册成功',
								mask: true,
								duration: 1500
							})
							setTimeout(() => {
								uni.navigateTo({     //注册成功跳转登录页面
									url: '/pages/login/login',
								}, 3000);
							})
						} else {
							uni.showToast({ 
								title: res.data.msg,
								icon: "none"
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.other {
		margin-top: 2vh;
		color: #6f6f6f;
		text-align: center;
	}
</style>

uniapp的form表单

Form 表单 | uView - 多平台快速开发的UI框架 - uni-app UI框架uView UI，是uni-app生态最优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水icon-default.png?t=M4ADhttps://v1.uviewui.com/components/form.html 

这个是正则表达式在线生成器，可以浅看一下

正则表达式在线测试 | 菜鸟工具一、校验数字的表达式 数字：^[0-9]*$ n位的数字：^\d{n}$ 至少n位的数字：^\d{n,}$ m-n位的数字：^\d{m,n}$ 零和非零开头的数字：^(0|[1-9][0-9]*)$ 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(\.[0-9]{1,2})?$ 带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})$ 正数、负数、和小数：^(\-|\+)?\d+(\.\..icon-default.png?t=M4ADhttps://c.runoob.com/front-end/854/

先创建一个登录页面

<template>
	<view class="u-loading-circle">
		<view class="logins">
			用户登录
		</view>
		<view class="input">
			<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="password">
					<u-input type="password" v-model="form.password" password="true" placeholder="请输入密码" />
				</u-form-item>
			</u-form>
		</view>
		<view>
			<u-button @tap="login" class="button">登录</u-button>  
			<view class="other">
				<navigator url="registers">注册账号</navigator>
				<text>|</text>
				<navigator url="forget">忘记密码</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				errorType: ['message'],
				form: {
					userName: '',
					password: ''
				},
				hasLogin: false,
                //下面这个你可以看一下官网，他解释比较详细
				rules: {
					userName: [{
						required: true,
						message: '请输入用户名',
						trigger: 'change'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'change'
					}]
				}
			}
		},
		onLoad() {
			
		},
		onReady() {    //这个跟上面那个rules结合一起用的
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			login() {
				const data = {
					userName: this.form.userName,
					password: this.form.password
				};
				this.$refs.uForm.validate(valid => {   //这个是如果用户名和密码没有填写就不进入下一项操作
						if (valid) {
							console.log('验证通过');
						} else if (this.form.password == '') {
							console.log('请输入密码');
							console.log('验证失败');
						}
					}),
					uni.showLoading({     //这是加载事件，可以设置也可以不用设置
						title: '登录中...'
					})
				console.log(data);
				uni.request({
					url:xxxxxxxx,  //这里写的是登录接口
					data: {
						username: this.form.userName,
						password: this.form.password
					},
					method: 'POST',
					dataType:'json',
					success: res => {
						console.log(res.data);
						if (res.data.code == 200) {   //这里做了个判断，报200就是代表成功
							uni.hideLoading();
							uni.showToast({          
								title: '登录成功',
								mask: true,
								duration: 1500
							})
							this.hasLogin = true;
							uni.setStorageSync('token',res.data.token);   //登录成功保存token
							setTimeout(() => {          //登录成功就跳转首页
								uni.switchTab({
									url: '/pages/index/index'
								}, 2000)
							})
						} else {            
							uni.showToast({       //如果没有登录成功，就显示那里错了
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
			}
		}
	}
</script>
 
<style lang="scss" scoped>   
//这里写了一些比较简单的样式
	.u-loading-circle {
		.logins {
			font-size: 36px;
			color: #000000;
		}

		.button {
			background-color: #007AFF;
			margin-top: 2vh;
			color: #FFFFFF;
		}

		.other {
			margin-top: 2vh;
			display: flex;
			justify-content: center;

			::v-deep text {
				margin: 0 2vw;
			}
		}
	}
</style>

如果看完还对form不太了解可以看下官网

Form 表单 | uView - 多平台快速开发的UI框架 - uni-app UI框架uView UI，是uni-app生态最优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水icon-default.png?t=M4ADhttps://v1.uviewui.com/components/form.html 

被窝的哲学家
关注
  • 9
    点赞
  • 踩
  • 99
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
uni-app登录注册
yolo23505的博客
06-19 890
在 Login.vue 文件中添加登录表单，包括账号输入框、密码输入框、登录按钮等。在 js 中实现登录和注册的逻辑：获取表单提交的数据、验证用户输入是否合法、将用户数据发送到后台进行验证等。通过 addInterceptor 方法可以拦截所有的路由跳转，判断用户是否已经登录，未登录则强制跳转至登录页面。在登录状态下，可以通过缓存或者存储 cookie 等方式保存登录状态，以便用户再次打开应用时不需要重复登录。建议在需要授权登录的页面中加入登录状态的鉴权逻辑，以确保只有登录用户才能访问该页面。
uni-app登录实例的实现
03-29
使用HBuilderX开发登录实例。我的博客主页：https://blog.csdn.net/k571039838k?orderby=UpdateTime
用uniapp写一个好看的登录页面
最新发布
菜鸟教程
05-06 1388
到此这篇关于用uniapp写一个好看的登录页面的文章就介绍到这了,更多相关uniapp登录页面内容请搜索网赚博客https://www.piaodoo.com/以前的文章或继续浏览下面的相关文章希望大家以后多多支持网赚博客https://www.piaodoo.com/！茂名一技http://www.szsyby.net/茂名一技http://www.enechn.com/美文集http://www.tpyjn.cn/手游排行前十名http://www.bjkhrx.com/
表单验证 $refs----validate
weixin_44774699的博客
05-05 4559
表单验证 $refs----validate 表单验证 this.$refs[formName].validate() this.$refs[formName] 检查是否拿到了正确的需要验证的form； 1.使用此方法前检查prop一定必须要写在上面，写在里面的input上或者其他任何地方都不行（el-form-item prop属性绑定） 2.el-form rules，model属性绑定，ref标识 <el-form **ref="tbForm3"** ​
【uni-app】使用uni-app实现简单的登录注册功能
SqlloveSyn的博客
06-11 1万+
大家好，今天和大家分享一下如何在uni-app中实现简单的登录注册功能。首先你需要掌握一下知识点：1.网络请求 uni.request2.页面跳转，页面传参 uni.navigateTo3.本地缓存 uni.setStorageSync, uni.getStorageSync我们要使用到登录和注册接口，所以要知道如何进行网络请求。因为还需要进行注册，所以要进行跳转页面，跳转到注册页面所以要使用到页面跳转。
uniapp一键登录流程及代码
F2691898750的博客
04-15 5867
原理流程：通过三大运营商和uniCloud云函数，以移动网络（流量）去鉴别手机号，用户只需要点击“登录”按钮，前端开发者就可以获取到手机号，将这个手机号通过接口传递给后端，后端一般会给一个一键登录接口，后端拿到以后进行处理将登录凭证(token)给到前端，前端存储本地，完成一键登录操作；因此，对于用户来说，一键登录的必须条件为：1、手机设备打开“移动网络”，且手机号可用（可发送短信，拨打电话，充值流量，且为正规手机号码）；真机调试连接成功，但控制台不打印数据无法唤起自带弹框，一直转圈等其它问题打印代码，通过
uniapp 登录、注册页面
live9996的博客
08-30 5755
【代码】uniapp 登录、注册页面。
uniapp手写电子签名组件
04-14
使用这个uni-app电子签名组件时，首先需要在项目中引入组件，然后在需要使用签名功能的页面中进行注册。在页面的模板中添加组件标签，并可以设置相关的属性，如画布的宽高、颜色等。在组件的事件中，可以处理用户的...
纯uniapp代码开发实现登录实例
10-15
总的来说，纯uniapp代码开发登录实例涉及的主要技术点包括：uni-app的生命周期、路由管理、状态管理（Vuex）、组件化编程、网络请求（通常使用uni.request或axios）以及用户权限管理。通过合理组织这些元素，我们...
Uniapp swiper 滚动图组件
09-10
4. **引入组件**：在Uniapp项目中，引入组件通常包括以下步骤：在`main.js`文件中全局注册组件，或者在特定页面的`.vue`文件中局部注册；然后在模板中使用`<swiper>`标签，并通过属性传递参数来控制组件的行为。 5....
uniapp好看的登录页面
10-25
- 使用uniapp的样式语法（CSS预处理器如SCSS或Less）来定制登录页面的视觉效果。设置合适的颜色、字体、边距和间距，利用过渡和动画效果提升交互体验。uniapp还支持自定义主题，以便在整个应用中保持一致的设计风格...
uniapp计时器组件.zip
06-26
在实际使用过程中，开发者需要了解uniapp的基本语法和组件系统，导入并注册该计时器组件，然后在页面模板中使用，并通过数据绑定和方法调用来控制计时器的行为。对于更复杂的计时需求，例如精确到毫秒的计时、计时器...
uniapp学习-登录/注册页面搭建
dd_lcdw的博客
01-10 3419
点击登录/注册切换页面。
this.$refs.form.validate() 不执行问题的解决办法
zyf971020的博客
11-15 1万+
this.$refs.form.validate() 不执行问题的解决办法
validateField方法对部分表单字段进行校验
热门推荐
菜鸟黑一枚
12-20 7万+
<template> <div class="content-container developer-container dev-register-container"> <nav-bar :address="address" :title="title" :register="true"> </n...
uView this.$refs.uniForm.validate() 无效 输出状态为pedding
Y_I_M_I_l_u_c_k的博客
08-30 597
在submit时也无法进入this.$refs.uniForm.validate()之中，导致表单无法验证进行提交.console.log(this.$refs.uniForm.validate())一直输出pedding
写一个uniapp的登录注册页面
weixin_68443051的博客
04-15 3815
【代码】写一个uniapp的登录注册页面。
uni-app登录与注册
2301_78468207的博客
06-19 503
它可以帮助开发者轻松地编写一次代码，然后应用于多个平台，节约开发时间和精力。此外，Uni-app还提供了完整的文档和开发工具支持，使得开发者可以更加轻松地进行开发和调试。开发者可以在Vue.js的基础上，使用Uni-app提供的开发工具和文档，进行更加高效的开发和调试。此外，Uni-app还提供了一套完整的开发流程，包括构建、打包和发布等工作。Uni-app的优势在于其一次开发，多平台应用的能力。此外，Uni-app还提供了丰富的组件和模板，使得开发者可以轻松地创建各种复杂的应用程序。
this.$refs[form].validate用法
weixin_50488897的博客
04-02 1198
【代码】this.$refs[form].validate用法。
uniapp注册组件
07-28
在UniApp中注册组件有两种方式，一种是全局注册，另一种是局部注册。 全局注册是将组件注册为全局可用的，可以在应用的任何页面中直接使用。你可以在`main.js`文件中使用`Vue.component()`方法进行全局注册，示例如下： ```javascript import Vue from 'vue' import MyComponent from '@/components/MyComponent.vue' Vue.component('my-component', MyComponent) ``` 在上述代码中，我们将`MyComponent`组件注册为全局组件，并起了一个名字叫`my-component`。之后，在任何页面的模板中，你都可以直接使用`<my-component></my-component>`标签来引用这个组件。 局部注册是将组件注册在某个页面或组件中，只能在该页面或组件内使用。你可以在页面或组件的`script`部分使用`components`属性进行局部注册，示例如下： ```vue <template> <div> <my-component></my-component> </div> </template> <script> import MyComponent from '@/components/MyComponent.vue' export default { components: { 'my-component': MyComponent } } </script> ``` 在上述代码中，我们将`MyComponent`组件注册为当前页面或组件的局部组件，可以在模板中直接使用`<my-component></my-component>`来引用。 以上是UniApp中注册组件的两种方式，你可以根据实际需求选择其中一种方法来进行组件的注册。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值