一、今日目标
今天实战练习做出如下界面。
image.png
当用户输入不符合数据要求时，有如下提示：
image.png
当用户点击“填值”按钮时，有固定的用户名、密码、校验码填入。
image.png
二、页面解析
image.png
三、实战
- step1:写出大体框架
<body>
<center>
<h1>登录界面</h1>
<form> <!--收集用户输入 -->
<table border='1'> <!--表格 -->
<tr>
<td>用户名：</td>
<td>
<input type="text" name='userName' >
</td>
<td></td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" name='password' >
</td>
<td id="passwordRes"></td>
</tr>
<tr>
<td>校验码：</td>
<td>
<input type="text" name='checkCode' >
</td>
<td id="checkCodeRes">12345</td>
</tr>
<tr>
<td colspan="3"> <!--跨列合并 -->
<input type="submit" value="登录">
<input type="reset" value="重置">
<input type="button" value="填值" >
<input type="button" value="校验">
</td>
</tr>
</table>
</form>
</center>
</body>
效果如下：
image.png
- 此时，“填值”按钮和用户名、密码效验都还没有实现；
- 实现“填值”按钮
思路：上一篇我们学了事件函数onclick，鼠标单击时触发事件。
我们可以给填值这个input框添加onclick，触发的一个方法就是把固定的用户名、密码、校验码填入框里。
- 目的：用户名框的值修改为固定用户名“leitx”；
- 步骤：
1、声明一个方法名
2、定位这个元素
3、获取到输入的数据
4、修改value值为“leitx”
先行确定我们方法的目的与步骤，在写代码的过程中要养成注释的习惯。按照步骤去写，同时当做注释，增强代码可读性。
我们将目的和步骤写进代码里。
image.png
<script>
//1、声明一个方法名
function fillUserName(){
//2、定位这个元素
var usernames=document.getElementsByName("userName");
// 3、获取到输入的数据
var username=usernames[0];
// 4、修改value值为“leitx”
username.value ='leitx';//用户名文本框的值修改为"leitx"
}
</script>
同理：修改密码框和校验码框的值为固定值Aa123!、12345
//1、声明一个方法名
function fillPassword(){
//2、定位这个元素
var passwords=document.getElementsByName("password");
// 3、获取到输入的数据
var password=passwords[0];
// 4、修改value值为“Aa123!”
password.value ='Aa123!';
}
//1、声明一个方法名
function fillCheckCode(){
//2、定位这个元素
var checkcodes=document.getElementsByName("checkCode");
// 3、获取到输入的数据
var checkcode=checkcodes[0];
// 4、修改value值为“Aa123!”
checkcode.value ='12345';
但是onclick只能触发一次事件，所以要将以上三个函数封装成一个函数：
function fillAll(){//一次调用三个方法
fillUserName();
fillPassword();
fillCheckCode();
}
再将填值按钮里写入onclick，触发的事件为调用方法fillAll()；
<input type="button" value="填值" 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=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位（字母，数字，下划线，减号）";}
}
image.png
- input 也要加上onblur事件。
<tr>
<td>用户名：</td>
<td>
<input type="text" name='userName' onblur="checkUserName()">
</td>
<td id="userNameRes"></td>
</tr>
【tips1】用户名的正则表达式百度即可。稍加界别，找到符合我们数据要求的正则表达式。
image.png
【tips2】
image.png
