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

来源：互联网发布：宣传片制作软件下载编辑：程序博客网时间：2024/05/22 11:55
<!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";            }}*///集成校验函数 参数：输入节点，正则，对应提示文本的idfunction 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>
0 0