表单验证模板2 

<!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"/>
    <title>新用户注册页面</title>
    <link type="text/css" rel="stylesheet" href="css/register.css" />
    <script src="js/jquery-1.8.3.js"></script>
    <script src="js/regist1.js"></script>
</head>

<body>
<div id="header"><img src="images/register_logo.gif" alt="logo"/></div>
<div id="main">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td class="bg bg_top_left"></td>
            <td class="bg_top"></td>
            <td class="bg bg_top_right"></td>
        </tr>
        <tr>
            <td class="bg_left"></td>
            <td class="content">
                <form id="registerForm" action="" method="post" onsubmit="return regs('submit')" name="myform">
                    <dl>
                        <dt>通行证用户名：</dt>
                        <dd><input type="text" id="userName" class="inputs userWidth"/> @163.com</dd>
                        <div id="userNameId"></div>
                    </dl>
                    <dl>
                        <dt>登录密码：</dt>
                        <dd><input type="password" id="pwd" class="inputs"/></dd>
                        <div id="pwdId"></div>
                    </dl>
                    <dl>
                        <dt>重复登录密码：</dt>
                        <dd><input type="password" id="repwd" class="inputs"/></dd>
                        <div id="repwdId"></div>
                    </dl>
                    <dl>
                        <dt>性别：</dt>
                        <dd><input name="sex" type="radio" value="" checked="checked"/>男 <input name="sex" type="radio" value="" />女 </dd>
                    </dl>
                    <dl>
                        <dt>真实姓名：</dt>
                        <dd><input type="text" id="realName" class="inputs" /></dd>
                    </dl>
                    <dl>
                        <dt>昵称：</dt>
                        <dd><input type="text" id="nickName" class="inputs"/></dd>
                        <div id="nickNameId"></div>
                    </dl>
                    <dl>
                        <dt>关联手机号：</dt>
                        <dd><input type="text" id="tel" class="inputs"/></dd>
                        <div id="telId"></div>
                    </dl>
                    <dl>
                        <dt>保密邮箱：</dt>
                        <dd><input type="text" id="email" class="inputs"/></dd>
                        <div id="emailId"></div>
                    </dl>
                    <dl>
                        <dt></dt>
                        <dd><input name=" " type="image" src="images/button.gif"/></dd>
                    </dl>
                </form>
            </td>
            <td class="bg_right"></td>
        </tr>
        <tr>
            <td class="bg bg_end_left"></td>
            <td class="bg_end"></td>
            <td class="bg bg_end_right"></td>
        </tr>
    </table>
</div>
</body>
</html>
html
@charset "gb2312";
/* CSS Document */

body,dl,dt,dd,div,form {padding:0;margin:0;}

#header,#main{
    width:650px;
    margin:0 auto;
    }
.bg{
    background-image:url(../images/register_bg.gif);
    background-repeat:no-repeat;
    width:6px;
    height:6px;
    }
    .bg_top_left{
        background-position:0px 0px;
        }
    .bg_top_right{
        background-position:0px -6px;
        }
    .bg_end_left{
        background-position:0px -12px;
        }
    .bg_end_right{
        background-position:0px -18px;
        }
    .bg_top{
        border-top:solid 1px #666666;
        }
    .bg_end{
        border-bottom:solid 1px #666666;
        }
    .bg_left{
        border-left:solid 1px #666666;
        }
    .bg_right{
        border-right:solid 1px #666666;
        }


.content{
    padding:10px;
    }
    .inputs{
        border:solid 1px #a4c8e0;
        width:150px;
        height:15px;
    }
    
    .userWidth{
        width:110px;
        }
    .content div{
        float:left;
        font-size:12px;
        color:#000;
        }
    dl{
        clear:both;
        }
    dt,dd{
        float:left;
        }
    dt{
        width:130px;
        text-align:right;
        font-size:14px;
        height:30px;
        line-height:25px;
        }
    dd{
        font-size:12px;
        color:#666666;
        width:180px;
        }
/*当鼠标放到文本框时，提示文本的样式*/
.import_prompt{
    border:solid 1px #ffcd00;
    background-color:#ffffda;
    padding-left:5px;
    padding-right:5px;
    line-height:20px;
    }
/*当文本框内容不符合要求时，提示文本的样式*/
.error_prompt{
    border:solid 1px #ff3300;
    background-color:#fff2e5;
    background-image:url(../images/li_err.gif);
    background-repeat:no-repeat;
    background-position:5px 2px;
    padding:2px 5px 0px 25px;
    line-height:20px;
    }
/*当文本框内容输入正确时，提示文本的样式*/
.ok_prompt{
    border:solid 1px #01be00;
    background-color:#e6fee4;
    background-image:url(../images/li_ok.gif);
    background-repeat:no-repeat;
    background-position:5px 2px;
    padding:2px 5px 0px 25px;
    line-height:20px;
    }
css
    window.onload=regs;
    function regs(subm){
        var reg1="^\\w{1}(\\w|[.-]){2,16}\\w{1}$";
        var reg2="^\\w{6,20}$";
        var reg3="^(\\w|[\u4e00-\u9fa5]){1,20}$";
        var reg4="^\\d{11}$";
        var reg5="^\\w+@\\w+.\\w+";
        var stat=true;
        check("userName","请输入用户名","1、由字母、数字、下划线、点、减号组成<br/>2、只能以数字、字母开头或者结尾，且长度为4-18",function(val){
            if(val.match(reg1)){
                return true;
            }else{
                stat=false;
                return false;
            }
        },subm);
        
        check("pwd","请输入密码","由字母、数字、下划线组成且长度为6-20",function(val){
            if(val.match(reg2)){
                return true;
            }else{
                stat=false;
                return false;
            }
        },subm);
        
        check("repwd","请再次输入密码","必须和前面输入的密码一致，规则也是",function(val){
            if(val.match(reg2) && val==$("#pwd").val()){
                return true;
            }else{
                stat=false;
                return false;
            }
        },subm);
        
        check("nickName","请输入昵称","昵称不能为空且长度小于20",function(val){
            if(val.match(reg3)){
                return true;
            }else{
                stat=false;
                return false;
            }
        },subm);
        
        check("tel","请输入电话号码","电话号码是11位数字",function(val){
            if(val.match(reg4)){
                return true;
            }else{
                stat=false;
                return false;
            }
        },subm);
        
        check("email","请输入您的常用邮箱","邮箱必须包含@和.,且@在.前面",function(val){
            if(val.match(reg5)){
                return true;
            }else{
                stat=false;
                return false;
            }
        },subm);
        
        return stat;
    }
    
    function check(nodeId,requestInfo,errorInfo,validateMethod,subm){
        var $node=$("#"+nodeId);
        $node.focus(function(){    
            fz(getNextDiv(this),requestInfo,"import_prompt");
        }).blur(function(){
            var valu=trim($(this).val());
            if(validateMethod(valu)){
                fz(getNextDiv(this),"输入正确","ok_prompt");
            }else{
                fz(getNextDiv(this),errorInfo,"error_prompt");
            }
        });
        if(subm=="submit"){
            $node.blur();
        }
    }    
    
    function fz(node,htm,className){
        $(node).html(htm).removeClass().addClass(className);
    }
    function getNextDiv(node){
        return $(node).parent().next("div");
    }
    function trim(str){
        return str.replace(/(^\s*)|(\s*$)/g,""); 
    }
js

 

posted @ 2016-07-18 14:03  guodaxia  阅读(251)  评论(0)  编辑  收藏  举报