HTML代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单验证</title> </head> <body> <form id="allcontent"> <div> <label><b>会员名:</b><input type="text"></label><p>5-25个字符,一个汉字为两个字符,推荐使用中文会员名。</p> </div> <div id="count">0个字符</div> <div> <label><b>密码:</b><input type="text"></label><p>6-16个字符,请使用字母加数字或符号的组合密码,不能单独使用字母、数字或符号。</p> </div> <div id="em"> <em>弱</em><em>中</em><em>强</em> </div> <div> <label><b>确认密码:</b><input type="text" disabled=""></label><p></p> </div> </form> </body>
css样式:
<style> *{margin:0; padding:0 } body{font-size:20px;} #allcontent{ 1024px; padding:15px; margin:100px auto 0; border: 1px dashed orange } margin-left:10px #count{visibility:hidden; margin-left:83px #em{background:orange; 153px; margin:3px 0 7px 60px } em{opacity:0.2; display:inline-block; 51px; text-align:center } em:first-child{background:orange; opacity:1 } .active{background:orange; opacity:1 } </style>
本页面的表单验证js代码:http://www.cnblogs.com/xuxiaoxia/p/6439941.html