表单验证
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表单验证</title> 6 <style type="text/css"> 7 *{ 8 padding:0; 9 margin:0; 10 } 11 .box{ 12 margin:100px auto; 13 width:500px; 14 border:1px solid darkgray; 15 padding:20px; 16 } 17 #prompt{ 18 font-size: 12px; 19 color: darkgray; 20 } 21 .right{ 22 color: lightgreen !important; 23 background: url('images/right.png') no-repeat 5px center; 24 background-size: 15px; 25 padding-left:25px; 26 } 27 .error{ 28 color: red !important;; 29 background: url('images/error.png') no-repeat 5px center; 30 background-size: 15px; 31 padding-left:25px; 32 } 33 </style> 34 </head> 35 <body> 36 <div class="box"> 37 <label for="score">Your score: </label> 38 <input type="text" id="score" placeholder="Please input your score..."> 39 <span id="prompt">Please input your score...</span> 40 <!--<span class="right">The score is right.</span>--> 41 <!--<span class="error">The score must be numbers!</span>--> 42 <!--<span class="error">The score must between 0 and 100!</span>--> 43 </div> 44 </body> 45 <script type="text/javascript"> 46 function $(id) { 47 return typeof id === 'string' ? document.getElementById(id):null; 48 } 49 window.onload = function () { 50 $('score').onblur = function () { 51 var val = this.value.trim(); 52 if(val.length == 0){ 53 $('prompt').className = 'error'; 54 $('prompt').innerText = "The score can't be empty!"; 55 }else if(!parseFloat(val)){ 56 $('prompt').className = 'error'; 57 $('prompt').innerText = "The score must be numbers!"; 58 }else if(val>=0 && val<=100){ 59 $('prompt').className = 'right'; 60 $('prompt').innerText = "The score is right."; 61 }else{ 62 $('prompt').className = 'error'; 63 $('prompt').innerText = "The score must between 0 and 100!"; 64 } 65 } 66 $('score').onfocus = function () { 67 $('prompt').className = ''; 68 $('prompt').innerText = "Please input your score..."; 69 this.value = ''; 70 } 71 } 72 </script> 73 </html>
上传图片验证
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>上传图片验证</title> <style type="text/css"> *{ padding:0; margin:0; } .box{ margin:100px auto; width:500px; border:1px solid darkgray; padding:20px; border-radius:5px; } </style> </head> <body> <div class="box"> <form action="javascript:void(0)"> <label for="file">图片格式验证</label> <input type="file" id="file" > </form> </div> </body> <script type="text/javascript"> var patt = /.+.jpg$|png$|jpeg$|gif$/ig; window.onload = function () { var inp = document.getElementById('file'); inp.onchange = function () { if(patt.exec(inp.value.toLowerCase())){ alert('Right'); }else{ alert('False'); } } } </script> </html>