<!-- 用户注册:结构层:html;表现层:css;行为层:javascript;

html利用ul,li来构造:
注意事项:1、每个Input都要有相应的id,这是在js中去调用的。
2、<a href="javascript:void(0)"></a>,添加javascript:void(0)是为了阻止链接的跳转。

行为层:js
js编写的主体思路:1、中心点:每一个input框,也就是获取的inp=document.getElementsByTagName("input");
2、针对input输入框会有点击即获得焦点的状态,和失去焦点的状态。
3、当获得焦点的时候,会给用户名、输入框、提示图标(改变背景图片的位置)变成蓝色,即添加point样式。
4、当input输入框失去焦点时,会给用户名、输入框、提示图标变成红色,即添加error样式。
5、当input输入框内容正确后,会给用户名、输入框变成-->。

zhuye

  1. <body>
  2. <div id="reg">
  3. <form>
  4. <div class="reg_title"><h1>用户注册</h1></div>
  5. <ul class="reg_con">
  6. <li>
  7. <ul class="def">
  8. <li><span>用户帐号:</span><input type="text" id="uname"/></li>
  9. <li><p><i></i>给自己起个名字吧,它将成为您登录本站的用户名</p></li>
  10. </ul>
  11. </li>
  12. <li>
  13. <ul class="def">
  14. <li><span>电子邮箱:</span><input type="text" id="email"/></li>
  15. <li><p><i></i>请输入您的常用邮箱地址,此邮箱地址将作为修改密码</p></li>
  16. </ul>
  17. </li>
  18. <li>
  19. <ul class="def">
  20. <li><span>手机号码:</span><input type="text" id="mobile"/></li>
  21. <li><p><i></i>请输入您的手机号码,方便我们之间的联系</p></li>
  22. </ul>
  23. </li>
  24. <li>
  25. <ul class="def">
  26. <li><span>安全密码:</span><input id="pwd" type="password"/></li>
  27. <li><p><i></i>请输入安全密码,它将作为您的登录密码</p></li>
  28. </ul>
  29. </li>
  30. <li>
  31. <ul class="def ">
  32. <li><span>确认密码:</span><input type="password" id="qrpwd"/></li>
  33. <li><p><i></i>请将上面的密码再输入一次</p></li>
  34. </ul>
  35. </li>
  36. <li>
  37. <ul>
  38. <li><span></span></li>
  39. <li id="reg_sub"><a href="javascript:void(0)" id="enter">立即注册</a></li>
  40. </ul>
  41. </li>
  42. </ul>
  43. </form>
  44. </div>
  45. </body>

