登录页面，看起来比较简单，从外观来说说是一个表格里面分别有字和一个TEXT的文本输入框，但是要做一一个提示框还是不容易的，这个需要对于制作要有比较明确的分析和思路，首先要有一个表格规划，，规划其中的内容，然后是对于浏览器兼容的问题，上次在表格中也说过，因为浏览器不同，我们要找的表格框也不同，如果求方便的话也可以在表格中设一个ID或者NAME、CALSS,这样比较方便用名称查找，，废话不多少看代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.td{
color: red;
font-size: 13px;
}
</style>
<script type="text/javascript">
var str = [0,0,0,0]
window.onload = function(){
var inputs = document.getElementsByName("text")
for(var i=0;i<inputs.length;i++){
inputs[i].onblur = function(){
var input = document.getElementById("tijiao")
var text = this.value.trim()
var tr = this.parentNode.parentNode;
var text1 = tr.cells[0].textContent;
var text2 = text1.substring(0,text1.length-1)
if(text.length==0&&(text2=="用户名"||text2=="密码")){
tr.cells[2].innerHTML = text2+"不能为空";
if(text2=="密码"){
str[1] = 0;
}else{
str[0] = 0;
}
}
else if(text.length>6&&(text2=="用户名"||text2=="密码"))
{
tr.cells[2].innerHTML = text2+"长度不能小于6";
if(text2=="密码"){
str[1] = 0;
}else{
str[0] = 0;
}
}
else if(isNumOrChar(text)&&(text2=="用户名"||text2=="密码")){
tr.cells[2].innerHTML = text2+"不能纯数字或者纯字母";
if(text2=="密码"){
str[1] = 0;
}else{
str[0] = 0;
}
}
else if(text2=="邮箱"&&text.length==0){
tr.cells[2].innerHTML = text2+"不能为空";
str[2] = 0;
}
else if(text2=="邮箱"&&isNotEmail(text))
{
tr.cells[2].innerHTML = text2+"格式不正确";
str[2] = 0;
}
else if(text2=="手机"&&text.length==0)
{
tr.cells[2].innerHTML = text2+"不能为空";
str[3] = 0;
}else if(text2=="手机"&&isNotPhone(text))
{
tr.cells[2].innerHTML = text2+"格式不正确";
str[3] = 0;
}
else{
tr.cells[2].innerHTML = "";
switch (text2){
case "手机":
str[3] = 1;
break;
case "邮箱":
str[2] = 1;
break;
case "用户名":
str[0] = 1;
break;
case "密码":
str[1] = 1;
break;
}
}
}
} if(str.toString()=="1,1,1,1"){
input.disabled = false;
}else{
input.disabled = true;
}
}
function isNumOrChar(str){
var reg = /^\d\d{4,}\d$/g
var reg1 = /^[a-z][a-z]{4,}[a-z]$/g
return (reg.test(str)||reg1.test(str))
}
function isNotEmail(str){
var reg = /^\w\w{5,12}@(qq|sina|163)(\.com|\.cn)/g
return !reg.test(str);
}
function isNotPhone(str){
var reg = /^1[35789]\d{8}\d$/ a
return !reg.test(str)
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td>用户名:</td>
<td><input type ="text" name = "text"/></td>
<td class="td"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type ="password" name = "text"/></td>
<td class="td"></td>
</tr>
<tr>
<td>邮箱:</td>
<td><input type ="text" name = "text"/></td>
<td class="td"></td>
</tr>
<tr>
<td>手机:</td>
<td><input type ="text" name = "text"/></td>
<td class="td"></td>
</tr>
<tr>
<td></td>
<td colspan="2">
<input type="submit" value="submit" disabled = "disabled" id="tijiao"/>
<input type="reset" value="reset"/>
</td>
</tr>
</table>
</form>
</body>
在这中主要是正则表达式要正确，其中逻辑并不是很多，只要熟悉代码单词和正则表达式应该没有什么问题。