1.用户名8-10个字符
2.密码8-10个字符
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript"> 7 //检查用户名区域 8 function checkUser(){ 9 var fld=document.getElementById("user"); 10 var msg=document.getElementById("userMsg"); 11 var rule=/^w{8,10}$/;//正则表达式：只允许8-10位单词符 12 var val=fld.value; 13 if(rule.test(val)){//如果满足要求将标签class属性置空 14 fld.className="null"; 15 msg.className="null"; 16 return true; 17 }else{//不满足条件，启动准备的class属性error 18 fld.className="error"; 19 msg.className="error"; 20 return false; 21 } 22 } 23 /*密码*/ 24 function checkPwd(){ 25 var fld=document.getElementById("pwd"); 26 var msg=document.getElementById("pwdMsg"); 27 var rule=/^w{8,10}$/; 28 var val=fld.value; 29 if(rule.test(val)){ 30 fld.className="null"; 31 msg.className="null"; 32 return true; 33 }else{ 34 fld.className="error"; 35 msg.className="error"; 36 return false; 37 } 38 } 39 </script> 40 <style type="text/css"> 41 body{/*主体字体*/ 42 font-family: '华文新魏','微软雅黑'; 43 } 44 .form p{/*用户名和密码所在的两行的样式*/ 45 border-bottom: 2px solid #ddd; 46 margin: 0; 47 padding:8px 2px; 48 } 49 .form{/*表单父容器的外观(含圆角)*/ 50 width:340px; 51 margin: 0 auto; 52 border: 4px solid #ccc; 53 background-color: #eee; 54 border-radius:10px;/*圆角*/ 55 } 56 .form label{/*"用户名","密码"所在标签的样式*/ 57 display: inline-block;/*行内块，便于设置宽度*/ 58 width: 60px; 59 text-align: right; 60 } 61 .form h2{/*表单中"登录系统"四个字的样式*/ 62 margin:0; 63 padding:8px; 64 background: #002; 65 color:#ccc; 66 border-radius:6px 6px 0 0; /*上面两个角是圆角*/ 67 text-align: center; 68 } 69 .form p input{<!-- 两个输入框的背景色和输入内容的颜色 --> 70 background-color: #000; 71 color: #bbb; 72 } 73 .form p input:hover{/*输入框悬停*/ 74 /* background: #dde; */ 75 } 76 .form div{/*登录按钮所在行的样式,下面的两个角是圆角*/ 77 padding: 10px; 78 background-color: #fff; 79 border-radius:0 0 6px 6px; 80 text-align: center; 81 } 82 .form div input{<!-- 登录和注册两个按钮的样式 --> 83 background-color: #555; 84 border: 0; 85 border-radius:10px; 86 color:#fff; 87 padding:6px 16px; 88 cursor: pointer; 89 margin: 0 20px; 90 } 91 /*错误效果*/ 92 .form span.error{ 93 color:red; 94 } 95 .form input.error{ 96 /* background-color:#F5A5AD; */ 97 border-color:2px solid red; 98 } 99 </style> 100 </head> 101 <body> 102 <h1>表单验证</h1> 103 <div class="form"> 104 <!-- onsubmit事件在表单向服务器提交之前执行,如果收到true就会想服务器发送表单数据,否则就该停止发送数据 --> 105 <form action="test.html" method="post" onsubmit="return checkUser()+checkPwd()==2;"> 106 <h2>登录系统</h2> 107 <p> 108 <label>用户名</label> 109 <input type="text" id="user" name="user" onblur="checkUser();"> 110 <span id="userMsg">8~10字符</span> 111 </p> 112 <p> 113 <label>密码</label> 114 <input type="password" id="pwd" name="pwd" onblur="checkPwd();"> 115 <span id="pwdMsg">8~10字符</span> 116 </p> 117 <div> 118 <input type="submit" value="登录"> 119 <input type="button" value="注册"> 120 </div> 121 </form> 122 </div> 123 </body> 124 </html>
