javascript表单验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
form{margin:50px auto;width:400px;border:1px solid #00f;padding:30px;}
form table{margin:20px auto;}
tr{line-height:30pt;}
th{text-align:right;}
td{text-align:left;}
tr:last-child td{text-align:center;}
.ok{color:green;}
.error{color:red;}
</style>
</head>
<body>
<form id="frm" action="https://www.baidu.com" method="get">
<table>
<caption>注册用户</caption>
<tr>
<th>用户名:</th>
<td><input type="text" id="username" name="username" placeholder="请输入用户名(3-20位)"/></td>
<td id="username_msg"></td>
</tr>
<tr>
<th>密码:</th>
<td><input type="password" id="userpass" placeholder="请输入密码（6-20位）"/></td>
<td id="userpass_msg"></td>
</tr>
<tr>
<th>重复密码：</th>
<td><input type="password" id="repass" name="repass" placeholder="请再次输入密码"></td>
<td id="repass_msg"></td>
</tr>
<tr>
<th>电子邮件:</th>
<td><input type="text" id="email" name="email" placeholder="请输入电子邮件"></td>
<td id="email_msg"></td>
</tr>
<tr>
<th>真实姓名：</th>
<td><input type="text" id="realname" name="realname" placeholder="请输入姓名(必须中文)"></td>
<td id="realname_msg"></td>
</tr>
<tr>
<th>性别:</th>
<td>
<input type="radio" id="male" name="agendar" value="0">男</input>
<input type="radio" id="female" name="agendar" value="1">女</input>
</td>
<td id="agendar_msg"></td>
</tr>
<tr>
<th>出生日期：</th>
<td><input type="text" id="birthday" name="birthday" placeholder="请输入生日（格式：1990-12-23）"></td>
<td id="birthday_msg"></td>
</tr>
<tr>
<th>验证码</th>
<td>
<span id="code">78DE</span>
<input type="text" id="recode" name="recode" placeholder="请输入验证码"/>
</td>
<td id="recode_msg"></td>
</tr>
<tr>
<td colspan="3">
<input type="submit" value="注册"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
</body>
<script>
window.onload=function(){
document.getElementById("frm").onsubmit=checkValid;
document.getElementById("username").onblur=checkUser;
document.getElementById("email").onblur=checkEmail;
//......其他绑定
};
//合法性检查
function checkValid() {
if(!checkUser) return false
//.......其他验证
if(!checkEmail())return false;
};
//用户名合法性检查
function checkUser() {
var username = document.getElementById("username").value;
if(username == null || username.length < 3 || username.length >20){
//不合法
document.getElementById("username_msg").innerHTML = '用户名非法';
document.getElementById("username_msg").className = 'error';
return false
}else{
//合法
document.getElementById("username_msg").innerHTML = 'OK';
document.getElementById("username_msg").className = "ok";
return false
}
}
//校验电子邮件地址(格式上校验)
function checkEmail(){
var email=document.getElementById("email").value;
//写一个正则表达式
var reg=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+\.([a-zA-Z]){2,3}$/;
if(reg.test(email)){
//合法
document.getElementById("email_msg").innerHTML="OK";
document.getElementById("email_msg").className="ok";
return true;
}else{
//不合法
document.getElementById("email_msg").innerHTML="格式不对";
document.getElementById("email_msg").className="error";
return false;
}
}
</script>
</html>
原网页链接：https://blog.csdn.net/weixin_43889484/article/details/103452879
浙公网安备 33010602011771号