<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>练习5-1</title> <script language="javascript" type="text/javascript"> // <!CDATA[ var isDataOK = false; // 定义开关变量,作为是否发送表单到服务器的依据 function Submit1_onclick() { return isDataOK; // 直接返回开关值 } function onChange( obj ) { try // 将可能出错的代码放入try块中 { if( obj == "UserName" ) // 如果发生焦点改变的对象是“用户名”框 { var userObj = document.getElementById(obj); // 获取用户名文本框对象 var user = new String(userObj.value); // 取得用户名值 if( (user.length > 20)||(userObj.value == "") ) // 如果用户名为空或大于20字符则不符合规则 { alert( "用户名不符合规则:超过20个字符或为空!" ); userObj.value = ""; // 清除内容并关掉开关 isDataOK = false; } } else if( obj == "Password1" )//如果焦点改变的对象是密码框 { var pwdObj = document.getElementById(obj); // 获取密码框对象 var pwd = new String(pwdObj.value); if( (pwd.length > 20) || (pwd=="") ) // 判断长度 { alert( "密码不符合规则:超过20字符或为空!" ); pwdObj.value = ""; isDataOK = false; // 不符合规则就关掉开关并返回 return; } for( i = 0; i<pwd.length; i++ ) // 长度合格时逐一判断字符是否是0~9之间 { for( j = 0; j<10; j++ ) { if( pwd.charAt(i) != j ) { if( j==9 ) { alert( "密码不符合规则:包含非数字字符!" ); pwdObj.value = ""; isDataOK = false; return; } else { continue; // 当前字符处于0~9之间,则继续判断下一个 } } else { break; // 只要有一个字符不符合规则就断开循环 } } } isDataOK = true; // 所有条件符合了则打开发送表单的开关 } } catch( e ) { alert("对不起,有错误发生:"+e.description); // 如果有错误发生则输出错误信息 } } // ]]> </script> </head> <body style="position: relative; background-color: white"> <!--配置用户截面,并绑定事件处理程序--> <div style="border-right: silver 1px solid; border-top: silver 1px solid; border-left: silver 1px solid; 330px; border-bottom: silver 1px solid; height: 137px; background-color: ghostwhite; font-size: 12px; font-style: normal;"> <form id="frmLogin" action="#" method="post" style="position: absolute; left: 17px; top: 22px; 320px; height: 104px;"> <span style="left: 42px; position: absolute; top: 23px; 177px;"> 账号:<input id="UserName" style="height: 13px; 134px;" type="text" onchange="onChange(this.id)"/> </span> <br/> <span style="left: 42px; position: absolute; top: 50px"> 密码:<input id="Password1" style="height: 13px;134px;" type="password" onchange="onChange(this.id)"/> </span> <br /> <span style="position:absolute; left: 225px; top: 25px; 38px;"> <input id="Reset1" type="reset" value="重设"/> <input id="Submit1" type="submit" value="登陆" onclick="return Submit1_onclick()" /> </span> </form> </div> </body> </html>