欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

純JS實現(xiàn)表單驗證實例

 更新時間：2016年12月24日 11:52:09   作者：yingzizizizizizzz  
這篇文章主要介紹了純JS實現(xiàn)表單驗證實例,非常不錯，具有參考借鑒價值，需要的朋友可以參考下

表單我實現(xiàn)了，input屬性是text（文本框）、radio（單選按鈕）、checkbox（多選按鈕）的知識點，

fieldset標簽（組合表單中的相關(guān)元素）、select標簽（選擇列表）和textarea標簽（多行文本框）。

<form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain" onsubmit="return checkForm()"> 
  <h2>學(xué)生選課基本信息</h2> 
  姓名：<input type="text" id="name" placeholder="yourname" size="20" onfocus="checkNameFocus()" onblur="checkNameBlur()"> 
  <div id="namePrompt"></div><br/> 
  學(xué)號：<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="" />算法設(shè)計</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="" />機器學(xué)習(xí)</label><br/> 
    <label><input name="Class" type="checkbox" value="" />計算機網(wǎng)絡(luò)</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>

css樣式如下圖：

css這部分寫的不太好，請大家批評指正。（參考的網(wǎng)上的一些資料，網(wǎng)址忘了）

*{ 
  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;  
} 
/*驗證表單的格式*/ 
/*當(dāng)鼠標放到文本框時，提示文本的樣式*/ 
.import_prompt{ 
  border:solid 1px #ffcd00; 
  background-color:#ffffda; 
  } 
下來就是js表單驗證了。。。。。。
這是js驗證的目標。
1.當(dāng)鼠標放在姓名文本框時，提示文本及樣式。
2./*當(dāng)鼠標離開姓名文本框時，提示文本及樣式*/ 漢字 
3.當(dāng)鼠標放在學(xué)號文本框時，提示文本及樣式。
4./*當(dāng)鼠標離開學(xué)號文本框時，提示文本及樣式*/只能是數(shù)字
5.郵箱的驗證，必須符合郵箱的格式。
6.表單提交時驗證表單內(nèi)容輸入的有效性。
其中用到了正則表達式來匹配。
匹配簡體中文的正則是^[\u4e00-\u9fa5]+$
匹配郵箱格式的正則是 [\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?
直接上代碼：
[javascript] view plain copy 在CODE上查看代碼片派生到我的代碼片
// 通過getElementById得到相應(yīng)元素 
function $(id){ 
  return document.getElementById(id); 
} 
// 當(dāng)鼠標放在姓名文本框時，提示文本及樣式。 
function checkNameFocus(){ 
  var userNameId=$("name"); 
  userNameId.className="import_prompt"; 
  var namePrompt=$("namePrompt"); 
  namePrompt.innerHTML="必須是漢字哦~"; 
} 
/*當(dāng)鼠標離開姓名文本框時，提示文本及樣式*/  
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; 
  } 
} 
//當(dāng)鼠標放在學(xué)號文本框時，提示文本及樣式。 
function checkNumFocus(){ 
  var studentNum=$("num"); 
  studentNum.className="import_prompt"; 
  var numPrompt=$("numPrompt"); 
  numPrompt.innerHTML="必須是0-9的10位數(shù)字哦~"; 
} 
/*當(dāng)鼠標離開學(xué)號文本框時，提示文本及樣式*/ 
function checkNumBlur(){ 
  var numPrompt=$("numPrompt"); 
  numPrompt.innerHTML=null; 
  var reg2=/^\d{10}$/; 
  var xuehao=$("num").value; 
  //先驗證是否為空 
  if(xuehao==""){ 
    numPrompt.innerHTML="學(xué)號不能為空！"; 
    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; 
  } 
} 
//驗證復(fù)選框 
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;  
  }  
}  
//表單提交時驗證表單內(nèi)容輸入的有效性 
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; 
     }   
  }

以上所述是小編給大家介紹的純JS實現(xiàn)表單驗證實例，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評論