<form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain" onsubmit="return checkForm()">   <h2>學生選課基本信息</h2>   姓名：<input type="text" id="name" placeholder="yourname" size="20" onfocus="checkNameFocus()" onblur="checkNameBlur()">   <div id="namePrompt"></div><br/>   學號：<input type="text" id="num" placeholder="yournum" size="20" onfocus="checkNumFocus()" onblur="checkNumBlur()">   <div id="numPrompt"></div><br/>   性別：<label><input type="radio" name="sex" value="男" checked>男</label>      <label><input type="radio" name="sex" value="女">女<br/></label>   郵箱：<input type="text" id="email" placeholder="yourmail" size="20" onfocus="checkEmailFocus()" onblur="checkEmailBlur()">   <div id="emailPrompt"></div>   <br/>   <fieldset class="classes" id="course" onchange="checkCourse()">     <legend>可選課程</legend>     <label><input name="Class" type="checkbox" value="" />算法設計</label><br/>     <label><input name="Class" type="checkbox" value="" />人工智能</label><br/>     <label><input name="Class" type="checkbox" value="" />編譯原理</label><br/>     <label><input name="Class" type="checkbox" value="" />機器學習</label><br/>     <label><input name="Class" type="checkbox" value="" />計算機網絡</label>   </fieldset>   喜歡的老師：<select name="teacher">     <option value="0">劉老師</option>     <option value="0">齊老師</option>     <option value="0">李老師</option>     <option value="0">馬老師</option>     <option value="0">肖老師</option>   </select><br/>   還有話說：<br/>   <textarea id="message" name="message" placeholder="Your Message to Us" cols="50" rows="10"></textarea>   <br/><br/>   <button type="submit">提交</button>   <button type="reset">重置</button> </form> 

