JavaScript 基礎(chǔ)表單驗(yàn)證示例(純Js實(shí)現(xiàn))
更新時(shí)間：2017年07月20日 08:09:01 投稿：jingxian
下面小編就為大家?guī)?lái)一篇JavaScript 基礎(chǔ)表單驗(yàn)證示例(純Js實(shí)現(xiàn))。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
驗(yàn)證思路
監(jiān)聽(tīng)每個(gè)input控件的焦點(diǎn)離開(kāi)（onblue），當(dāng)焦點(diǎn)離開(kāi)時(shí)調(diào)用驗(yàn)證函數(shù)，驗(yàn)證后修改第三欄文字，顯示符合/不符合并返回true/false
實(shí)現(xiàn)代碼：
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<pnk rel="stylesheet" href="css.css" rel="external nofollow" >
</head>
<body>
<form id="form" action="" method="post" onsubmit="return vipdate()">
<table class="table">
<tr>
<td>雇員編號(hào)</td>
<td>
<input type="text" id="empnb" name="empnb" onblur="vapdateEmpnb()">
</td>
<td>
<span id="empnbMsg"></span>
</td>
</tr>
<tr>
<td>雇員姓名</td>
<td>
<input type="text" id="ename" name="ename" onblur="vapdateEname()">
</td>
<td>
<span id="enameMsg"></span>
</td>
</tr>
<tr>
<td>雇員職位</td>
<td>
<input type="text" name="epost" id="epost" onblur="vapdateEpost()">
</td>
<td>
<span id="epostMsg"></span>
</td>
</tr>
<tr>
<td>雇員日期</td>
<td>
<input type="text" name="" id="edate" name="edate" onblur="vapdateEdate()">
</td>
<td>
<span id="edateMsg"></span>
</td>
</tr>
<tr>
<td>基本工資</td>
<td>
<input type="text" name="esalary" id="esalary" onblur="vapdateEsalary()">
</td>
<td>
<span id="esalaryMsg"></span>
</td>
</tr>
<tr>
<td>傭金</td>
<td>
<input type="text" name="ebrok" id="ebrok" onblur="vapdateEbrok()">
</td>
<td>
<span id="ebrokMsg"></span>
</td>
</tr>
<tr>
<td colspan="3">
<input type="submit" autofocus="autofocus">
<input type="reset">
</td>
</tr>
</table>
</form>
</body>
<script type="text/javascript" src="./FormVapdation.js"></script>
</html>
FormVapdation.js
// 日期選擇
function layDate() {
}
// 驗(yàn)證雇員編號(hào),4位純數(shù)字編號(hào)
function vapdateEmpnb() {
return vapdateRegexp("empnb", /^\d{4}$/);
}
// 驗(yàn)證雇員姓名,不為空
function vapdateEname() {
return vapdateNull("ename");
}
// 驗(yàn)證雇員職位,不為空
function vapdateEpost() {
return vapdateNull("epost");
}
// 驗(yàn)證雇員日期
function vapdateEdate() {
return vapdateRegexp("edate", /^\d{4}-\d{2}-\d{2}$/)
}
// 驗(yàn)證基本工資
function vapdateEsalary() {
return vapdateRegexp("esalary", /^\d+(\.\d{1,2})?$/)
}
// 驗(yàn)證傭金
function vapdateEbrok() {
return vapdateRegexp("ebrok", /^\d+(\.\d{1,2})?$/)
}
// 提交時(shí)全部重新驗(yàn)證
function vapdate() {
return vapdateEmpnb() && vapdateEname() && vapdateEpost() && vapdateEdate() && vapdateEsalary() && vapdateEbrok();
}
// 正則表達(dá)式驗(yàn)證
function vapdateRegexp(elemName, regexp) {
var elem = document.getElementById(elemName);
var msg = document.getElementById(elemName + 'Msg')
console.log(regexp);
console.log(elem.value);
if (regexp.test(elem.value)) {
msg.innerHTML = 'ok';
msg.style.color = 'green';
return true;
} else {
msg.innerHTML = '您的輸入不符合規(guī)則';
msg.style.color = 'red';
return false;
}
}
// 不為空驗(yàn)證
function vapdateNull(elemName) {
var elem = document.getElementById(elemName);
var msg = document.getElementById(elemName + 'Msg');
console.log(elem.value);
console.log(msg);
if (elem.value == '' || elem.value == ' ') {
msg.innerHTML = '您的輸入不能為空';
msg.style.color = 'red';
return false;
} else {
msg.innerHTML = 'ok';
msg.style.color = 'green';
return true;
}
}
css.css
html {
font-size: 14px;
}
.table {
border: 1px grey sopd;
}
.table tr {
height: 2rem;
}
.table td {
width: 15rem;
}
以上這篇JavaScript 基礎(chǔ)表單驗(yàn)證示例(純Js實(shí)現(xiàn))就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JavaScript表單驗(yàn)證示例詳解
- 原生js實(shí)現(xiàn)表單的正則驗(yàn)證（驗(yàn)證通過(guò)后才可提交）
- 原生js 實(shí)現(xiàn)表單驗(yàn)證功能
- JavaScript實(shí)現(xiàn)表單驗(yàn)證功能
- JS簡(jiǎn)單表單驗(yàn)證功能完整示例
- JavaScript使用表單元素驗(yàn)證表單的示例代碼
- JavaScript實(shí)現(xiàn)表單注冊(cè)、表單驗(yàn)證、運(yùn)算符功能
- JS實(shí)現(xiàn)的簡(jiǎn)單表單驗(yàn)證功能完整實(shí)例
- JS實(shí)現(xiàn)的簡(jiǎn)單表單驗(yàn)證功能示例
- JavaScript實(shí)現(xiàn)表單驗(yàn)證
相關(guān)文章
使用javascript實(shí)現(xiàn)Iframe自適應(yīng)高度
這篇文章主要介紹了使用javascript實(shí)現(xiàn)Iframe自適應(yīng)高度,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了js圖片自動(dòng)輪播代碼，利用圖片width顯示位置來(lái)播放圖片和利用數(shù)組放入圖片經(jīng)行輪播,需要的朋友可以參考下2014-05-05
這篇文章主要為大家詳細(xì)介紹了JavaScript字符串檢索字符的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
js獲取異步函數(shù)數(shù)據(jù)的實(shí)現(xiàn)
本文主要介紹了js獲取異步函數(shù)數(shù)據(jù)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
ES6 迭代器與可迭代對(duì)象的實(shí)現(xiàn)
這篇文章主要介紹了ES6 迭代器與可迭代對(duì)象的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
發(fā)一個(gè)數(shù)據(jù)過(guò)濾的代碼，很簡(jiǎn)單，有用的著的拿去
發(fā)一個(gè)數(shù)據(jù)過(guò)濾的代碼，很簡(jiǎn)單，有用的著的拿去...2007-02-02
這篇文章主要為大家詳細(xì)介紹了微信JS-SDK選取手機(jī)照片上傳功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要介紹了js讀取cookie方法,實(shí)例總結(jié)了四種常用的讀取方法,包含了對(duì)cookie數(shù)據(jù)的分割與遍歷操作,是非常實(shí)用的技巧,需要的朋友可以參考下2014-10-10
JavaScript下的時(shí)間格式處理函數(shù)Date.prototype.format
這篇文章主要介紹了JavaScript下的時(shí)間格式處理函數(shù)Date.prototype.format的相關(guān)資料,需要的朋友可以參考下2016-01-01
js實(shí)現(xiàn)文本框支持加減運(yùn)算的方法
這篇文章主要介紹了js實(shí)現(xiàn)文本框支持加減運(yùn)算的方法,可實(shí)現(xiàn)文本框輸入加減運(yùn)算式同時(shí)右側(cè)實(shí)時(shí)顯示對(duì)應(yīng)計(jì)算結(jié)果的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08