19 表单验证&上传图片验证
Posted znyyy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了19 表单验证&上传图片验证相关的知识，希望对你有一定的参考价值。
表单验证
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>
以上是关于19 表单验证&上传图片验证的主要内容，如果未能解决你的问题，请参考以下文章