基于javascript的Form表單驗(yàn)證
更新時(shí)間：2016年12月29日 08:29:56 作者：pengbo518
這篇文章主要為大家詳細(xì)介紹了基于javascript的Form表單驗(yàn)證，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
Form表單驗(yàn)證：
js基礎(chǔ)考試內(nèi)容，form表單驗(yàn)證，正則表達(dá)式，blur事件，自動(dòng)獲取數(shù)組，以及css布局樣式，動(dòng)態(tài)清除等。完整代碼如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>form-lpb</title>
<style>
body {
background:#CCF;
font-size:12px;
}
.box {
margin:20px 50px;
line-height:25px;
}
.box .box_sel {
margin-left:25px;
}
.text {
text-align:right;
}
span {
color:#900;
}
.length {
width:38px;
}
</style>
</head>
<body>
<div class="box">
<!--form star-->
<form action="submit.html" onsubmit="return checkAll()">
<table>
<tr>
<td class="text">賬號(hào)</td>
<td><input type="text" id="userName" onblur="b_userName()" /></td>
<td><span id="span_userName"></span></td>
</tr>
<tr>
<td class="text"> 密碼</td>
<td><input type="password" id="pass" onblur="b_pass()" /></td>
<td> <span id="span_pass"></span></td>
</tr>
<tr>
<td class="text">重復(fù)密碼</td>
<td><input type="password" id="pass1" onblur="b_pass1()" /></td>
<td> <span id="span_pass1"></span></td>
</tr>
<tr>
<td class="text">手機(jī)號(hào)</td>
<td><input type="text" id="tel" onblur="b_tel()" /></td>
<td> <span id="span_tel"></span></td>
</tr>
<tr>
<td class="text">身份證號(hào)</td>
<td><input type="text" id="idCard" onblur="b_idCard()" /></td>
<td><span id="span_idCard"></span></td>
</tr>
<tr>
<td class="text">出生年月日</td>
<td>
<input type="text" id="year" class="length" disabled="disabled" />
<input type="text" id="month" class="length" disabled="disabled" />
<input type="text" id="day" class="length" disabled="disabled" />
</td>
</tr>
<tr>
<td class="text"> 郵箱</td>
<td><input type="text" id="email" onblur="b_email()" /></td>
<td><span id="span_email"></span></td>
</tr>
</table>
<div class="box_sel">
愛(ài)好
<select>
<option>籃球</option>
<option>足球</option>
<option>排球</option>
</select>
地區(qū)
<select>
<option>河南</option>
<option>湖南</option>
<option>河北</option>
</select>
<br />
<input type="checkbox" id="ch_box" onclick="c_box()" />
是否同意
<a href="xieyi.html" target="_blank">公司協(xié)議</a>
<br />
<input type="submit" id="sub" value="提交注冊(cè)" disabled="disabled" />
<input type="reset" id="rst" value="重新填寫" onclick="sub_return()" />
</div>
</form>
<!--end form -->
</div>
<script>
// 用戶名 校驗(yàn)
function b_userName(){
var reg = /^[a-zA-Z]{3,9}[_]*[0-9]{3,9}$/; // 用戶名-正則表達(dá)式
var c_use = document.getElementById("userName").value;
var c_span_use = document.getElementById("span_userName");
if(reg.test(c_use)){
c_span_use.innerHTML="√";
return true;
}else {
c_span_use.innerHTML="用戶名必須以3-9個(gè)字母開(kāi)頭，可以有下劃線_，后面3-9個(gè)數(shù)字";
}
}
// 密碼 校驗(yàn)
function b_pass(){
var reg = /^[a-zA-Z]{3,6}[_]*[0-9]{3,9}$/; // 密碼-正則表達(dá)式
var c_pass = document.getElementById("pass").value;
var c_span_pass =document.getElementById("span_pass");
if(reg.test(c_pass)){
c_span_pass.innerHTML="√";
return true;
}
else {
c_span_pass.innerHTML="密碼必須以3-6個(gè)英文字母開(kāi)頭，后面3-9個(gè)數(shù)字";
return false;
}
}
// 重復(fù)密碼 校驗(yàn)、
function b_pass1(){
var cm = document.getElementById("pass1").value;
var cm_sp = document.getElementById("span_pass1");
var c_pass = document.getElementById("pass").value;
if(cm==c_pass&&cm!=""){
cm_sp.innerHTML="√";
return true;
}else{
cm_sp.innerHTML="請(qǐng)重復(fù)密碼";
return false;
}
}
// 手機(jī)號(hào) 校驗(yàn)
function b_tel(){
var reg = /^(\+86)?[1][3,5,8][0-9]{9}$/;
var c_tel = document.getElementById("tel").value;
var c_span_tel = document.getElementById("span_tel");
if(reg.test(c_tel)){
c_span_tel.innerHTML="√";
return true;
}else {
c_span_tel.innerHTML="手機(jī)號(hào)可以（+86）第一位是1，第二位是【3,5,8】，共11位數(shù)字";
return false;
}
}
// 身份證號(hào) 校驗(yàn)
function b_idCard(){
var reg = /\d{17}\w{1}|\d{15}/;
var c_idCard = document.getElementById("idCard").value;
var c_span_idCard = document.getElementById("span_idCard");
if(reg.test(c_idCard)){
c_span_idCard.innerHTML="√";
document.getElementById("year").value=c_idCard.substr(6,4);// 自動(dòng) 獲取 年份
document.getElementById("month").value=c_idCard.substr(10,2);// 自動(dòng) 獲取 月份
document.getElementById("day").value=c_idCard.substr(12,2);
return true;
}else{
c_span_idCard.innerHTML="身份證格式錯(cuò)誤，必須是18位數(shù)或者是15位數(shù)";
document.getElementById("year").value="";// 自動(dòng) 獲取 年份
document.getElementById("month").value="";// 自動(dòng) 獲取 月份
document.getElementById("day").value="";
return false;
}
}
// 郵箱 校驗(yàn)
function b_email(){
var reg = /\w+@\w+\.\w+/;
var c_email = document.getElementById("email").value;
var c_span_email = document.getElementById("span_email");
if(reg.test(c_email)){
c_span_email.innerHTML="√";
return true;
}else {
c_span_email.innerHTML="郵箱格式錯(cuò)誤，必須包含 @ 和 . ";
return false;
}
}
// 協(xié)議 校驗(yàn)
function c_box(){
var c_b = document.getElementById("ch_box");
var c_sub = document.getElementById("sub");
if(c_b.checked){
c_sub.disabled=false;
}else{
c_sub.disabled=true;
}
}
// sub_return 當(dāng)點(diǎn)擊重新填寫時(shí) 提交 按鈕 恢復(fù)為不可用狀態(tài)
function sub_return(){
var subt = document.getElementById("sub");
subt.disabled=true;
var span_clean = document.getElementsByTagName("span");
for(var i=0;i<=span_clean.length;i++){
var span1 = span_clean[i];
span1.innerHTML= "";
}
}
// 整體 校驗(yàn)
function checkAll(){
var c1 =b_userName();
var c2 =b_pass();
var c3 =b_tel();
var c4 =b_idCard();
var c5 =b_email();
if(c1&&c2&&c3&&c4&&c5){
return true;
}else{
return false;
}
}
</script>
</body>
</html>
效果如下圖所示：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
IE8提示Invalid procedure call or argument 異常的解決方法
某臺(tái)機(jī)器上，訪問(wèn)公司的好幾個(gè)產(chǎn)品網(wǎng)站，都拋出很多 Invalid procedure call or argument ，跟進(jìn)了下，情況最后簡(jiǎn)化為2012-09-09
追蹤discord.js中刪除消息的用戶方法實(shí)例詳解
這篇文章主要為大家介紹了如何追蹤discord.js中刪除消息的用戶方法實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2024-01-01
JavaScript數(shù)據(jù)結(jié)構(gòu)Number
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)Number，Number?是JavaScript的基本數(shù)據(jù)結(jié)構(gòu)，是對(duì)應(yīng)數(shù)值的應(yīng)用類型，下文給大家分享JavaScript使用?Number?的常見(jiàn)問(wèn)題,需要的朋友可以參考一下2022-02-02
javascript 漢字轉(zhuǎn)拼音實(shí)現(xiàn)代碼
主要是提前定義了很多文字，這樣的方法不是很是，如果庫(kù)中沒(méi)有這個(gè)詞，是看不到相關(guān)信息的。2009-12-12
js導(dǎo)出table到excel同時(shí)兼容FF和IE示例
js導(dǎo)出table到excel，在百度可以搜索很多的方法，但是其兼容性是相當(dāng)差的，本文制定了一個(gè)可以同時(shí)兼容FF和IE的方法，感興趣的朋友可以參考下2013-09-09
前端程序員必須知道的高性能Javascript知識(shí)
這篇文章主要為大家詳細(xì)介紹了前端程序員必須知道的高性能Javascript知識(shí)，感興趣的小伙伴們可以參考一下2016-08-08
用Javascript輕松制作一套簡(jiǎn)單的抽獎(jiǎng)系統(tǒng)
用Javascript輕松制作一套簡(jiǎn)單的抽獎(jiǎng)系統(tǒng)...2006-12-12
對(duì)于js的一些常見(jiàn)事件的總結(jié)2008-12-12
javascript類型系統(tǒng) Array對(duì)象學(xué)習(xí)筆記
這篇文章主要介紹了javascript類型系統(tǒng)之Array對(duì)象，整理關(guān)于Array對(duì)象的學(xué)習(xí)筆記，感興趣的小伙伴們可以參考一下2016-01-01
js實(shí)現(xiàn)一款簡(jiǎn)單踩白塊小游戲(曾經(jīng)很火)
本文給大家分享原生js實(shí)現(xiàn)曾經(jīng)很火的一款小游戲—?jiǎng)e踩白塊，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-12-12