純JS實(shí)現(xiàn)表單驗(yàn)證實(shí)例
更新時(shí)間：2016年12月24日 11:52:09 作者：yingzizizizizizzz
這篇文章主要介紹了純JS實(shí)現(xiàn)表單驗(yàn)證實(shí)例,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
表單我實(shí)現(xiàn)了，input屬性是text（文本框）、radio（單選按鈕）、checkbox（多選按鈕）的知識(shí)點(diǎn)，
fieldset標(biāo)簽（組合表單中的相關(guān)元素）、select標(biāo)簽（選擇列表）和textarea標(biāo)簽（多行文本框）。
<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é)號(hào)：<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è)計(jì)</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="" />機(jī)器學(xué)習(xí)</label><br/>
<label><input name="Class" type="checkbox" value="" />計(jì)算機(jī)網(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/>
還有話說(shuō)：<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這部分寫(xiě)的不太好，請(qǐng)大家批評(píng)指正。（參考的網(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;
}
/*驗(yàn)證表單的格式*/
/*當(dāng)鼠標(biāo)放到文本框時(shí)，提示文本的樣式*/
.import_prompt{
border:solid 1px #ffcd00;
background-color:#ffffda;
}
下來(lái)就是js表單驗(yàn)證了。。。。。。
這是js驗(yàn)證的目標(biāo)。
1.當(dāng)鼠標(biāo)放在姓名文本框時(shí)，提示文本及樣式。
2./*當(dāng)鼠標(biāo)離開(kāi)姓名文本框時(shí)，提示文本及樣式*/ 漢字
3.當(dāng)鼠標(biāo)放在學(xué)號(hào)文本框時(shí)，提示文本及樣式。
4./*當(dāng)鼠標(biāo)離開(kāi)學(xué)號(hào)文本框時(shí)，提示文本及樣式*/只能是數(shù)字
5.郵箱的驗(yàn)證，必須符合郵箱的格式。
6.表單提交時(shí)驗(yàn)證表單內(nèi)容輸入的有效性。
其中用到了正則表達(dá)式來(lái)匹配。
匹配簡(jiǎn)體中文的正則是^[\u4e00-\u9fa5]+$
匹配郵箱格式的正則是 [\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?
直接上代碼：
[javascript] view plain copy 在CODE上查看代碼片派生到我的代碼片
// 通過(guò)getElementById得到相應(yīng)元素
function $(id){
return document.getElementById(id);
}
// 當(dāng)鼠標(biāo)放在姓名文本框時(shí)，提示文本及樣式。
function checkNameFocus(){
var userNameId=$("name");
userNameId.className="import_prompt";
var namePrompt=$("namePrompt");
namePrompt.innerHTML="必須是漢字哦~";
}
/*當(dāng)鼠標(biāo)離開(kāi)姓名文本框時(shí)，提示文本及樣式*/
function checkNameBlur(){
var namePrompt=$("namePrompt");
namePrompt.innerHTML=null;
var reg1=/^[\u4e00-\u9fa5]+$/;//匹配簡(jiǎn)體中文的正則表達(dá)式
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)鼠標(biāo)放在學(xué)號(hào)文本框時(shí)，提示文本及樣式。
function checkNumFocus(){
var studentNum=$("num");
studentNum.className="import_prompt";
var numPrompt=$("numPrompt");
numPrompt.innerHTML="必須是0-9的10位數(shù)字哦~";
}
/*當(dāng)鼠標(biāo)離開(kāi)學(xué)號(hào)文本框時(shí)，提示文本及樣式*/
function checkNumBlur(){
var numPrompt=$("numPrompt");
numPrompt.innerHTML=null;
var reg2=/^\d{10}$/;
var xuehao=$("num").value;
//先驗(yàn)證是否為空
if(xuehao==""){
numPrompt.innerHTML="學(xué)號(hào)不能為空！";
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;
}
}
//郵箱的驗(yàn)證，必須符合郵箱的格式。
function checkEmailFocus(){
var email=$("email");
email.className="import_prompt";
var emailPrompt=$("emailPrompt");
emailPrompt.innerHTML="請(qǐng)輸入您常用的電子郵箱";
}
function checkEmailBlur(){
var emailPro=$("emailPrompt");;
emailPrompt.innerHTML=null;
var emailValue=$("email").value;
var reg3=/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/;
//先驗(yàn)證是否為空
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;
}
}
//驗(yàn)證復(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("請(qǐng)至少選擇一門(mén)課程?。?！");
return false;
}
}
//表單提交時(shí)驗(yàn)證表單內(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實(shí)現(xiàn)表單驗(yàn)證實(shí)例，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
![非常不錯(cuò)的[JS]Cookie精通之路](http://img.jbzj.com/images/xgimg/bcimg0.png)
Cookies，有些人喜歡它們，有些人憎恨它們。但是，很少有人真正知道如何使用它們?，F(xiàn)在你可以成為少數(shù)人中的成員－可以自傲的 Cookie 大師。2008-06-06
本文主要介紹了分別使用javascript，jquery，css實(shí)現(xiàn)瀑布流布局的方法。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
如何動(dòng)態(tài)的導(dǎo)入js文件具體該怎么實(shí)現(xiàn)
如何需要進(jìn)行動(dòng)態(tài)的導(dǎo)入js文件，那么下面的方法或許可以幫助到大家2014-01-01
JS實(shí)現(xiàn)常用導(dǎo)航鼠標(biāo)下經(jīng)過(guò)下方橫線自動(dòng)跟隨效果
這篇文章主要介紹了JS寫(xiě)常用導(dǎo)航鼠標(biāo)下經(jīng)過(guò)下方橫線自動(dòng)跟隨效果，文中還給大家講解了基于css?+?js?實(shí)現(xiàn)導(dǎo)航欄下劃線跟隨鼠標(biāo)滑動(dòng)效果,需要的朋友可以參考下2023-01-01
本文將通過(guò)一些常見(jiàn)的FAQ來(lái)帶大家一起學(xué)習(xí)一下怎么用工具定位javascript里的內(nèi)存問(wèn)題，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2022-06-06
這篇文章主要為大家介紹了一道關(guān)于JavaScript變量作用域的面試題，如何解決這道面試題，感興趣的小伙伴們可以參考一下2016-03-03
JS在可編輯的div中的光標(biāo)位置插入內(nèi)容的方法
這篇文章主要介紹了JS在可編輯的div中的光標(biāo)位置插入內(nèi)容的方法,分別用js與jQuery兩種方式加以實(shí)現(xiàn),是非常實(shí)用的特效技巧,需要的朋友可以參考下2014-11-11
模擬彈出菜單的代碼...2007-08-08
mpvue網(wǎng)易云短信接口實(shí)現(xiàn)小程序短信登錄的示例代碼
這篇文章主要介紹了mpvue網(wǎng)易云短信接口實(shí)現(xiàn)小程序短信登錄的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
js字符串轉(zhuǎn)換為對(duì)象格式的三種方法總結(jié)
關(guān)于js里面的字符串轉(zhuǎn)對(duì)象,又或者是對(duì)象轉(zhuǎn)為字符串,都是平時(shí)開(kāi)發(fā)應(yīng)用是經(jīng)常用到的知識(shí)點(diǎn),下面這篇文章主要給大家介紹了關(guān)于js字符串轉(zhuǎn)換為對(duì)象格式的三種方法,需要的朋友可以參考下2022-12-12