原文：js学习入门教程笔记：css+html+js用户注册代码实现
运行截图：如下：
用户注册：结构层：html;表现层：css;行为层：javascript;
html利用ul,li来构造：
注意事项：1、每个Input都要有相应的id,这是在js中去调用的。
2、<a href="javascript:void(0)"></a>，添加javascript:void(0)是为了阻止链接的跳转。
<body>
<div id="reg">
<form>
<div class="reg_title"><h1>用户注册</h1></div>
<ul class="reg_con">
<li>
<ul class="def">
<li><span>用户帐号：</span><input type="text" id="uname"/></li>
<li><p><i></i>给自己起个名字吧，它将成为您登录本站的用户名</p></li>
</ul>
</li>
<li>
<ul class="def">
<li><span>电子邮箱：</span><input type="text" id="email"/></li>
<li><p><i></i>请输入您的常用邮箱地址，此邮箱地址将作为修改密码</p></li>
</ul>
</li>
<li>
<ul class="def">
<li><span>手机号码：</span><input type="text" id="mobile"/></li>
<li><p><i></i>请输入您的手机号码，方便我们之间的联系</p></li>
</ul>
</li>
<li>
<ul class="def">
<li><span>安全密码：</span><input id="pwd" type="password"/></li>
<li><p><i></i>请输入安全密码，它将作为您的登录密码</p></li>
</ul>
</li>
<li>
<ul class="def ">
<li><span>确认密码：</span><input type="password" id="qrpwd"/></li>
<li><p><i></i>请将上面的密码再输入一次</p></li>
</ul>
</li>
<li>
<ul>
<li><span></span></li>
<li id="reg_sub"><a href="javascript:void(0)" id="enter">立即注册</a></li>
</ul>
</li>
</ul>
</form>
</div>
</body>表现层：css
注意事项：1、页面开始一般都写上重置代码。
2、针对用户名、输入框、提示图标要写一组本身的样式、一组def默认的样式、一组point获得焦点的样式、一组error错误样式、一组ok输入正确的样式。
/*reset重置代码开始*/ 复制代码
行为层：js
js编写的主体思路：1、中心点：每一个input框，也就是获取的inp=document.getElementsByTagName("input");
2、针对input输入框会有点击即获得焦点的状态，和失去焦点的状态。
3、当获得焦点的时候，会给用户名、输入框、提示图标（改变背景图片的位置）变成蓝色，即添加point样式。
4、当input输入框失去焦点时，会给用户名、输入框、提示图标变成红色，即添加error样式。
5、当input输入框内容正确后，会给用户名、输入框变成。
/*闭包*/
(
function(){
var $=function(_id){
return document.getElementById(_id);
}
var inpStyle=function(){
var inp=document.getElementsByTagName("input");//获得id为inpList 中的所有的input
for(i=0;i<inp.length;i++){
inp[i].οnfοcus=function(){
var par=this.parentNode.parentNode;
var msg=par.getElementsByTagName("p")[0];
par.className="point";
check.focus[this.id](par,this,msg);
}
inp[i].οnblur=function(){
var par=this.parentNode.parentNode;
var msg=par.getElementsByTagName("p")[0];
par.className="def";
check.blurs[this.id](par,this,msg);
}
}
$("enter").οnclick=function(){
subback(inp);
}
}
var check={
focus:{
uname:function(_ul,_this,_p){
_ul.className="point";
_p.innerHTML="<i></i>给自己起个名字吧，它将成为您登录本站的用户名";
},
email:function(_ul,_this,_p){
_ul.className="point";
_p.innerHTML="<i></i>请输入您的常用邮箱地址，此邮箱地址将作为修改密码";
},
mobile:function(_ul,_this,_p){
_ul.className="point";
_p.innerHTML="<i></i>请输入您的手机号码，方便我们之间的联系";
},
pwd:function(_ul,_this,_p){
_ul.className="point";
_p.innerHTML="<i></i>请输入安全密码，它将作为您的登录密码";
},
qrpwd:function(_ul,_this,_p){
_ul.className="point";
_p.innerHTML="<i></i>请将上面的密码再输入一次";
}
},
blurs:{
uname:function(_ul,_this,_p){//ul标签、当前输入框、错误的信息
_ul.className="error";
var flag=false;
if(_this.value==""){
_p.innerHTML="<i></i>用户名不能为空！";
}else if(_this.value.length<3 || _this.value.length>16){
_p.innerHTML="<i></i>用户名长度应控制在3-16位字符之间！";
}else if(!/^[\w_-\u4e00-\u9fa5]+$/.test(_this.value)){
_p.innerHTML = "<i></i>用户名只能由大小写字母，数字，下划线，中横线和中文组成！";
}else{
_ul.className="ok";
_p.innerHTML="<i></i>";
flag=true;
}
return flag;
},
email:function(_ul,_this,_p){
_ul.className="error";
var flag=false;
if(_this.value==""){
_p.innerHTML="<i></i>邮箱不能为空！";
}else if(!/\w+((-w+)|(\.\w+))*\@[\w]+((\.|-)[\w]+)*\.[\w]+/.test(_this.value)){
_p.innerHTML="<i></i>请输入正确的邮箱地址！";
}
else{
_ul.className="ok";
_p.innerHTML="<i></i>";
flag=true;
}
return flag=false;
}
,
mobile:function(_ul,_this,_p){
_ul.className="error";
var flag=false;
if(_this.value==""){
_p.innerHTML="<i></i>电话号码不能为空！";
}else if(!/0?(13|14|15|18)[0-9]{9}/.test(_this.value)){
_p.innerHTML="<i></i>请输入正确的电话号码！";
}
else{
_ul.className="ok";
_p.innerHTML="<i></i>";
flag=true;
}
return flag;
}
,
pwd:function(_ul,_this,_p){
_ul.className="error";
var flag=false;
if(_this.value==""){
_p.innerHTML="<i></i>密码不能为空！";
}else if(_this.value.length<6 || _this.value.length>16){
_p.innerHTML="<i></i>密码应该在6-16位之间！";
}else if(!/^[\w_-]+$/.test(_this.value)){
_p.innerHTML="<i></i>密码只能由大小字母、数字、下划线组成！";
}
else{
_ul.className="ok";
_p.innerHTML="<i></i>";
flag=true;
}
return flag;
}
,
qrpwd:function(_ul,_this,_p){
_ul.className="error";
var flag=false;
if(_this.value==""){
_p.innerHTML="<i></i>为了保证您输入的密码准确无误，请再次输入密码！！";
}else if(_this.value!=$("pwd").value){
_p.innerHTML="<i></i>密码两次输入不一致，请重新输入！";
}
else{
_ul.className="ok";
_p.innerHTML="<i></i>";
flag=true;
}
return flag;
}
}
}
var subback=function(inps){
for(var i=0;i<inps.length;i++){
//inps[i].focus();
var flag=true;
var par=inps[i].parentNode.parentNode;
var msg=par.getElementsByTagName("p")[0];
if(!check.blurs[inps[i].id](par,inps[i],msg)){
flag=false;
break;
}
}
if(flag){
alert("可提交");
｝<span style="background-color: rgb(255, 255, 255); line-height: 1.5;"> else{</span>由最代码官方编辑于2014-5-23 13:32:47
906
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
