标签：htm meta 点击 red logs cursor for onclick class
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>表单验证1</title> 6 <style> 7 #input{ 8 border: 1px solid #eee; 9 outline: none; 10 border-radius: 5px; 11 height: 30px; 12 line-height: 30px; 13 14 } 15 #btn{ 16 outline: none; 17 border-radius: 5px; 18 border:1px solid #3a9; 19 width: 50px; 20 height:30px; 21 cursor: pointer; 22 text-align: center; 23 } 24 </style> 25 </head> 26 <body> 27 <form> 28 名字：<input type="text" id="input" maxlength="50px" > 29 <input id="btn" value="验证" type="button"> 30 <div id="err"></div> 31 </form> 32 </body> 33 <script> 34 var inputs =document.getElementById("input"); 35 var err =document.getElementById("err"); 36 //检查字符串长度 37 function chack_length(str){ 38 var len=0; 39 for(var m=0;m<str.length;m++){ 40 var reg = /^[\u4E00-\u9FA5]+$/; 41 if(!reg.test(str)){ 42 len=len+1; 43 }else{ 44 len=len+2; 45 } 46 } 47 return len; 48 } 49 // 50 function a(v){ 51 52 if(v===""){ 53 err.innerHTML="内容不能为空"; 54 err.style.color="red"; 55 inputs.style.borderColor="red"; 56 return; 57 }else{ 58 var numbers = chack_length(v); 59 if(numbers<4||numbers>16){ 60 err.innerHTML="字符长度不在4-16范围内"; 61 err.style.color="red"; 62 inputs.style.borderColor="red"; 63 }else{ 64 err.innerHTML="通过验证"; 65 err.style.color="#3a9"; 66 } 67 } 68 } 69 //点击 70 btn.onclick=function sub(){ 71 var values = inputs.value; 72 a(values); 73 }; 74 75 </script> 76 </html>
标签：htm meta 点击 red logs cursor for onclick class
原文地址：http://www.cnblogs.com/gaoxuerong123/p/7236813.html
