<!DOCTYPE html>
<html><head>
<meta charset="UTF-8"> <title>注册验证</title> </head><body>
<h1>注册验证</h1> <b id="stuAddMess" style="color: red;"></b> <form action="register.html" method="post"> <table border="1" cellpadding="0" width="20%"> <tr> <td>用户名：</td> <td><input type="text" id="username" /></td> </tr> <tr> <td>密码：</td> <td><input type="password" id="password" /></td> </tr> <tr> <td>确认密码：</td> <td><input type="password" id="confirmpass" /></td> </tr> <tr> <td>验证码：</td> <td><input type="text" id="code" /></td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" id="submit" value="提交" /> <input type="reset" id="reset" value="重置" /> </td> </tr> </table> </form> <script> window.onload = function() { var reset = document.getElementById('reset'); var fm = document.getElementsByTagName('form')[0]; var stuAddMess = document.getElementById('stuAddMess'); reset.onclick = function() { username.value = ''; password.value = ''; confirmpass.value = ''; code.value = ''; username.focus(); }; fm.onsubmit = function() { if(!/^\w{6,20}$/.test(username.value)) { // 用户名验证 stuAddMess.innerHTML = "* 用户名不合法！"; username.value = ""; username.focus(); return false; } if(!/^\w{6,20}$/.test(password.value)) { // 密码验证 stuAddMess.innerHTML = "* 密码不合法！"; password.value = ''; // 清空 password.focus(); // 将焦点移动到表单字段 return false; } if(password.value != confirmpass.value) { // 密码确认验证 stuAddMess.innerHTML = "* 两次输入的密码不一致，请重新输入！"; password.value = ''; // 清空 confirmpass.value = ''; // 清空 password.focus(); // 将焦点移动到表单字段 return false; } if(!/^\d{4}$/.test(code.value)) { // 验证码验证 stuAddMess.innerHTML = "* 验证码错误！"; code.value = ''; // 清空 code.focus(); // 将焦点移动到表单字段 return false; } return true; }; }; </script> </body></html>