JavaScript——注册表单参考模板（含参数格式校验） 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="15_doctool.js"></script>
<style type="text/css">
table{
    border:#39F 1px solid;
    width:600px;
    border-collapse:collapse;   
}

table td,table th{
    border:#39F 1px solid;
    padding:10px;   
}

table td{
    background-color:#FF9;
}
table th{
    background-color:#FC6;
}
#repswspan{
    margin-left:120px;  
}
.errorinfo{
    color:#F00;
    display:none ;
}
.focus{
    border:#0CF 2px solid;
}
.norm{
    border:#333 2px thin;   
}
.error{
    border:#F00 2px solid;  
}

</style>
<script type="text/javascript" >

function inputColor(input)
{
    input.className = "norm";
    input.onfocus = function()
    {
        this.className="focus";
    }
}
window.onload = function(){
    with(document.forms[0])
    {
        inputColor(user);
        inputColor(psw);
        inputColor(repsw);
        inputColor(mail);
    }
}

//校验用户名
/*  已过期  太麻烦
function checkUserDemo(userNode)
{
    var value = userNode.value;
    var regex = /^\w{3,5}$/;
    var divNode = byId("userdiv");
    if(regex.test(value))
    {
        userNode.className = "norm";
        divNode.style.display = "none"; 
    }
    else
    {
        userNode.className = "error";
        divNode.style.display = "block";        
    }
}*/
//集成校验函数 参数：输入节点，正则，对应提示文本的id
function check(inputNode,regex,divId)
{
    var b = false;
    var div = byId(divId);
    if(regex.test(inputNode.value))
    {
        inputNode.className = "norm";
        div.style.display = "none"; 
        b = true;
    }
    else
    {
        inputNode.className = "error";
        div.style.display = "block";        
    }
    return b;
}
//校验用户名
function checkUser(userNode)
{
    var regex = /^\w{3,5}$/;   
    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 = byName("psw")[0].value;//密码框的文本
    var div = byId("repswdiv");
    if(value1 == value2)
    {
        repswNode.className = "norm";
        div.style.display = "none"; 
        b = true;
    }
    else
    {
        repswNode.className = "error";
        div.style.display = "block";        
    }
    return b;
}

function checkMail(mailNode)
{
    var regex = /^\w+@\w+(\.\w+)+$/    ;
    return check(mailNode,regex,"maildiv");
}

function checkForm(formNode)
{
    with(formNode)
    {
        if(checkUser(user) && checkPsw(psw) && checkRepsw(repsw) && checkMail(mail))
            event.returnValue = true;
        else
            event.returnValue = false;
    }
}
</script>
<title>注册表单</title>
</head>

<body>
<!--
1.定义页面
    通过表格来格式化表单
    表格每一行都有自己的背景颜色
    将单元格中的数据通过div进行封装，以便操作。

2.定义样式
    表格的样式
    div 的样式
3.动态效果
    3.1在页面加载时，将所有的输入框默认的框线颜色，以及定义获取焦点的框线颜色
    3.2进行内容的校验，可以通过正则表达式完成，并通过框线的样式给用户进行提示
       通过对刚才用户名校验的分析，发现代码重复度很高，为了提高复用性
       将不同的内容作为参数传递，将相同的内容进行函数的封装
-->
<form onsubmit="checkForm(this)">
    <table>
        <tr>
            <th>注册表单</th>
        </tr>

        <tr>
            <td>
                <div>用户名</div>
                <div><input type="text" name="user" onblur="checkUser(this)"/></div>
                <div id="userdiv" class="errorinfo">用户名错误，请按要求输入</div>
                <div>提示：用户名必须是3-5位，由字母（a-z），数字（0-9），下划线（_）组成</div>
            </td>
        </tr>

        <tr>
            <td>
                <div><span id="pswspan">密码</span> <span id="repswspan">确认密码</span></div>
                <div>
                    <input type="password" name="psw" onblur="checkPsw(this)"/>
                    <input type="password" name="repsw" onblur="checkRepsw(this)"/>
                </div>
                <div class="errorinfo" id="pswdiv">密码格式错误，请按规范输入</div>
                <div class="errorinfo" id="repswdiv">两次密码输入不一致</div>
                <div>提示：密码必须是3-5位，由字母（a-z），数字（0-9）组成</div>
            </td>
        </tr>

        <tr>
            <td>
                <div>邮箱地址</div>
                <div>
                    <input type="text" name="mail" onblur="checkMail(this)"/>
                </div>
                <div class="errorinfo" id="maildiv">邮箱地址错误，请按要求填写</div>
            </td>
        </tr>
        <tr>
            <th>
                <input type="submit" value="注     册"/>
            </th>
        </tr>
    </table>
</form>
</body>
</html>
posted @ 2016-02-20 20:39  时光.漫步  阅读(587)  评论(0)  编辑  收藏  举报