用户广告内容提交


1
<!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=utf-8"> 5 <script type="text/javascript" src="ad.js"> 6 </script> 7 <style> 8 .text{ 9 text-align:right; 10 border:solid 1px red; 11 } 12 .kj{ 13 text-align:left; 14 } 15 </style> 16 </head> 17 <body> 18 <center> 19 <img src="image/ad.jpg" style="width:400px;height:150px;"> 20 <form> 21 <div style="display:table-row;"> 22 <div class="text" style="display:table-cell;">Enter the banner massage:</div> 23 <div class="kj" style="display:table-cell;"> 24 <input id="message" name="message" size="32" onblur="validateLength(1,32,this,document.getElementById('message_help'));"/> 25 <span id="message_help" class="help"></span> 26 </div> 27 </div> 28 <div style="display:table-row;"> 29 <div class="text" style="display:table-cell;">Enter ZIP code of the lacation:</div> 30 <div class="kj" style="display:table-cell;"> 31 <input id="location" name="location" onblur="validateZIPCode(this,document.getElementById('location_help'));"/> 32 <span id="location_help" class="help"></span> 33 </div> 34 </div> 35 <div style="display:table-row;"> 36 <div class="text" style="display:table-cell;">Enter the date for the message to be shown:</div> 37 <div class="kj" style="display:table-cell;"> 38 <input id="date" name="date" onblur="validateDate(this,document.getElementById('date_help'));"/> 39 <span id="date_help" class="help"></span> 40 </div> 41 </div> 42 <div style="display:table-row;"> 43 <div class="text" style="display:table-cell;">Enter your name:</div> 44 <div class="kj" style="display:table-cell;"> 45 <input id="name" name="name" onblur="validateLength(1,32,this,document.getElementById('name_help'));"/> 46 <span id="name_help" class="help"></span> 47 </div> 48 </div> 49 <div style="display:table-row;"> 50 <div class="text" style="display:table-cell;">Enter your phone number:</div> 51 <div class="kj" style="display:table-cell;"> 52 <input id="phone" name="phone" onblur="validatePhone(this,document.getElementById('phone_help'));"/> 53 <span id="phone_help" class="help"></span> 54 </div> 55 </div> 56 <div style="display:table-row;"> 57 <div class="text" style="display:table-cell;">Enter your email address:</div> 58 <div class="kj" style="display:table-cell;"> 59 <input id="address" name="address" onblur="validateEmail(this,document.getElementById('address_help'));"/> 60 <span id="address_help" class="help"></span> 61 </div> 62 </div> 63 <input id="submit" name="submit" type="button" value="submit" onclick="placeOrder(this.form);"> 64 </form> 65 </center> 66 </body> 67 </html>
 1 function placeOrder(form){
 2     if(validateLength(1,32,form["message"],form["message_help"])&&
 3         validateZIPCode(form["location"],form["location_help"])&&
 4         validateLength(1,32,form["date"],form["date_help"])&&
 5         validateLength(1,32,form["name"],form["name_help"])&&
 6         validateLength(1,32,form["phone"],form["phone_help"])&&
 7         validateLength(1,32,form["email"],form["email_help"])){
 8             alert("1");
 9             form.submit();
10         }
11             else{
12                 alert("I'm sorry but there something wrong with the order information.");
13             }
14 }
15 function validateNonEmpty(inputFeild,helpText){
16     if(inputFeild.value.length==0){
17         if(helpText!=null)
18             helpText.innerHTML="please enter the data.";
19         return false;
20     }
21     else{
22             if(helpText!=null)
23                 helpText.innerHTML="";
24             return true;
25         }
26 }
27 function validateLength(MinLength,MaxLength,inputFeild,helpText){
28     if(inputFeild.value.length<MinLength||inputFeild.value.length>MaxLength){
29         //È·ÈÏhelpTextÔªËصĴæÔÚ
30         if(helpText!=null)
31             helpText.innerHTML="Please enter the data between 1 to 32.";
32         return false;
33     }
34     else{
35         if(helpText!=null)
36             helpText.innerHTML="";
37         return true;
38     }
39 }
40 function validateZIPCode(inputFeild,helpText){
41     if(!validateNonEmpty(inputFeild,helpText))
42         return false;
43     else{
44         return validateRegEx(/^\d{5}$/,inputFeild.value,helpText,"please enter exactly five digits. ");
45     }
46     /*if(inputFeild.value.length!=5){
47         //È·ÈÏhelpTextÔªËصĴæÔÚ
48         if(helpText!=null)
49             helpText.innerHTML="Please enter exactly five digits.";
50         return false;
51     }
52     else if(isNaN(inputFeild.value)){
53         if(helpText!=null)
54             helpText.innerHTML="please enter a number.";
55         return false;
56     }
57     else{
58         if(helpText!=null)
59             helpText.innerHTML="";
60         return true;
61     }*/
62 
63 }
64 function validateDate(inputFeild,helpText){
65         if(!validateNonEmpty(inputFeild,helpText))
66         return false;
67     else{
68         return validateRegEx(/^\d{2}\d{2}\d{4}$/,inputFeild.value,helpText,"please enter a date(for example:02/02/2016). ");
69     }
70 }
71 function validatePhone(inputFeild,helpText){
72         if(!validateNonEmpty(inputFeild,helpText))
73         return false;
74     else{
75         return validateRegEx(/^(15|13|17)\d{10}$/,inputFeild.value,helpText,"please enter your number(for example:15023698251). ");
76     }
77 }
78 function validateEmail(inputFeild,helpText){
79         if(!validateNonEmpty(inputFeild,helpText))
80         return false;
81     else{
82         return validateRegEx(/^[\w\.-_\+]+@[\.\w{2,3}]+$/,inputFeild.value,helpText,"please enter your email address(for example:2536966@qq.com). ");
83     }
84 }
85 function validateRegEx(regex,inputStr,helpText,helpMessage)
86 {
87     if(!regex.test(inputStr)){
88         if(helpText!=null)
89             helpText.innerHTML=helpMessage;
90         return false;
91     }
92     else{
93             if(helpText!=null)
94                 helpText.innerHTML="";
95             return true;
96     }
97 }

 


 

posted @ 2017-05-02 22:26  杰森啊  阅读(131)  评论(0编辑  收藏  举报