表单验证
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>
原文地址：https://www.cnblogs.com/znyyy/p/11129823.html
时间： 2024-08-01 06:21:22