学习Java开发mis系统
一开始总的有个页面来登录吧，可以输入用户名和密码，用到使用正则表达式验证用户名和密码。
马上安排！
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>用户登录</title>
<script language="javascript">
function setfocus(){
document.loginForm.PersonName.focus();
}
function checkForm(){
var theForm=document.loginForm;
if(theForm.PersonName.value==""){
document.getElementById("nameId").innerHTML="请输入用户名！";
}
else if(theForm.PersonPwd.value==""){
document.getElementById("passwordId").innerHTML="请输入密码！";
}
else{
var nameStr=document.getElementById("textId").value.trim();
var pwdStr=document.getElementById("pwId").value;
var nameReg=/^[\u4E00-\u9FA5A0-9a-zA-Z_]{2,16}$/;
var pwdReg=/^(\w){6,20}$/;
if(!nameReg.test(nameStr)){
document.getElementById("nameId").innerHTML="请输入2至16个中文字母、数字或者下划线！";
}
else if(!pwdReg.test(pwdStr)){
document.getElementById("passwordId").innerHTML="请输入6至20个字母、数字或者下划线！";
}
else{
theForm.submit();
}
}
}
function blurHandle(){
var theForm=document.loginForm;
if(theForm.PersonName.value!=""){
var str=document.getElementById("textId").value.trim();
var nameReg=/^[\u4E00-\u9FA5A0-9a-zA-Z_]{2,16}$/;
if(!nameReg.test(str))
document.getElementById("nameId").innerHTML="请输入2至16个中文字母、数字或者下划线！";
else
document.getElementById("nameId").innerHTML="";
}
if(theForm.PersonPwd.value!=""){
var str=document.getElementById("pwId").value;
var pwdReg=/^(\w){6,20}$/;
if(!pwdReg.test(str))
document.getElementById("passwordId").innerHTML="请输入6至20个字母、数字或者下划线！";
else
document.getElementById("passwordId").innerHTML="";
}
}
</script>
<style type="text/css">
.formposition1{
position:absolute;
left:calc(50% - 88px - 53px);
top:calc(50% - 20px);
}
.formposition2{
position:absolute;
left:calc(50% - 88px);
top:calc(50% - 23px);
}
.formposition3{
position:absolute;
left:calc(50% - 88px + 186px);
top:calc(50% - 20px);
}
.formposition11{
position:absolute;
left:calc(50% - 88px - 53px);
top:calc(50% - 20px + 26px);
}
.formposition22{
position:absolute;
left:calc(50% - 88px);
top:calc(50% - 23px + 26px);
}
.formposition33{
position:absolute;
left:calc(50% - 88px + 186px);
top:calc(50% - 20px + 26px);
}
.formposition44{
position:absolute;
left:calc(50% - 88px);
top:calc(50% - 23px + 26px + 26px);
}
#textId{
width:176px;
height:16px;
}
#pwId{
width:176px;
height:16px;
}
#buttonId{
width:91px;
height:23px;
}
}
</style>
</head>
<body onl oad="javascript:setfocus()">
<form action="GetPersonData" name="loginForm" method="post" accept-charset="gb2312">
<div class="formposition1">
<label for="textId">用户名</label>
</div>
<div class="formposition2">
<input type="text" id="textId" name="PersonName" value="" onBlur="javascript:blurHandle()">
</div>
<div class="formposition3">
<span style="color:red; white-space:nowrap" id="nameId"></span>
</div>
<div class="formposition11">
<label for="pwId">密 码</label>
</div>
<div class="formposition22">
<input type="password" id="pwId" name="PersonPwd" value="" onBlur="javascript:blurHandle()">
</div>
<div class="formposition33">
<span style="color:red" id="passwordId"></span>
</div>
<div class="formposition44">
<input type="button" id="buttonId" value="提交 " onclick="javascript:checkForm()">
</div>
</form>
</body>
</html>