黑马程序员_HTML+JSP：注册表单

最新推荐文章于 2024-01-20 23:37:15 发布

uwaot704630651

最新推荐文章于 2024-01-20 23:37:15 发布

阅读量691

点赞数

本文链接：https://blog.csdn.net/wutao704630651/article/details/20654051

版权

------- android培训、 java培训、期待与您交流！ ----------<html>
<head>
<title>无标题文档</title>
<style>
table{
border:#0066FF 1px solid;
width:600px;
border-collapse:collapse;
}
table td,table th{
border:#0066FF 1px solid;
padding:10px;
}
table td{
background-color:#FFFF99;
}
table th{
background-color:#FF9900;
}
#repswspan{
margin-left:110px;
}
.errorinfo{
color:#ff0000;
display:none;
}
.focus{
border:#0099ff 1px solid;
}
.norm{
border:#999999 1px solid;
}
.error{
border:#ff0000 1px solid;
}

</style>

<script type="text/javascript">

function inputColor(input)
{
input.className = "norm";
input.onfocus = function()
{
this.className = "focus";
}
}
/*没抽取代码时，可以这样做：
windows.onload = function()
{
//document.forms[0].user.className = "focus";
document.forms[0].user.onfocus = function()
{
//alter(this.nodeName);
this.className = "focus";
}
}
*/
windows.onload = function()
{
with(document.forms[0])
{
inputColor(user);
inputColor(psw);
inputColor(repsw);
inputColor(mail);
}
}
//校验方法：代码的抽取
function check(inputNode,regex,divId)
{
var b = false;

var divNode = document.getElementById(divId);
if(regex.test(inputNode.value)){
inputNode.className = "norm";
divNode.style.display = "none";
b = true;
}
else{
inputNode.className = "error";
divNode.style.display = "block";
}
return b;
}
//校验用户名
function checkUser(userNode)
{
var regex = /^\w{3,5}$/ ;//定义正则表达式
//自己验证// /^[a-zA-Z][a-z_0-9]{3,5}$/; // /^[a-z_][\w-.]*[0-9a-z]$/i;
return check(userNode,regex,"userdiv");
}
//校验密码
function checkPsw(pswNode)
{
var regex = /^[a-z0-9]{3,5}$/i ;//定义正则表达式 //多了\
return check(pswNode,regex,"pswdiv");
}
//校验确认密码
function checkRepsw(repswNode)
{
var b = false;
var value1 = repswNode.value;//定义正则表达式
var value2 = document.getElementsByName("psw")[0].value;
var divNode = document.getElementById("repswdiv");//此处错误getElement后面没有s
if(value1==value2){
repswNode.className = "norm";
divNode.style.display = "none";
b = true;
}
else{
repswNode.className = "error";
divNode.style.display = "block";
}
return b;
}
//校验mail
function checkMail(mailNode)
{
var regex = /^\w+@\w+(\.\w+)+$/ ;//定义正则表达式
return check(mailNode,regex,"maildiv");
}
//校验表单
function checkFrom(formNode)
{
//alter(formNode.user.value);
with(formNode)
{
if(checkUser(user) && checkPsw(psw) && checkRepsw(repsw) && checkMail(mail))
event.returnValue = true;
else
event.returnValue = false;
}
}
/*麻烦一点的：校验用户名
function checkUser(userNode)
{

var value = userNode.value;//获取值
//alert(value);
var regex = /^\w{3,5}$/i; //定义正则表达式 //--正则表达式写错了：{}写出()了
var divNode = document.getElementById("userdiv");
if(regex.test(value)){
userNode.className = "norm";
divNode.style.display = "none";
}
else{
userNode.className = "error";
divNode.style.display = "block";
}
}
*/
</script>

</head>
<body>


<form οnsubmit="checkForm(this)">
<table>
<tr>
<th>注册表单</th>
</tr>
<tr>
<td>
<div>用户名</div>
<div><input type="text" name="user" οnblur="checkUser(this)"/></div>
<div class="errorinfo" id="userdiv">用户名错误，请按要求输入</div>
<div>用户名要求：字母数字或下划线组成，10位以内，只能以字母开头</div>
</td>
</tr>
<tr>
<td>
<div><span>密码</span> <span id="repswspan">确认密码</span></div>
<div>
<input type="password" name="psw" οnblur="checkPsw(this)" />
<input type="password" name="repsw" οnblur="checkRepsw(this)" />
</div>
<div class="errorinfo" id="pswdiv">密码格式错误，请按规范输入</div>
<div class="errorinfo" id="repswdiv">两次密码输入不一致</div>
<div>密码：6-16位任意字符</div>
</td>
</tr>
<tr>
<td>
<div>邮件地址</div>
<div>
<input type="text" name="mail" οnblur="checkMail(this)" />
</div>
<div class="errorinfo" id="maildiv">邮件地址错误，请按要求输入</div>
</td>
</tr>
<tr>
<th>
<input type="submit" value="提交数据" />
</th>
</tr>
</table>

</form>

</body>

</html>

------- android培训、 java培训、期待与您交流！ ----------