使用vue写一个登录页面，有用户名和密码，都做一些输入校验，不符合校验规则就提示重新输入

最新推荐文章于 2024-07-12 15:14:43 发布
最新推荐文章于 2024-07-12 15:14:43 发布
阅读量809 收藏 1
点赞数
文章标签： vue.js javascript 前端 ecmascript 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_35755562/article/details/128867277
版权

好的，我来给你一些简单的步骤。

  1. 安装 Vue 和 Vue CLI。

使用以下命令安装 Vue 和 Vue CLI：

npm install -g @vue/cli
  1. 创建一个新的 Vue 项目。

使用 Vue CLI 创建一个新的 Vue 项目：

vue createmy-project
  1. 在项目中创建一个登录组件。

在项目中新建一个名为 "Login.vue" 的文件，用来作为登录组件。

  1. 在登录组件中编写 HTML 模板。

在 "Login.vue" 文件中，使用 HTML 语法编写登录表单的模板，包括输入框和按钮。

  1. 在登录组件中编写输入校验规则。

在 "Login.vue" 文件中，使用 JavaScript 编写输入校验规则，如用户名的最小长度和密码的复杂度等。

  1. 在登录组件中编写提示信息。

在 "Login.vue" 文件中，使用 JavaScript 编写用于提示用户输入错误的代码。

  1. 在登录组件中编写登录功能。

在 "Login.vue" 文件中，使用 JavaScript 编写用于发送登录请求并处理响应的代码。

  1. 在项目的主组件中引入登录组件。

在项目的主组件中，使用 "import" 命令引入 "Login.vue" 组件，并在模板中使用 "component"

