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>

 

posted @ 2019-07-03 23:39  毛斯钢  阅读(492)  评论(0)  编辑  收藏  举报