待办清单项目11：验证登录用户名和密码的合法性

5/8/2025 228 阅读

创建reftest测试项目

1.在Vue3Project文件夹中按住Shift键，单击鼠标右键，选择【通过Code打开】

2.在软件中，点击【终端】菜单里面的【新建终端】

3.点击+号旁边的向下的箭头，然后点击Command Prompt创建cmd窗口

4.接下来创建一个新的vue3项目，首先在cmd窗口中输入 npm create vue@latest回车，然后输入y，再设置项目名称为reftest，选择要包含的功能只需要选中Router，回车完成创建。

5.接下来在命令窗口中依次运行下面的三行指令，刚创建的项目开始运行，按住Ctrl键，点一下cmd里面出现的网址，可以在浏览器中打开项目首页

cd reftest
npm install
npm run dev

若浏览器出现下面的页面，则说明项目创建成功

展开刚创建的reftest项目文件夹，然后打开App.vue文件，把里面的代码改成下面这样（注意，const写错了，应该写成let）

修改好后，网页会自动更新，可以看到已经修改成我们自己设计的样子

8.接下来，我们做一个按钮尝试改变显示在网页上的信息。首先在网页的结构部分(template内)添加一个按钮button，然后在脚本部分（script内）添加一个改变信息的方法changeMsg,如下图所示。

9.在网页中点击改变信息按钮，发现信息并没有发生改变。

在网页上单击鼠标右键，选择【检查】，再次点击改变信息按钮，然后选择【控制台】，我们发现控制台输出了更改之后的信息，说明msg变量的值实际上已经更改了，但是并没有更新到网页上。

对于这种值更新之后不会自动更新到网页上的数据，我们称之为静态数据。

若希望数据更新之后，可以自动更新到网页上，我们需要用的响应式数据。

Ref简介

ref是Vue3中提供的一种响应式数据，它可以让数据更新之后自动更新到网页上。

使用Ref把msg变量变成响应式数据

使用ref非常简单，只需要在setup函数中调用ref函数，然后把需要变成响应式数据的变量作为参数传递给ref函数即可。

把App.vue里面的代码改成下面这样

在网页上点击改变信息按钮，检查信息是否可以发生变化。

正则表达式

javaScript正则表达式简介

正则表达式是一种模式匹配的方式，它可以匹配字符串中的内容。
正则表达式由字符、元字符、特殊字符和特殊字符集组成。

.：匹配除换行符以外的任意字符
\d：匹配任意数字
\w：匹配任意字母、数字或下划线
\s：匹配任意空白字符
[]匹配范围：匹配任意字符，范围由[]指定
{n} 匹配n次：匹配前面的字符n次
\b：匹配单词边界
\D：匹配任意非数字字符
\W：匹配任意非字母、数字或下划线字符
\S：匹配任意非空白字符
\B：匹配非单词边界
\n：匹配换行符
\t：匹配制表符
\r：匹配回车符
\f：匹配换页符
\v：匹配垂直制表符
\x：匹配十六进制字符
\u：匹配Unicode字符
\c：匹配控制字符
.：匹配除换行符以外的任意字符

匹配电话号码

/^1[34578]\d{9}$/ // 匹配13、14、15、17、18开头的11位数字

匹配邮箱

/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/ // 匹配邮箱地址

匹配身份证号码

/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/ // 匹配身份证号码

匹配URL

/^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([\/\w .-]*)*\/?$/ // 匹配URL

匹配IP地址

/^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$/ // 匹配IP地址

匹配日期

/^\d{4}-\d{1,2}-\d{1,2}$/ // 匹配日期，格式为yyyy-mm-dd

正则表达式验证用户名实操

1.讲刚才是App.vue改名为RefTest.vue进行备份，然后复制一份，重新命名为App.vue，把App.vue文件中的代码改成下面这样：

2.在网页上输入用户名可用发现，若输入不符合我们约定的规则，当输入框失去光标时，网页会弹出报警框

3.在真实的项目上，我们一般不会弹窗提示输入不合法，而是在输入框旁边显示提示信息，要改成这样的话，我们还需要修改代码。如下：

4.再次查看网页，当我们输入的用户名不满足要求时，只要我们离开输入框，下方就会显示红色的提示信息

项目任务

在命令窗口(cmd)按下键盘的Ctrl键和C键结束运行当前测试项目

然后运行cd ..\todoListFront\指令切换到我们之前的待办事项项目

再运行 npm run dev 指令运行该项目

接下来请展开todoListFront项目文件夹，找到Login.vue文件

利用你刚学到的知识，完成下面两个任务：

1.用户在输入用户名的时候检测用户名是否满足下面的条件，若不满足，给出提示信息

用户名必须以英文字母开头
用户名必须同时包含英文字母、数字和特殊字符三种字符
用户名长度不少于8位

2.用户在输入密码的时候检测密码是否满足下面的条件，若不满足，给出提示信息

密码长度不少于6位
密码必须包含英文字母，数字和特殊字符中的两种

文章大纲