css

  1. <style>
  2. html,body,h1,h2,h3,h4,h5,h6,div,ul,ol,li,dl,dt,dd,iframe,textarea,input,button,p,strong,b,a,span,del,pre,table,tr,th,td{margin:; padding:; -webkit-text-size-adjust:none;}
  3. h1,h2,h3,h4,h5,h6,em,del{font-style:normal; font-weight:normal; font-size:100%; -webkit-text-size-adjust:none;}
  4. label,input,textarea{outline:none;}
  5. ul{list-style:none;}
  6. a{text-decoration:none;}
  7. .cl{zoom:}
  8. .cl:after{
  9. display:block;
  10. visibility:hidden;
  11. content:"";
  12. clear:both;
  13. overflow:hidden;
  14. }
  15. body{
  16. background:#DEEBF4 url(http://www.w3cfuns.com/data/attachment/album/201405/21/173823uwzw6d5rgd2xwdd8.jpg) no-repeat top center ;
  17. margin:0 auto;
  18. font-family:Microsoft YaHei, Arial, Helvetica, sans-serif;
  19.  
  20. }
  21. #reg{
  22. width:770px;
  23. background:#fff;
  24. border-radius:5px;
  25. -webkit-border-radius:5px;
  26. -moz-border-radius:5px;
  27. margin:85px auto;
  28. overflow:hidden;
  29. }
  30. .reg_title{
  31. font-size:24px;
  32. text-align:center;
  33. border-bottom:1px dashed #ccc;
  34. padding:15px 0;
  35. margin:0 10px;
  36. }
  37. .reg_con{
  38. margin:20px 10px;
  39. overflow:hidden;
  40. }
  41. .reg_con li ul {
  42. margin:5px 0;
  43. float:left;
  44. width:100%;
  45. line-height:35px;
  46. }
  47. .reg_con li ul li{
  48. float:left;
  49. }
  50. .reg_con li ul li span{
  51. font-size:14px;
  52. }
  53. .reg_con li ul li input{
  54. height:25px;
  55. width:300px;
  56. border:1px solid #666;
  57. }
  58. .reg_con li ul li p{
  59. color:#999;
  60. font-size:12px;
  61. position:relative;
  62. padding-left:20px;
  63.  
  64. }
  65. .reg_con li ul li p i{
  66. width:16px;
  67. height:16px;
  68. display:block;
  69. position:absolute;
  70. left:;
  71. top:10px;
  72. background:url(http://www.w3cfuns.com/data/attachment/album/201405/21/173824rvf1jjbs6j9ovisw.png.thumb.jpg) no-repeat 0 0;
  73. display:none;
  74. }
  75.  
  76. .reg_con li ul.def li span{
  77. font-size:14px;
  78. }
  79. .reg_con li ul.def li input{
  80. height:25px;
  81. width:300px;
  82. margin-right:20px;
  83. }
  84. .reg_con li ul.def li p{
  85. color:#333;
  86. font-size:12px;
  87. }
  88.  
  89. .reg_con li ul.point li span{
  90. font-size:14px;
  91. color:#00f;
  92. }
  93. .reg_con li ul.point li input{
  94. height:25px;
  95. width:300px;
  96. margin-right:20px;
  97. border:1px solid #00f;
  98. }
  99. .reg_con li ul.point li p{
  100.  
  101. font-size:12px;
  102. }
  103. .reg_con li ul.point li p i{
  104. display:block;
  105. }
  106. .reg_con li ul.error li span{
  107. font-size:14px;
  108. color:#f00;
  109. }
  110. .reg_con li ul.error li input{
  111. height:25px;
  112. width:300px;
  113. margin-right:20px;
  114. border:1px solid #f00;
  115. }
  116. .reg_con li ul.error li p{
  117.  
  118. font-size:12px;
  119. padding-left:20px;
  120. }
  121.  
  122. .reg_con li ul.error li p i{
  123. background-position:0 -16px;
  124. display:block;
  125. }
  126.  
  127. .reg_con li ul.ok li input{
  128. height:25px;
  129. width:300px;
  130. margin-right:20px;
  131. border:1px solid #999;
  132. color:#999;
  133. }
  134. .reg_con li ul.ok li p i{
  135. background-position:0 -32px;
  136. display:block;
  137. }
  138. #reg_sub{text-align:center;margin:0 auto;margin-left:10%;}
  139. #reg_sub a{
  140. border:1px solid #0066bb;
  141. color:#ccc;
  142. background:#0055AA;
  143. padding:5px 20px;
  144. }
  145. #reg_sub a:hover{
  146. background:#0066bb;
  147. color:#fff;
  148. }
  149.  
  150. </style>
  1. <script type="text/javascript">
  2.  
  3. /*闭包*/
  4. (
  5. function(){
  6. var $=function(_id){
  7. return document.getElementById(_id);
  8. }
  9. var inpStyle=function(){
  10. var inp=document.getElementsByTagName("input");//获得id为inpList 中的所有的input
  11. for(i=0;i<inp.length;i++){
  12. inp[i].onfocus=function(){
  13. var par=this.parentNode.parentNode;
  14. var msg=par.getElementsByTagName("p")[0];
  15. par.className="point";
  16. check.focus[this.id](par,this,msg);
  17. }
  18. inp[i].onblur=function(){
  19. var par=this.parentNode.parentNode;
  20. var msg=par.getElementsByTagName("p")[0];
  21. par.className="def";
  22. check.blurs[this.id](par,this,msg);
  23. }
  24. }
  25. $("enter").onclick=function(){
  26. subback(inp);
  27. }
  28. }
  29. var check={
  30. focus:{
  31. uname:function(_ul,_this,_p){
  32. _ul.className="point";
  33. _p.innerHTML="<i></i>给自己起个名字吧,它将成为您登录本站的用户名";
  34. },
  35. email:function(_ul,_this,_p){
  36. _ul.className="point";
  37. _p.innerHTML="<i></i>请输入您的常用邮箱地址,此邮箱地址将作为修改密码";
  38. },
  39. mobile:function(_ul,_this,_p){
  40. _ul.className="point";
  41. _p.innerHTML="<i></i>请输入您的手机号码,方便我们之间的联系";
  42. },
  43. pwd:function(_ul,_this,_p){
  44. _ul.className="point";
  45. _p.innerHTML="<i></i>请输入安全密码,它将作为您的登录密码";
  46. },
  47. qrpwd:function(_ul,_this,_p){
  48. _ul.className="point";
  49. _p.innerHTML="<i></i>请将上面的密码再输入一次";
  50. }
  51. },
  52. blurs:{
  53. uname:function(_ul,_this,_p){//ul标签、当前输入框、错误的信息
  54. _ul.className="error";
  55. var flag=false;
  56. if(_this.value==""){
  57.  
  58. _p.innerHTML="<i></i>用户名不能为空!";
  59. }else if(_this.value.length<3 || _this.value.length>16){
  60. _p.innerHTML="<i></i>用户名长度应控制在3-16位字符之间!";
  61. }else if(!/^[\w_-\u4e00-\u9fa5]+$/.test(_this.value)){
  62. _p.innerHTML = "<i></i>用户名只能由大小写字母,数字,下划线,中横线和中文组成!";
  63. }else{
  64. _ul.className="ok";
  65. _p.innerHTML="<i></i>";
  66. flag=true;
  67.  
  68. }
  69.  
  70. return flag;
  71. },
  72. email:function(_ul,_this,_p){
  73. _ul.className="error";
  74. var flag=false;
  75. if(_this.value==""){
  76.  
  77. _p.innerHTML="<i></i>邮箱不能为空!";
  78. }else if(!/\w+((-w+)|(\.\w+))*\@[\w]+((\.|-)[\w]+)*\.[\w]+/.test(_this.value)){
  79. _p.innerHTML="<i></i>请输入正确的邮箱地址!";
  80. }
  81. else{
  82. _ul.className="ok";
  83. _p.innerHTML="<i></i>";
  84. flag=true;
  85. }
  86. return flag=false;
  87. }
  88. ,
  89. mobile:function(_ul,_this,_p){
  90. _ul.className="error";
  91. var flag=false;
  92. if(_this.value==""){
  93.  
  94. _p.innerHTML="<i></i>电话号码不能为空!";
  95. }else if(!/0?(13|14|15|18)[0-9]{9}/.test(_this.value)){
  96. _p.innerHTML="<i></i>请输入正确的电话号码!";
  97. }
  98. else{
  99. _ul.className="ok";
  100. _p.innerHTML="<i></i>";
  101. flag=true;
  102. }
  103. return flag;
  104. }
  105. ,
  106. pwd:function(_ul,_this,_p){
  107. _ul.className="error";
  108. var flag=false;
  109. if(_this.value==""){
  110.  
  111. _p.innerHTML="<i></i>密码不能为空!";
  112. }else if(_this.value.length<6 || _this.value.length>16){
  113.  
  114. _p.innerHTML="<i></i>密码应该在6-16位之间!";
  115. }else if(!/^[\w_-]+$/.test(_this.value)){
  116. _p.innerHTML="<i></i>密码只能由大小字母、数字、下划线组成!";
  117. }
  118. else{
  119. _ul.className="ok";
  120. _p.innerHTML="<i></i>";
  121. flag=true;
  122. }
  123. return flag;
  124. }
  125. ,
  126. qrpwd:function(_ul,_this,_p){
  127. _ul.className="error";
  128. var flag=false;
  129. if(_this.value==""){
  130. _p.innerHTML="<i></i>为了保证您输入的密码准确无误,请再次输入密码!!";
  131.  
  132. }else if(_this.value!=$("pwd").value){
  133.  
  134. _p.innerHTML="<i></i>密码两次输入不一致,请重新输入!";
  135. }
  136. else{
  137. _ul.className="ok";
  138. _p.innerHTML="<i></i>";
  139. flag=true;
  140. }
  141. return flag;
  142. }
  143. }
  144. }
  145. var subback=function(inps){
  146. for(var i=0;i<inps.length;i++){
  147. //inps[i].focus();
  148.  
  149. var flag=true;
  150. var par=inps[i].parentNode.parentNode;
  151. var msg=par.getElementsByTagName("p")[0];
  152.  
  153. if(!check.blurs[inps[i].id](par,inps[i],msg)){
  154. flag=false;
  155. break;
  156. }
  157. }
  158. if(flag){
  159. alert("可提交");
  160. }
  161. else{
  162. alert("不可提交");
  163. }
  164. }
  165. window.onload=function(){//相当于程序的入口 main方法
  166.  
  167. inpStyle();
  168. }
  169. }
  170. )();
  171. </script>

