目录
案例：完善注册表单校验【重点】
案例：完善注册表单校验【重点】
注册校验通过警告框来提示信息，这使得信息的提示很不友好。
所以我们对信息的提示进行改进，使错误信息的提示以图示方式进行展示。
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
height:500px;
}
#divFormId{
border: 5px solid #999;
width: 550px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
}
#divbg{
background: url(img/regist_bg.jpg);
height:100%;
padding-top: 80px;
}
td{
padding-top: 10px;
}
.errorMsg{
color:red;
font-size: 12px;
}
</style>
<script>
var reg = /^\s*$/;
//校验表单提交数据
function checkFormData() {
//设置一个开关： 开关为true 提交表单，开关为false，阻止表单提交
var result = true;
//每次检查之前，先将错误信息全部清空
var usernameSpan = document.getElementById("usernameSpan");
var pwdSpan = document.getElementById("pwdSpan");
var repwdSpan = document.getElementById("repwdSpan");
usernameSpan.innerHTML="";
pwdSpan.innerHTML="";
repwdSpan.innerHTML="";
//1、获取用户名、密码、确认密码框体的值
var usernameVal = document.getElementById("username").value;
var pwdVal = document.getElementById("pwd").value;
var repwdVal = document.getElementById("repwd").value;
//2、先依次判断用户名、密码、确认密码的不能为空校验，如果有空，直接弹出错误信息，阻止表单提交
if(reg.test(usernameVal)){
usernameSpan.innerHTML = "不能为空";
result = false;
}
if(reg.test(pwdVal)){
pwdSpan.innerHTML = "不能为空";
result = false;
}
if(reg.test(repwdVal)){
repwdSpan.innerHTML = "不能为空";
result = false;
}
//3、若都不为空，再进行密码和确认密码是否相等的判断，如果都不相等，直接弹出错误信息，阻止表单提交
if(pwdVal!=repwdVal){
repwdSpan.innerHTML = "须和密码一致";
result = false;
}
//4、若都不为空，密码和确认密码是相等的，正常提交表单
return result;
}
</script>
</head>
<body>
<div id="divbg">
<div id="divFormId">
<form action="#" method="get" onsubmit="return checkFormData()">
<table width="550">
<tr>
<td colspan="3">
<font color="#3164af" size="5">会员注册</font> USER REGISTER
</td>
</tr>
<tr>
<td align="right">用户名</td>
<td colspan="2"><input type="text" id="username" name="username" size="50"/><span id="usernameSpan" class="errorMsg"></span></td>
</tr>
<tr>
<td align="right">密码</td>
<td colspan="2"><input type="password" id="pwd" name="pwd" size="50"/><span id="pwdSpan" class="errorMsg"></span></td>
</tr>
<tr>
<td align="right">确认密码</td>
<td colspan="2"><input type="password" id="repwd" name="repwd" size="50"/><span id="repwdSpan" class="errorMsg"></span></td>
</tr>
<tr>
<td align="right">Email</td>
<td colspan="2"><input type="text" id="email" name="email" size="50"/> </td>
</tr>
<tr>
<td align="right">姓名</td>
<td colspan="2"><input name="text" id="name" name="name" size="50"/> </td>
</tr>
<tr>
<td align="right">性别</td>
<td colspan="2">
<input type="radio" name="sex" value="man" checked="checked" />男
<input type="radio" name="sex" value="woman" />女
</td>
</tr>
<tr>
<td align="right">出生日期</td>
<td colspan="2"><input type="text" id="birthday" name="birthday" size="50"/> </td>
</tr>
<tr>
<td width="80" align="right">验证码</td>
<td width="100"><input type="text" id="verifyCode" name="verifyCode" /> </td>
<td><img src="img/verifyCode.jpg" /> </td>
</tr>
<tr>
<td></td>
<td colspan="2">
<input type="image" src="img/submit.jpg" />
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html> |
文章来源: qianxu.blog.csdn.net，作者：爱吃豆的土豆，版权归原作者所有，如需转载，请联系作者。
原文链接：qianxu.blog.csdn.net/article/details/126213356
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
评论（0）