<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>表单验证</title>
<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;
//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 true;
}
}
//校验电子邮件地址(格式上校验)
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>
<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位)"></input></td>
<td id="username_msg"></td>
</tr>
<tr>
<th>密码:</th>
<td><input type="password" id="userpass" name="userpass" placeholder="请输入密码(6-20位)"></input></td>
<td id="userpass_msg"></td>
</tr>
<tr>
<th>重复密码：</th>
<td><input type="password" id="repass" name="repass" placeholder="请再次输入密码"></input></td>
<td id="repass_msg"></td>
</tr>
<tr>
<th>电子邮件:</th>
<td><input type="text" id="email" name="email" placeholder="请输入电子邮件"></input></td>
<td id="email_msg"></td>
</tr>
<tr>
<th>真实姓名：</th>
<td><input type="text" id="realname" name="realname" placeholder="请输入姓名(必须中文)"></input></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）"></input></td>
<td id="birthday_msg"></td>
</tr>
<tr>
<th>验证码</th>
<td>
<span id="code">78DE</span>
<input type="text" id="recode" name="recode" placeholder="请输入验证码"></input>
</td>
<td id="recode_msg"></td>
</tr>
<tr>
<td colspan="3">
<input type="submit" value="注册"></input>
<input type="reset" value="重置"></input>
</td>
</tr>
</table>
</form>
</body>
</html>
最终效果图：
最后可以跳转到百度
密码验证可以自己参照写出。
扫一扫
407
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
