使用JS完成注册页面的校验
程序员文章站
2022-05-14 22:18:30
...
案例分析
实现注册表单的基本验证功能，主要实现非空验证、重复输入验证、邮箱验证（正则验证）、聚焦清空
| 会员注册 USER REGISTER | |
| 用户名 | |
| 密码 | |
| 确认密码 | |
| 姓名 | |
| 性别 | |
| 出生日期 | |
| 验证码 | |
placeholder：提示
onblur：光标失去焦点
onfocus：获得光标焦点事件
innerText添加文本与innerHTML区别.innerText=”<font color=red>a</font>“.innerHTML=”<font color=red>a</font>“
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册页面</title>
<script>
//整个表单提交验证
function checkForm() {
return checkUserName() & checkPwd() & recheckPwd() & checkEmail();
}
function checkUserName() {
//用户名不能为空
var userName = document.getElementById("userName").value;
var name = document.getElementById("name");
if (userName == "") {
name.color = "red";
name.innerHTML = "用户名不能为空";
return false
}
name.innerHTML = "√";
name.color = "green";
return true;
}
function checkPwd() {
//验证密码
var password = document.getElementById("password").value;
//alert(password);
var pwd = document.getElementById("pwd");
var reg = /[0-9]{6}/;
if (password == "") {
pwd.color = "red";
pwd.innerHTML="密码不能为空!";
return false;
}
if (!reg.test(password)) {
// alert("密码必须是6位数字!");
pwd.color = "red";
pwd.innerHTML = "密码必须是6位数字!";
return false;
}
pwd.innerHTML = "√";
pwd.color = "green";
return true;
}
function recheckPwd() {
var password = document.getElementById("password").value;
var repassword = document.getElementById("repassword").value;
var repwd = document.getElementById("repwd");
if (repassword == "") {
repwd.color = "red";
repwd.innerHTML="密码不能为空!";
return false;
}
if (repassword != password) {
repwd.color = "red";
document.getElementById("repwd").innerHTML="两次密码不一致!";
return false;
}
repwd.innerHTML = "√";
repwd.color = "green";
return true;
}
function checkEmail() {
//邮箱验证
var email = document.getElementById("email").value;
var eml=document.getElementById("eml")
//正则表达式,以下表达式就是一个正则对象
var reg = /^[a-zA-Z0-9_-][email protected][a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
if (!reg.test(email)) {
eml.color="red"
eml.innerHTML="邮箱格式不正确!";
return false;
}
eml.innerHTML = "√";
eml.color = "green";
return true;
}
function clearText(inpId, fontId) {
document.getElementById(inpId).value = "";
document.getElementById(fontId).innerHTML = "";
}
</script>
</head>
<body>
<!-- onsubmit:表单提交事件 -->
<!-- return false就会阻止提交,return true提交表单 -->
<form action="success.html" method="post" onsubmit="return checkForm()">
<table border="0" width="900" height="500" align="center">
<tr>
<td colspan="2">
<font color="blue" size="5"> 会员注册</font>
USER REGISTER
</td>
</tr>
<tr>
<td align="right">用户名 </td>
<td>
<!-- placeholder:提示属性 -->
<!-- onblur光标移开触发的事件 -->
<input type="text" size="50" placeholder="请输入用户名" id="userName" onblur="checkUserName()" onfocus="clearText('userName','name')"/>
<font id="name"></font>
</td>
</tr>
<tr>
<td align="right">密码 </td>
<td>
<input type="password" size="50" placeholder="请输入密码" id="password" onblur="checkPwd()" onfocus="clearText('password','pwd')"/>
<font id="pwd"></font>
</td>
</tr>
<tr>
<td align="right">确认密码 </td>
<td>
<input type="password" size="50" placeholder="请输入确认密码" id="repassword" onblur="recheckPwd()" onfocus="clearText('repassword','repwd')"/>
<font id="repwd"></font>
</td>
</tr>
<tr>
<td align="right">Email </td>
<td>
<input type="email" size="50" placeholder="Email" id="email" onblur="checkEmail()" onfocus="clearText('email','eml')"/>
<font id="eml"></font>
</td>
</tr>
<tr>
<td align="right">姓名 </td>
<td>
<input type="text" size="50" placeholder="请输入姓名" />
<font id="pwd"></font>
</td>
</tr>
<tr>
<td align="right">性别 </td>
<td>
<input type="radio" name="sex" checked="checked" />男
<input type="radio" name="sex" />女
</td>
</tr>
<tr>
<td align="right">出生日期 </td>
<td>
<!-- 1990/04/12 -->
<input type="text" size="50" placeholder="年/月/日" />
</td>
</tr>
<tr>
<td align="right">验证码 </td>
<td>
<input type="text" size="30" />
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</body>
</html>
上一篇： JSP页面的转码
下一篇： Flexpaper在jsp页面的应用