8分钟
任务 6 添加JavaScript逻辑代码
任务目标
添加 JavaScript 逻辑代码，使我们创建的表单产生校验效果，并在网页上逐一验证。
任务步骤
1.创建另一个 HTML 文件 formCheck2.html
复制原先的 formCheck.html 文件，将其命名为“formCheck2”，全名为“formCheck2.html”。该文件同样创建在了 D 盘。
2.在 formCheck2.html 文件中添加 JavaScript 逻辑代码
右键点击 formCheck2.html 文件，选择【Edit with Notepad++】，出现以下页面：
以下代码为 JavaScript 逻辑部分的代码，将这些代码复制粘贴到 formCheck2.html 的<body>标签中，并使用 Ctrl+S 键保存。
//引入jQuery
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
function checkForm(){
var nametip = checkUserName();
var passtip = checkPassword();
var conpasstip = ConfirmPassword();
var phonetip = checkPhone();
var result = nametip && passtip && conpasstip && phonetip;
//如果验证通过将提交按钮禁用
if (result) {
$("#btn").attr("disabled", true);
}
}
//验证用户名
function checkUserName(){
var username = document.getElementById('userName');
var errname = document.getElementById('nameErr');
var pattern = /^\w{3,}$/; //用户名格式正则表达式：用户名要至少三位，仅可使用字母和数字
if(username.value.length == 0){
errname.innerHTML="用户名不能为空"
errname.className="error"
return false;
}
if(!pattern.test(username.value)){
errname.innerHTML="用户名不合规范"
errname.className="error"
return false;
}
else{
errname.innerHTML="OK"
errname.className="success";
return true;
}
}
//验证密码
function checkPassword(){
var userpasswd = document.getElementById('userPasword');
var errPasswd = document.getElementById('passwordErr');
var pattern = /^\w{4,8}$/; //密码要在4-8位，仅可使用字母和数字
if(!pattern.test(userpasswd.value)){
errPasswd.innerHTML="密码不合规范"
errPasswd.className="error"
return false;
}
else{
errPasswd.innerHTML="OK"
errPasswd.className="success";
return true;
}
}
//确认密码
function ConfirmPassword(){
var userpasswd = document.getElementById('userPasword');
var userConPassword = document.getElementById('userConfirmPasword');
var errConPasswd = document.getElementById('conPasswordErr');
if((userpasswd.value)!=(userConPassword.value) || userConPassword.value.length == 0){
errConPasswd.innerHTML="上下密码不一致"
errConPasswd.className="error"
return false;
}
else{
errConPasswd.innerHTML="OK"
errConPasswd.className="success";
return true;
}
}
//验证手机号
function checkPhone(){
var userphone = document.getElementById('userPhone');
var phonrErr = document.getElementById('phoneErr');
var pattern = /^1[34578]\d{9}$/; //验证手机号正则表达式，必须是11位数字，且首位为1，次位为“34578”中的其中之一
if(!pattern.test(userphone.value)){
phonrErr.innerHTML="手机号码不合规范"
phonrErr.className="error"
return false;
}
else{
phonrErr.innerHTML="OK"
phonrErr.className="success";
return true;
}
}
</script>在 JavaScript 逻辑部分的代码中，有四条正则表达式。
- 第一条用来判断“用户名要至少 3 位，仅可使用字母和数字”，使用"var pattern = /^\w{3,}\$/"进行验证。
var pattern = /^\w{3,}$/; //用户名格式正则表达式：用户名要至少三位，仅可使用字母和数字- 第二条用来判断“密码要在 4-8 位，仅可使用字母和数字”，使用“var pattern = /^\w{4,8}\$/”进行验证。
var pattern = /^\w{4,8}$/; //密码要在4-8位，仅可使用字母和数字- 第三条用来判断“上下密码是否一致”，使用 if 条件函数做判断进行验证。
if (
userpasswd.value != userConPassword.value ||
userConPassword.value.length == 0
) {
errConPasswd.innerHTML = "上下密码不一致";
errConPasswd.className = "error";
return false;
} else {
errConPasswd.innerHTML = "OK";
errConPasswd.className = "success";
return true;
}- 第四条用来判断“手机号是 11 位数字，且首位为 1，次位为‘34578’中的其中之一”，使用“var pattern = /^134578\d{9}\$/”进行验证。
var pattern = /^1[34578]\d{9}$/; //验证手机号正则表达式，必须是11位数字，且首位为1，次位为“34578”中的其中之一3.将 formCheck2.html 文件上传到 CVM 云服务器端
找到 pscp.exe 应用软件所在目录，在空白处按住 shift+右键，选择“在此处打开 Powershell 窗口”。
输入以下命令，用来将 formCheck2.html 文件上传到我们创建的 CVM 云服务器实例上。
pscp -pw “linux端密码” -r “Windows端文件名” “linux用户名”@“linux端IP地址”:“linux端路径”注：
- Linux 端密码指创建 CVM 云服务器时设置的密码；
- Windows 端文件名指路径加文件全名；
- Linux 用户名默认 root；
- Linux 端 IP 地址指 CVM 云服务器的公网地址；
- Linux 端路径是任务 4 中创建的文件夹的路径。
具体如下：
pscp -pw 311887Zzx -r D:/formCheck2.html root@129.204.248.117:/usr/share/nginx/html/shop上传成功。
在 CVM 云服务器端验证 formCheck2.html 文件是否上传成功，使用以下命令，查看到了 formCheck2.html 文件。
ls /usr/share/nginx/html/shop4.实验验证
访问网址 http://129.204.248.117/shop/formCheck2.html，其中“129.204.248.117”为 CVM 云服务器公网地址，“/shop/formCheck2.html”为文件路径和 formCheck2.html 文件名，查看 HTML 和 CSS 部分的代码。
- 当在“用户名”栏中输入“1”，提示“用户名不合规范”。
- 当在“密码”栏中输入超过 8 位数，提示“密码不合规范”。
- 当在“确认密码”栏中输入与“密码”栏不相同的密码时，提示“上下密码不一致”。
- 当在“手机号码”栏中输入“243432”时，提示“手机号码不合规范”。
- 当全部正则表达式验证通过时，表单全部提示“OK”。
- 点击【注册】按钮后，【注册】按钮变为黑色，鼠标无法再次点击按钮，防止表单重复提交。
学员评价