*{   margin-left:auto;   margin-right:auto;   max-width: 500px;   background: #F8F8F8;   padding: 10px;   font: 12px Arial, Helvetica, sans-serif;   color: #666;   border-radius: 5px;   -webkit-border-radius: 5px;   -moz-border-radius: 5px; } body,form{   padding: 15px;   /*width: 500px;*/   background: #F4F4F4; } h2 {   padding-bottom:2px;    *padding:0; font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif; padding: 20px 0px 20px 40px; display: block; margin: -30px -30px 10px -30px; color: #FFF; background: #9DC45F; text-shadow: 1px 1px 1px #949494; border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; -moz-border-radius: 5px 5px 0px 0px; border-bottom:1px solid #89AF4C; } /*label { display: block; margin: 0px 0px 0px; }*/  select { color: #555; height: 30px; line-height:12px; width: 30%; padding: 0px 0px 0px 10px; margin-top: 2px; border: 1px solid #E5E5E5; background: #FBFBFB; outline: 0; -webkit-box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2); box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2); font: normal 12px/12px Arial, Helvetica, sans-serif; } .classes input{   vertical-align:middle;    margin-top:-2px;    margin-bottom:1px;   height: 35px; } textarea{ height:100px; width: 90%; padding-top: 10px; } button { background-color: #9DC45F; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-border-radius: 5px; border:none; padding: 10px 25px 10px 25px; color: #FFF; text-shadow: 1px 1px 1px #949494; } button:hover { background-color:#80A24A; } #name,#num,#email{vertical-align:middle;}/*input和圖片在一行*/ #namePrompt,#numPrompt,#emailPrompt{   vertical-align:middle;/*input和圖片在一行*/   display: inline-block;   padding: 0px;   color: red;   background-color:#F4F4F4;  } /*驗證表單的格式*/ /*當鼠標放到文本框時，提示文本的樣式*/ .import_prompt{   border:solid 1px #ffcd00;   background-color:#ffffda;   } 下來就是js表單驗證了。。。。。。這是js驗證的目標。1.當鼠標放在姓名文本框時，提示文本及樣式。2./*當鼠標離開姓名文本框時，提示文本及樣式*/ 漢字 3.當鼠標放在學號文本框時，提示文本及樣式。4./*當鼠標離開學號文本框時，提示文本及樣式*/只能是數字5.郵箱的驗證，必須符合郵箱的格式。6.表單提交時驗證表單內容輸入的有效性。其中用到了正則表達式來匹配。匹配簡體中文的正則是^[/u4e00-/u9fa5]+$匹配郵箱格式的正則是 [/w!#$%&'*+/=?^_`{|}~-]+(?:/.[/w!#$%&'*+/=?^_`{|}~-]+)*@(?:[/w](?:[/w-]*[/w])?/.)+[/w](?:[/w-]*[/w])?直接上代碼：[javascript] view plain copy 在CODE上查看代碼片派生到我的代碼片// 通過getElementById得到相應元素 function $(id){   return document.getElementById(id); } // 當鼠標放在姓名文本框時，提示文本及樣式。 function checkNameFocus(){   var userNameId=$("name");   userNameId.className="import_prompt";   var namePrompt=$("namePrompt");   namePrompt.innerHTML="必須是漢字哦~"; } /*當鼠標離開姓名文本框時，提示文本及樣式*/  function checkNameBlur(){   var namePrompt=$("namePrompt");   namePrompt.innerHTML=null;   var reg1=/^[/u4e00-/u9fa5]+$/;//匹配簡體中文的正則表達式   var name=$("name").value;   // 先查看是否為空   if(name==""){     namePrompt.innerHTML="名字不能為空！"     return false;   }   else if(!reg1.test(name)){     var trueimg=document.createElement("img");     trueimg.src="./formimages/false.png";     trueimg.width="15";     namePrompt.appendChild(trueimg);     return false;   }else{     var trueimg=document.createElement("img");     trueimg.src="./formimages/true.png";     trueimg.width="15";     namePrompt.appendChild(trueimg);     return true;   } } //當鼠標放在學號文本框時，提示文本及樣式。 function checkNumFocus(){   var studentNum=$("num");   studentNum.className="import_prompt";   var numPrompt=$("numPrompt");   numPrompt.innerHTML="必須是0-9的10位數字哦~"; } /*當鼠標離開學號文本框時，提示文本及樣式*/ function checkNumBlur(){   var numPrompt=$("numPrompt");   numPrompt.innerHTML=null;   var reg2=/^/d{10}$/;   var xuehao=$("num").value;   //先驗證是否為空   if(xuehao==""){     numPrompt.innerHTML="學號不能為空！";     return false;   }   else if(!reg2.test($("num").value)){//好奇怪，使用變量就變成空的了，在外邊就有值。     var trueimg=document.createElement("img");     trueimg.src="./formimages/false.png";     trueimg.width="15";     numPrompt.appendChild(trueimg);     return false;   }   else{     var trueimg=document.createElement("img");     trueimg.src="./formimages/true.png";     trueimg.width="15";     numPrompt.appendChild(trueimg);     return true;   } } //郵箱的驗證，必須符合郵箱的格式。 function checkEmailFocus(){   var email=$("email");   email.className="import_prompt";   var emailPrompt=$("emailPrompt");   emailPrompt.innerHTML="請輸入您常用的電子郵箱"; } function checkEmailBlur(){   var emailPro=$("emailPrompt");;   emailPrompt.innerHTML=null;   var emailValue=$("email").value;   var reg3=/[/w!#$%&'*+/=?^_`{|}~-]+(?:/.[/w!#$%&'*+/=?^_`{|}~-]+)*@(?:[/w](?:[/w-]*[/w])?/.)+[/w](?:[/w-]*[/w])?/;   //先驗證是否為空   if(emailValue==""){     emailPrompt.innerHTML="郵箱不能為空！";     return false;   }   else if(!reg3.test(emailValue)){     var trueimg=document.createElement("img");     trueimg.src="./formimages/false.png";     trueimg.width="15";     emailPrompt.appendChild(trueimg);     return false;   }   else{     var trueimg=document.createElement("img");     trueimg.src="./formimages/true.png";     trueimg.width="15";     emailPrompt.appendChild(trueimg);     return true;   } } //驗證復選框 function checkCourse(){    var courses=$("course");   var cbs = courses.getElementsByTagName("input");    var b = false;    for(var i=0;i<cbs.length;i++){      if(cbs[i].type == "checkbox" && cbs[i].checked){        b = true;      }    }    if(!b){      alert("請至少選擇一門課程?。?！");      return false;    }  }  //表單提交時驗證表單內容輸入的有效性 function checkForm(){    var flagName=checkNameBlur();    var flagNum=checkNumBlur();    var flagEmail=checkEmailBlur();    var flagCourse=checkCourse();    if(flagName==true &&flagNum==true &&flagEmail==true &&flagCourse==true){      return true;     }     else{       return false;      }     }