用户广告内容提交 


 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) 
编辑 
收藏 
举报