如果你真的想做一件事，你一定会找到方法；如果你不想做一件事，你一定会找到借口。

前端注册表单

github源码地址：https://github.com/1056237661/register

目录结构

HTML

register.html

<!DOCTYPE html>
<html>
<head>
    <title>表单提交</title>
    <meta charset="utf-8">
    <!-- 重置样式 公共样式-->
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="css/public.css"/>
    <!-- 自定义样式 -->
    <link rel="stylesheet" type="text/css" href="css/register.css">
</head>
<body class="">
     <div class="bigBox" >
         <form id="form_one" class="form_one" action="" method="post" >
            <div class="dataBox" id="dataBox">
                 <label for="name">用户名：</label><input type="text" name="name" id="name" value="" placeholder="6-12位数字与字母组合(可加_)"/>
                 <span style="display: none;" id="name_text"></span>
                 
                 <br /><label for="password">密  码：</label><input type="password" name="password" id="password" value="" placeholder="8-12位数字、字母、_组合"/>
                 <span style="display: none;" id="password_text"></span>
                 
                 <br /><label for="tel">手机号：</label><input type="tel" name="tel" id="tel" value="" placeholder="手机号"/>
                 <span style="display: none;" id="tel_text"></span>
                 
                 <br /><label for="idCard">身份证号：</label><input type="text" name="idCard" id="idCard" value="" placeholder="身份证号"/>
                 <span style="display: none;" id="idCard_text"></span>
                 
                 <br /><label for="email">邮箱：</label><input type="email" name="email" id="email" value="" placeholder="邮箱"/>
                 <span style="display: none;" id="email_text"></span>                 
            </div>
             <br /><input type="button" class="btn" id="btn" value="注册"/>
         </form>
     </div>
</body>
<script src="js/config.js" type="text/javascript" charset="utf-8"></script>
<script src="js/register.js" type="text/javascript" charset="utf-8"></script>
</html>

 

CSS

public.css

/*publick style*/
.center{margin: 0 auto}
.left{float: left}
.right{float: right}
.f_12{font-size: 12px}
.f_14{font-size: 14px}
.f_16{font-size: 16px}
.bold{font-weight: bold}
a:link{color: #195dbb}
a:visited{color: #195dbb}
a:hover{color: #775da9}
a:active{color: darkblue}
.clearFloat:after{content: "";display: block;clear: both;width: 0;height: 0;visibility: hidden;overflow: hidden}

/* body style */
html,body{height: 100%;}
body{color: black;font-size: 12px;font-family: verdana,arial,helvetica,sans-serif;background:#d9e2ce;}

 reset.css

/*初始化样式*/
html{font-size:16px;}
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select,img,figure{margin:0;padding:0} 
body{font:12px"微软雅黑","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;} 
a{color:#2d374b;text-decoration:none} 
a:hover{color:#002654;text-decoration:none;} 
table{border-collapse:collapse;border-spacing:0} 
p{word-wrap:break-word}
li{list-style: none;}

register.css

body{ background-color: #6081B8; }
.bigBox{ width: 400px; margin: 10% auto; }
.form_one input{width:200px;padding: 5px 3px;margin: 10px 0 10px 5px;}
.form_one span{font-size: 14px;}
label{display: inline-block;width: 80px;text-align: right;font-size: 14px;}
input.btn{margin-left: 85px;}

 js

config.js

//form表单的id
var formID = "form_one";

/* 验证的正则表达式 */
var regExp = {
    /*用户名要求 数字、字母、下划线的组合，其中数字和字母必须同时存在*/
    name : /^(?![^A-Za-z]+$)(?![^0-9]+$)[0-9A-Za-z_]{6,12}$/,
    /*密码：8-12位，由字母数字下划线组成 */
    pwd : /^[\w]{8,12}$/,
    /* 手机号 13开头、15开头（154除外）、180、186~189开头的*/
    tel : /^(13\d|15[0-3]|15[4-9]|180|18[6-9])\d{8}$/,
    /* 身份证号 */
    idCard : /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
    /* 邮箱 */
    email : /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.\w+)+$/,
}

/* 提示语 */
var warns = {
    Error : "输入有误！",
    Empty : "不能为空！",
    Pass : "合格！"
}

register.js

var form_one = document.getElementById(formID);    /* 表单获取 */
var dataBox = document.getElementById("dataBox");   /* 装表单的DIV */
var warnSpan = dataBox.getElementsByTagName("span"); /* 错误提示span */ 
var btn = document.getElementById("btn");    /* 提交 */
form_one.onkeyup = form_one.onchange = form_one.onclick = function(e){
    var e = e || window.event;
    /* 运用了事件委托，但只有input框的事件有响应 */
    if (e.target.tagName.toLocaleLowerCase() === "input") {
        var aim = document.getElementById(e.target.name + "_text"); 
        switch (verify(e.target.name, e.target.value)){
            case -1:
                showState( aim, "red", warns.Error);
                break;
            case 1:
                showState( aim, "white", warns.Pass);
                break;
            case 2:
                showState( aim, "red", warns.Empty);
                break;
            default:
                showState( aim, "red", warns.Error);
                break;
        }
    }
    event.stopPropagation();   /* 阻止冒泡 */
}

/* 
 * 状态显示 
 * obj(改变的对象)、color(颜色)、words(提示语)
 * */
function showState(obj, color, words){
    obj.style.display = "";
    obj.style.color = color;
    obj.innerHTML = words;
}

/* 验证函数，根据名字匹配不同的正则，然后验证对应的值*/
function verify( name, value ){
    switch (name){
        case "name":
            return regexp( regExp.name, value);
        case "password":
            return regexp( regExp.pwd, value);
        case "tel":
            return regexp( regExp.tel, value);
        case "idCard":
            return regexp( regExp.idCard, value);
        case "email":
            return regexp( regExp.email, value);
        default:
            return -1;
    }
}
/* 正则匹配 */
function regexp( reg, value){
    if(value.match(reg)){
        return 1;    /* 合格 */
    }else if( value == "" ){
        return 2;    /* 不能为空 */
    }else{
        return -1;   /* 错误 */
    }
}
/* 提交 */
btn.onclick = function(e){
    var e = e || window.event;
    var state = false;  /* 提交的状态 */
    for (var i=0; i<warnSpan.length; i++) {
        if (warnSpan[i].innerHTML == warns.Pass) {
            state = true;
        }else{
            state = false; /* 有一个值不通过，就不能提交 */
            warnSpan[i].previousElementSibling.click(); /* 触发点击事件，对其进行验证并提示 */
        }
    }
    /* 判断提交状态，做相应的处理 */
    if (state) {
        alert("注册成功！");
        /* 提交数据代码 */
    }else{
        alert("请检查您的输入是否有误！");
    }
    event.stopPropagation();  /* 阻止提交冒泡到form */
};

 

posted @ 2017-01-17 08:51  wanglehui  阅读(843)  评论(0)    收藏  举报