<!DOCTYPE html>
第一次习题
<br> var usernameRegex = /^\w{2,15}$/;/*用户名判断*/<br> var passwordRegex = /^\w{6,12}$/;/*密码判断*/<br> var emailRegex = /^\w+@\w+(.\w+)+$/;/*邮箱判断*/</p> <pre><code> function byid(id) { return document.getElementById(id); } function validateForm () { var flag=true; var usernameNode= byid("username"); var username=usernameNode.value; if(!usernameRegex.test(username)) { byid("username_span").Style.color="red"; alert("用户名输入错误"); flag=false; } var passwordNode= byid("password"); var password=passwordNode.value; if(!passwordRegex.test(password)) { byid("password_span").Style.color="red"; alert("密码输入错误"); flag=false; } var repasswordNode=byid("repassword"); var repassword=repasswordNode.value; if(!password==repassword) { byid("repassword_span").Style.color="red"; alert("输入错误"); flag =false; } else if (!passwordRegex.test(repassword)) { byid("repassword_span").Style.color="red"; alert("输入错误"); flag =false; } var emailNode= byid("Email"); var email=emailNode.value; if(!emailRegex.test(email)) { byid("Email_span").Style.color="red"; alert("邮箱输入错误"); flag=false; } } </script> <style type="text/css"> .header{ width: 1200px; height: auto; margin: 40px; overflow: hidden; } .header .header-left{ height: 65px; line-height: 65px; float: left; } .header .header-left img{ float: left; } .header .header-left a{ font-size: 24px; color: #888; padding-left: 10px; text-decoration: none; } .header .header-right{ float: right; height: 55px; line-height: 80px; } .header .header-right span{ background: url(images/wm-logo_03.jpg)0 1px no-repeat; padding-left: 23px; } .header .header-right a{ text-decoration: none; } .main{ background: url(images/zhuce_03.png) no-repeat; background-size: 100% 100%; width: 1200px; min-height: 700px; padding-bottom: 20px; overflow: hidden; margin: 40px; } .main .main-contents{ width: 890px; min-height: 618px; margin: 0 150px; margin-top: 20px; padding-bottom: 30px; background: #fff; border-radius: 3px; } .main .main-contents .title{ width: 890px; height: 60px; line-height: 60px; background: #1097f0; text-align: center; } .main .main-contents .title span{ font-size: 22px; color: #fff; height: 77px; } .main .main-contents ul{ list-style: none; } .main .main-contents ul li{ line-height: 50px; padding-left: 150px; } .main .main-contents .register .item{ width: 120px; font-size: 24px; color: #333; text-align: right; margin-right: 10px; display: inline-block; } .main .main-contents .register .hy-name{ font-size: 24px; color: #333; } .main .main-contents .register .hy-text [type="text"]{ font-size: 24px; color: #333; width: 280px; height: 33px; padding-left: 10px; } .main .main-contents .register .hy-text [type="password"]{ font-size: 24px; color: #333; width: 280px; height: 33px; padding-left: 10px; } .main .main-contents .tl{ height: 50px; line-height: 50px; padding-left: 320px; font-size: 24px; } .main .main-contents .register-button [type="submit"]{ width: 160px; height: 50px; line-height: 50px; text-align: center; font-size: 24px; display: inline-block; margin-left: 400px; } </style> </head> <body> <div class="header"> <div class="header-left"> <img src="images/wm-denglu_03.jpg" alt="111"> <a href="javascript:void(0)">会员注册</a> </div> <div class="header-right"> <span id=""> "已是CCF会员？" <a href="">立即登录</a> </span> </div> </div> <div class="main"> <div class="main-contents"> <div class="title"> <span> 会员注册 </span> </div> <form id="form" action="模板.html" method="post" οnsubmit="return validateForm()"> <div class="register"> <ul> <li> <span class="item"> 会员类型：</span> <span class="hy-name"> <input type="radio" name="flag" value="m" /> 专业会员 <input type="radio" name="flag" value="s" /> 非专业会员 </span> </li> <li> <span class="item" > 姓名：</span> <span class="hy-text"> <input type="text" name="name" id="username"/><span id="username_span">用户名由2-5个字符组成</span></td> </span> </li> <li> <span class="item"> 邮箱：</span> <span class="hy-text"> <input type="text" name="name" id="Email" /><span id="Email_span">请输入8-12位密码</span></td> </span> </li> <li> <span class="item"> 设置密码：</span> <span class="hy-text"> <input type="password" name="name" id="password" /><span id="password_span">请输入8-12位密码</span></td> </span> </li> <li> <span class="item"> 确认密码：</span> <span class="hy-text"> <input type="password" name="name" id="repassword"/><span id="repassword_span">再次输入密码</span></td> </span> </li> <li> <span class="item" > 推荐人：</span> <span class="hy-text"> <input type="text" name="name" placeholder="请输入推荐人选填"/> </span> </li> </ul> </div> <div class="tl"> <input type="checkbox" name="reader" value="1" checked="checked"/> "我已阅读" <a href="">CCF会员条例</a> 并遵守 <a href="">CCF章程</a> </div> <div class="register-button" > <input type="submit" name="register" id="btn1" value="注册"/> </div> </form> </div> </div> </body> </code></pre> <p></html></p>
