用uniapp组件写登录注册

首先创建一个注册页面

<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']}]},//这个是设置radiolist: [{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框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水https://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+(\.\..https://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);   //登录成功保存tokensetTimeout(() => {          //登录成功就跳转首页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不太了解可以看下官网

用uniapp组件写登录注册相关推荐

登录注册页面的示例代码
下面是使用Vue3和element-plus写登录注册页面的示例代码: 首先,在main.js文件中引入Vue和element-plus组件库: import { createApp } from ' ...
django的登录注册系统
摘要 django框架本身自带有登录注册,也可以自己写登录注册,下面将介绍这这2种方式实登录注册一.自己写登录注册登出 1.注册regist 注册采用的是form表单,提交到数据库,在登录的时候,查 ...
SpringCloud一代组件+nginx实现简单的登录注册
SpringCloud一代组件+Nginx实现简单的登录注册 1.要求 2.实现步骤 1. 首先将项目骨架创建出来 2.然后将每个功能对应的子项目创建出来 3.导入对应的数据库和配置全局配置 4.配置 ...
在线问诊、找科室、找医生、查疾病、图文问诊、电话急诊、健康咨询、问诊平台、咨询平台、问诊服务、语音问诊、开药问诊、看病平台、在线医疗、健康平台、登录注册、信息架构图、全局说明、组件规范、需求清单、
在线问诊.找科室.找医生.查疾病.图文问诊.电话急诊.健康咨询.问诊平台.咨询平台.问诊服务.语音问诊.开药问诊.看病平台.在线医疗.健康平台.登录注册.信息架构图.全局说明.组件规范.需求清单. A ...
Django写一个登录注册---001创建项目以及设计数据库
Djanog开发小项目实践,众所周知,一个产品往往需要登录注册这些功能,所以我这里实现一下登录注册的开发. 使用pycharm(专业版)创建一个django项目,不是专业版看不到创建django的字样 ...
连接数据库，写了一个登录注册界面
//首先将连接数据库的语句抽出,作为一个工具类,使用的时候直接可以进行调用 package com.kd.clqx.util;import java.sql.Connection; import ja ...
用php和mysql写一个注册登录页面
前端0基础,草草看了一天的HTML和php的相关知识,写了个大致功能实现的可以实现注册登录的页面.下面就是代码了: <!DOCTYPE html> <html> <hea ...
uni-app 微信小程序登录/注册功能
用户分为两类:没有注册的用户,已经注册的用户如何检测?首先需要触发用户点击,这里使用button按钮 user.vue <button @click="getuserinfo()&q ...
uniapp实现微信小程序登录注册功能
利用uniapp的uni.login()函数实现登录功能uni.login(OBJECT) | uni-app官网 <script>// 用户登录获取用户信息接口import {login ...

用uniapp组件写登录注册

用uniapp组件写登录注册相关推荐

最新文章

热门文章