表单验证script实现用户名、密码的验证
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>表单验证</title> <script type="text/javascript"> /** * 检测用户 * @param obj */ var checkName = function(obj) { //1.获得用户输入的内容 var value = obj.value; //2.定义正则表达式 var reg = /^\s*$/; //3.获得span var span = document.getElementById('s1'); span.innerHTML = ""; if (reg.test(value)) { span.innerHTML = '用户名不能为空'; span.className = 'error'; return false; } return true; } var checkPwd = function() { //1.获得密码框 var pwd = document.forms[0]['pwd']; var reg = /^\s*$/; var span = document.getElementById('s2'); span.innerHTML = ''; if (reg.test(pwd.value)) { span.innerHTML = '密码不能为空'; span.className = 'error'; return false; } if (pwd.value.length < 6) { span.innerHTML = '密码长度不能少于6位'; span.className = 'error'; return false; } return true; } //重复密码校验 var checkRepwd = function() { //1.获得对象 var repwd = document.forms[0]['re1']; //2.获得第一次的密码 var pwdValue = document.forms[0]['pwd'].value; var span = document.getElementById('s3'); span.innerHTML = ''; if (repwd.value != pwdValue) { span.innerHTML = '两次密码不一致'; span.className = 'error'; return false; } span.innerHTML = 'ok'; span.className = 'info'; return true; } /* * 显示信息 */ var showInfo = function(obj) { //3.获得span if (obj.name == 'username') { var span = document.getElementById('s1'); span.innerHTML = '用户名必须填写'; span.className = 'info'; } if (obj.name == 'pwd') { var span = document.getElementById('s2'); span.innerHTML = '密码长度不能小于6位!'; span.className = 'info'; } } /* * 表单提交前的验证 */ var checkForm = function() { //1.为input提供id值document.getElmentById(); //2.获得tbody,tbody.getElementsByTagName('input'); //document.forms 可以获得文档中所有的表单对象 //documents.forms[0][name|id] var nameInput = document.forms[0]['username']; console.log(nameInput); return checkName(nameInput) && checkPwd() && checkRepwd(); } </script> <style type="text/CSS"> .error { color: red; } .info { color: green; } #tb1 { margin-left: auto; margin-right: auto; border: 1px solid black; width: 500px; height: auto; } #tb1 tr:last-child { text-align: center; } p { text-align: center; } .show { width: 200px; text-align: left; } </style> </head> <body> <p>用户注册</p> <form action="#" method="get" onsubmit="return checkForm();"> <table id="tb1"> <tr> <td>用户名</td> <td> <input type="text" name="username" onfocus="showInfo(this);" onblur="checkName(this);" /> </td> <td class="show"> <span id="s1"></span> </td> </tr> <tr> <td>密码</td> <td> <input type="passWord" name="pwd" onblur="checkPwd();" onfocus="showInfo(this);" /> </td> <td class="show"> <span id="s2"></span> </td> </tr> <tr> <td>重复密码</td> <td> <input type="password" id="re1" onblur="checkRepwd();" /> </td> <td class="show"> <span id="s3"></span> </td> </tr> <tr> <td colspan="3"> <input type="reset" value="重置" /> <input type="submit" value="提交" /> </td> </tr> </table> </form> </body></html>