JS——简单的正则表达式验证的更多相关文章

  1. js如何使用正则表达式验证电话号码(可选区号)和邮箱?(分步骤)

    js如何使用正则表达式验证电话号码(可选区号)和邮箱?(分步骤) 一.总结 js进阶正则表达式16电话号码和邮箱正则(分类解决邮箱验证)(分组加?解决电话号码区号选择问题)([\w\.-]中括号解决邮 ...

  2. JS简单表单验证

    这里我是写了一个简单的注册表单验证功能,亲测有效,一起来看看吧! 首先我的HTML代码是这样的: class大家可以忽略一下,这里我项目使用的是bootstrap的样式. 输入用户名和密码用的是正则表 ...

  3. JS的常用正则表达式 验证密码(转载自用)

    JS的正则表达式 强:字母+数字+特殊字符   ^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^& ...

  4. JS和Java正则表达式验证

    js代码 <script type="text/javascript"> function SubmitCk() { var reg = /^([a-zA-Z0-9]+ ...

  5. js中通过正则表达式验证邮箱是否合法

    文章目录 1.效果展示 2.问题描述 3.代码实现 1.效果展示 2.问题描述 当用户在输入框输入邮箱后.点击验证邮箱按钮.系统给出提示信息. 3.代码实现 <!DOCTYPE html> ...

  6. JS的常用正则表达式 验证密码用户名等

    //校验是否全由数字组成 function isDigit(s) { var patrn=/^[0-9]{1,20}$/; if (!patrn.exec(s)) return false retur ...

  7. js、javascript正则表达式验证身份证号码

    function isCardNo(card) { // 身份证号码为15位或者18位,15位时全为数字,18位前17位为数字,最后一位是校验位,可能为数字或字符X var reg = /(^\d{1 ...

  8. JS正则表达式验证账号、手机号、电话和邮箱

    JS正则表达式验证账号.手机号.电话和邮箱 效果体验:http://keleyi.com/keleyi/phtml/jstexiao/15.htm 验证帐号是否合法 验证规则:字母.数字.下划线组成, ...

  9. jQuery validate 根据 asp.net MVC的验证提取简单快捷的验证方式(jquery.validate.unobtrusive.js)

    最近在学习asp.netMVC,发现其中的验证方式书写方便快捷,应用简单,易学好懂. 验证方式基于jQuery的validate 验证方式,也可以说是对jQuery validate的验证方式的扩展, ...

随机推荐

  1. 流畅的python第十一章接口学习记录

    鸭子协议(忽略对象真正类型,转而关注对象有没有实现所需的方法,签名和语义) 标准库中的抽象基类 collections.abc模块中的抽象基类 抽象方法是抽象基类中用来强制子类必须实现的方法,如果子类 ...

  2. hdr rt format对颜色的影响

    我刚刚终于理解为什么rendertarget的format对颜色的影响为什么那么大了 r8g8b8a8  这种会有band artifacts rgbafloat 这种浮点rt 的色带变化更为连贯(R ...

  3. Vmware 14.0 版本中安装Ubuntu 17.10版本无法调整分辨率的问题

    装完ubuntu后发现在vmware中选择了查看-自动调整大小-自适应客户机,虚拟机也无法随着窗口大小来切换分辨率,其实是因为WAYLAND限制了. 1. 先安装vim sudo apt-get in ...

  4. 项目部署问题:xftp无法连接服务器、Nginx403 Forbidden解决、nginx反向代理解决前端跨域问题

    一.xftp无法连接服务器 在xftp中配置正确的ip,用户名和密码后,居然无法连接 解决方案:将协议里面的FTP换成SFTP,注意换成SFTP后端口就默认换成22,要还是原来的21就还是连不上的哈 ...

  5. ASP.NET获取网站根目录(路径)

    摘自: http://blog.sina.com.cn/s/blog_7d0dcba60100vb7r.html 网站在服务器磁盘上的物理路径: HttpRuntime.AppDomainAppPat ...

  6. [视频解说]Java(JDK的下载安装及第一个程序执行)

    (JDK的下载安装及第一个程序执行) 内容:Java JDK 的安装以及HelloWorld 程序的执行 欢迎童鞋们前往围观 http://v.youku.com/v_show/id_XODA3Mzk ...

  7. Android6.0指纹识别开发

    近期在做android指纹相关的功能,谷歌在android6.0及以上版本号对指纹识别进行了官方支持.当时在FingerprintManager和FingerprintManagerCompat这两个 ...

  8. svn: warning: xxxx is already under version control

    svn stat  查看当前目录下svn状态 svn remove xxxx svn add xxx svn ci -m "注释"

  9. 如何让你的webapp也能跳窗口搜索

    目前很多手机app或者一些webapp,搜索栏基本采用跳窗口的搜索方式 怎么做 实现方式: 1.在触发外层的input的时候打开个modal层,默认打开该modal层的时候就触发了moda里面的inp ...

  10. {...formItemLayout} 标签布局

    {...formItemLayout}是reactjs中属性的写法{...props},formItemLayout标签布局,wrapperCol需要为输入控件设置布局样式时,和label 标签布局, ...