用户广告内容提交
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 }