Msura
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue前端验证输入_Web前端vue开发：在表单验证中输入姓名时引发的“奇案”
weixin_36403128的博客
12-29 999
近期一直再忙于vue.js的项目开发，尤其是表单功能；今晚想抽出一个小技术点来说说。比如：输入姓名的表单验证系列问题。对于姓名的验证，我们会想到几点：1、用户只能输入中文2、如果用户输入了非中文如何处理3、用户从表单外复制非中文进来如何处理4、限制输入的字数接下来我们以一个实例来说明下，如何去寻找解决方法，输入姓名的表单验证系列问题这是一个存款案例，用银行转账的时候要求把中文姓名提交给后台去，然后...
VUE实现密码验证与提示功能
10-16
在Vue.js框架中实现密码验证与提示功能是提高用户体验的重要一环，它可以帮助用户实时了解输入的密码是否符合预设的规则。在本文中，我们将探讨如何在Vue项目中创建一个组件，用于实现这一功能。 首先，我们需要...
vue判断输入的快递单号是否符合规则Demo
07-22
通过正则表达式判断快递单号是否符合规则的Demo，具体思路： 1、为快递公司select控件设置change事件，当selelct控件的值发生变化时，触发change事件，然后获取select的值保存起来（如果快递单号此时有值，直接进行选中的快递公司的格式判断） 2、然后快递单号值也写个change事件，如果快递单号发生变化，获取之前保存的快递公司select的值，判断快递单号的格式（此时必须要求用户先选择快递公司，没有就报错） 3、判断快递单号的逻辑是一个公共方法，判断的正则表达式可以自己定义，也可以从公共接口获取。
vue 简约 大气登录页“附源码”
潮黯的博客
05-27 710
vue 简约 大气登录页“附源码”
vue登录时，兜底验证与统一抛出错误
W936438835的博客
10-08 914
使用的后台框架：介绍 | vue-element-admin 一、先解决登录时用户账号或者密码出错，try catch没有错误提示(没有进入catch分支) 1、在login/index中，使用handleLogin这个验证方法 <el-button class="loginBtn" :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLog.
使用vue写一个登录页面，有用户名和密码，都做一些输入校验，不符合校验规则就提示重新输入...
weixin_42578963的博客
02-11 184
好的，我来给你一些简单的步骤。 安装 Vue 和 Vue CLI。 使用以下命令安装 Vue 和 Vue CLI： npm install -g @vue/cli
VUE常见报错提示及代码问题
ld395353765的博客
09-12 2002
Q:data functions should return an object 这个问题是 Vue 实例内,单组件的data必须返回一个对象;如下 export default { name: 'page-router-view', data () { return { tabs: [ { title:...
注册账号，并检验是否符合规则
qq_35640003的博客
03-30 150
注册账号
express+mysql+vue,从零搭建一个商城管理系统6-数据校验和登录
02-27
通常，用户提交用户名和密码后，服务器会验证这些凭据，如果匹配成功，则生成一个JWT（JSON Web Token）并返回给客户端。JWT包含了用户的标识信息，且具有过期时间，这样可以安全地进行无状态的身份验证。在"routes...
Spring Boot+Mybatis Plus+Thymeleaf实现用户登录和校验用户名是否重复功能
04-28
实现用户登录功能时，我们通常会创建一个登录表单，表单中的输入字段包括用户名和密码。使用Thymeleaf，可以在HTML模板中定义这些字段，并通过Thymeleaf的表达式语言进行数据绑定。后端Spring Boot接收这些数据，...
vue的一个简单的登录界面设计.rar
07-04
在登录界面，用户名和密码输入框的数据可以通过`v-model`指令与Vue实例的数据对象进行绑定。 3. **事件处理**：登录按钮点击时，需要触发一个方法来处理登录逻辑。这可以通过`v-on:click`或简写`@click`指令实现，...
vue中vee validate表单校验的几种基本使用
08-27
Vue 中 Vee Validate 表单校验的几种基本使用 Vee Validate 是一个流行的 JavaScript 库，用于表单校验。它提供了多种方式来实现表单校验，包括必填和长度校验、异步请求服务的校验、延迟校验等。下面将介绍 Vee ...
使用Vue进行登录和校验的操作
有时间可以指导毕业设计，可以私聊我。一个热爱编程的smallCuteMonkey，可以私信我
08-22 1676
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>登录</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1
Vue登录页添加验证码
柒七的博客
02-06 2870
登录页添加验证码 新建ValidCode组件 ​ 内容如下，直接copy即可： <template> <div class="ValidCode disabled-select" :style="`width:${width}; height:${height}`" @click="refreshCode" > <span v-for="(item, index) in codeList" ......
Vue忘记密码弹窗表单错误
Linz的博客
02-19 354
Vue项目错误记录
案例6 密码框格式提示错误信息
wlijun_0808的博客
12-10 594
案例 //密码框验证信息，当输入密码时，密码的标准不满足我们的要求，就要在后面显示提示的信息。 //案例分析： //首先判断的时间是表单是去焦点onblur //如果输入正确则提示正确的信息颜色为绿色小图标变化 //如果输入不是6到16位，那就提示密码错误的字样 <div class="register"> <input type="password"> <p class="message">请输入6-16位的密码</p&
Vue3 登录注册（登录后显示用户姓名）
july_29的博客
08-16 6062
记录在vue3学习中遇到的问题以及解决方法 登录注册其实很简单，当然，如果在一开始不会的状态下还是很难想出的。 我们可以给登录和注册按钮加v-if进行判断，当我们处于未登录的时候，我们让他显示，参数为true，此时用户的信息也绑定v-if，值和登录注册的值取反，我们可以用感叹号！来进行值的取反。当我们登录成功后，我们给把登录注册的值修改成false，这时候登录注册就不显示了，由于用户信息和登录注册取反，这时候用户信息就显示出来了，退出登录原理也和上面一致，当我们点击后，修改值来使其隐藏或显示。 关键 现在我
登录校验总结1.0
暮辰的博客
05-04 914
所谓的登录校验：指的是在服务器端接收到浏览器发送过来的请求之后，首先要对请求进行校验，先检验一下用户登录了没有，如果用户登录了，就直接执行对应的业务操作；如果用户没有登录，此时就不允许他执行相关的业务操作，直接给前端响应一个错误的结果，最终跳转到登录页面，要求他登录成功之后，再来访问对应的数据。什么是会话在日常生活中，会话就是谈话，交谈在web开发当中，会话指的是浏览器与服务器之间的一次连接在用户打开浏览器第一次访问服务器时，这个会话就建立了，直到任何一方断开连接，此时会话就结束了。
vue解决页面放大图片模糊的问题
最新发布
m0_56104994的博客
07-12 280
解决页面放大，图片模糊的问题
vue+elementui判断输入框输入是否符合电话号码的长度
06-04
您可以通过监听输入框的值，然后使用正则表达式判断输入是否符合电话号码的长度。以下是一个例子： ```html <template> <el-input v-model="phone" placeholder="请输入电话号码"></el-input> </template> <script> export default { data() { return { phone: "" }; }, watch: { phone(val) { // 匹配电话号码的正则表达式 const reg = /^1[3456789]\d{9}$/; if (reg.test(val)) { console.log("符合电话号码长度"); } else { console.log("不符合电话号码长度"); } } } }; </script> ``` 在 `watch` 中监听 `phone` 的值，然后使用正则表达式 `^1[3456789]\d{9}$` 判断输入的值是否符合电话号码的长度要求（11位数字，以1开头）。如果符合，输出“符合电话号码长度”，否则输出“不符合电话号码长度”。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值