软件测试攻略（二十）（网页实战进阶）软件测试攻略（二十）：网页

一、今日目标今天实战练习做出如下界面。

文章图片
image.png
当用户输入不符合数据要求时，有如下提示：

文章图片
image.png
当用户点击“填值”按钮时，有固定的用户名、密码、校验码填入。

文章图片
image.png 二、页面解析
文章图片
image.png 三、实战

step1:写出大体框架

登录界面用户名：密码：校验码： 12345

效果如下：

文章图片
image.png

此时，“填值”按钮和用户名、密码效验都还没有实现；

实现“填值”按钮

思路：上一篇我们学了事件函数onclick，鼠标单击时触发事件。
我们可以给填值这个input框添加onclick，触发的一个方法就是把固定的用户名、密码、校验码填入框里。

目的：用户名框的值修改为固定用户名“leitx”；
步骤：
1、声明一个方法名
2、定位这个元素
3、获取到输入的数据
4、修改value值为“leitx”

先行确定我们方法的目的与步骤，在写代码的过程中要养成注释的习惯。按照步骤去写，同时当做注释，增强代码可读性。
我们将目的和步骤写进代码里。

文章图片
image.png

同理：修改密码框和校验码框的值为固定值Aa123!、12345

//1、声明一个方法名 function fillPassword(){ //2、定位这个元素 var passwords=document.getElementsByName("password"); // 3、获取到输入的数据 var password=passwords[0]; // 4、修改value值为“Aa123!” password.value ='https://www.it610.com/article/Aa123!'; } //1、声明一个方法名 function fillCheckCode(){ //2、定位这个元素 var checkcodes=document.getElementsByName("checkCode"); // 3、获取到输入的数据 var checkcode=checkcodes[0]; // 4、修改value值为“Aa123!” checkcode.value ='https://www.it610.com/article/12345';

但是onclick只能触发一次事件，所以要将以上三个函数封装成一个函数：

function fillAll(){//一次调用三个方法fillUserName(); fillPassword(); fillCheckCode(); }

【软件测试攻略（二十）（网页实战进阶）】再将填值按钮里写入onclick，触发的事件为调用方法fillAll()；

此时，点击填值按钮效果如下：

文章图片
image.png

实现用户名、密码效验及提示

思路：
1、我们在别的网站注册时，也可以看到，一般输入用户名时不进行效验，直到你输入完用户名准备输下一个框才效验用户名是否符合要求。
2、上篇提到的事件函数onblur,就是离开文本框时触发事件。我们写一个效验用户名、密码的方法，onblur触发就能实现，用户输入离开文本框时进行效验。
3、如何效验呢？获取用户输入的值与我们规定的数据要求做比较即可，我们规定的数据要求用正则表达式来实现。

目的：校验用户名输入是否符合数据要求
步骤：
1、声明一个方法名
2、定位这个元素
3、获取到输入的数据
4、正则表达式写出校验标准
5、获取到的数据与标准做对比
6、条件判断
7、符合要求，不提示
8、不符合要求，提示输入要求

按照上述思路

//1、声明一个方法 function checkUserName(){ //2、定位到这个元素 var usernames=document.getElementsByName("userName"); //3、获取到输入的数据 var value=https://www.it610.com/article/usernames[0].value; //4、正则表达式写出校验标准 var reg=/^[a-zA-Z0-9_-]{4,16}$/; //5、用获取到的数据和标准做比较 var result =reg.test(value); //6、判断逻辑 if(result){ //7、符合要求的，不提醒 document.getElementById("userNameRes").innerHTML=""; }else{ //8、不符合要求的，给出提醒 document.getElementById("userNameRes").innerHTML="4到16位（字母，数字，下划线，减号）"; } }