Web前端工程师炙手可热，精美的网页也令人赏心悦目，这个教程帮助大家练习制作一个功能齐全的注册页面。小编希望可以为大家的进步抛砖引玉，如果有想法，收藏我，随时可以留言交流。
工具/原料
1语言：HTML，CSS，JavaScript脚本代码
方法/步骤
1建立站点。首先创建一个文件夹：webroot,用于存放web前端的页面，以及相关的素材和样式表。或者直接在Dreamweaver中建立站点取名为webroot,其中服务器选择为：无（因为本教程并不涉及服务器端生成动态页面，以后会逐步深入讲解的）。
2规划目录结构。在站点右击鼠标点击新建文件夹，分别新建:css,image,js文件夹，用于存放CSS样式表，图片和JavaScript客户端脚本代码。新建文件：register.html,success.html,failure.html分别是注册表单页面和注册成功页面和注册失败页面。
3图片设计将所需图片以相应的格式存入images文件夹，并保证代码中引用的文件名相符。
4CSS样式表-源文件如下.font {letter-spacing: 8px;word-spacing: 2em;font-family: 'Trebuchet MS';font-size: 14px;font-weight: bold;color: #FFFFFF;}.foot {margin: 0;padding: 0;width: 1024px;}.main {width: 1024px;text-align: left;}
5注册界面编辑（部分代码，完整代码可以联系本人或关注文库）
注册页面
6.JavaScript文件function checkusername(){ var un = document.myform.username.value;var regun = new RegExp('^([a-z]|[A-Z]|[0-9]|_){6,}$'); if(regun.test(un)){ document.getElementById('userinfo').innerHTML='用户名可以使用'; return true;} else{ document.getElementById('userinfo').innerHTML='用户名长度至少6位,且由字母、数字、下划线组成'; return false; } } function checkpassone(){ var pone = document.myform.passone.value; if(pone.length>=8){ document.getElementById('passoneinfo').innerHTML='密码符合要求'; return true;} else{ document.getElementById('passoneinfo').innerHTML='密码长度至少8位'; return false; } } function checkpasstwo(){ var pone = document.myform.passone.value;var ptwo = document.myform.passtwo.value; if(pone==ptwo){ document.getElementById('passtwoinfo').innerHTML='密码一致'; return true;} else{ document.getElementById('passtwoinfo').innerHTML='密码输入不一致'; return false; } } function checkemail(){ var em = document.myform.email.value;var regem = new RegExp('^[A-Za-z0-9]+\@([A-Za-z0-9])+(\.([A-Za-z0-9])+)+$'); if(regem.test(em)){ document.getElementById('emailinfo').innerHTML='邮箱格式正确'; return true;} else{ document.getElementById('emailinfo').innerHTML='邮箱格式不正确'; return false; } } function checkshenfenid(){ var sid = document.myform.shenfenid.value;var regid= new RegExp('^([0-9]{15})([0-9]{2}[A-Za-z0-9])?$'); if(regid.test(sid)){ document.getElementById('idinfo').innerHTML='身份证号格式正确'; return true;} else{ document.getElementById('idinfo').innerHTML='身份证号格式不正确'; return false; } } function check(){ return checkusername()&checkpassone()&checkpasstwo()&checkemail()&checkshenfenid(); }
7最后一步，注册失败成功界面。由于不涉及服务器的使用，又使用了JavaScript进行验证，所以失败页面暂时不必使用。
