JavaScript使用簡單正則表達式的數(shù)據(jù)驗證功能示例
更新時間：2017年01月13日 12:03:07 作者：lx_3278@126
這篇文章主要介紹了JavaScript使用簡單正則表達式的數(shù)據(jù)驗證功能,結(jié)合實例形式分析了JS針對表單輸入內(nèi)容的簡單正則驗證操作技巧,需要的朋友可以參考下
本文實例講述了JavaScript使用簡單正則表達式的數(shù)據(jù)驗證功能。分享給大家供大家參考，具體如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Register-reg</title>
<script type="text/javascript" language="javascript">
function checkName() {
var nameElement = document.getElementById("name");
//var regExp = /^(a-z)[^a-z\d_]/i;
var regExp = /[a-zA-Z\d_]/i; // \w 匹配包括下劃線的任何單詞字符。等價于'[A-Za-z0-9_]'。
var regExp2 = /^[A-Za-z]/i;//匹配字符串開始位置為字母
var resultElement = document.getElementById("resName");
if (nameElement.value.match(regExp) && nameElement.value.match(regExp2) && nameElement.value.length >= 6) {
//匹配成功
//會員名為字母、數(shù)字、下劃線組成，并且字母為開頭，長度不小于6
resultElement.innerHTML = "";
return true;
}
else {
resultElement.innerHTML = "會員名為字母、數(shù)字、下劃線組成，并且字母為開頭，長度不小于6！";
return false;
}
}
function checkPwd() {
var pwdElement = document.getElementById("pwd");
var regExp = /[a-zA-Z\d_]/i; // \w 匹配包括下劃線的任何單詞字符。等價于'[A-Za-z0-9_]'。
var regExp2 = /[a-zA-Z]/i; //匹配字母
var regExp3 = /\d/i; //匹配數(shù)字
var resultElement = document.getElementById("resPwd");
if (pwdElement.value.match(regExp) && pwdElement.value.match(regExp2) && pwdElement.value.match(regExp3) && pwdElement.value.length >= 6) {
//匹配成功
//密碼為字母、數(shù)字、下劃線組成，并且必須有字母、數(shù)字，長度不小于6
resultElement.innerHTML = "";
return true;
}
else {
resultElement.innerHTML = "密碼為字母、數(shù)字、下劃線組成，并且必須有字母、數(shù)字，長度不小于6！";
return false;
}
}
function checkPwd2() {
var pwdElement = document.getElementById("pwd");
var pwd2Element = document.getElementById("pwd2");
var resultElement = document.getElementById("resPwd2");
if (pwdElement.value == pwd2Element.value) {
//重輸密碼與之前密碼完全匹配
resultElement.innerHTML = "";
return true;
}
else {
resultElement.innerHTML = "密碼不一致！";
return false;
}
}
function checkGentle() {
var gentleElement = document.getElementById("gentle");
var resultElement = document.getElementById("resGentle");
if ((gentleElement.value == "男" || gentleElement.value == "女") || (gentleElement.value == "m" || gentleElement.value == "f") || (gentleElement.value == "male" || gentleElement.value == "famale")) {
//性別判斷是否在：男、女、male、famale、m、f 之內(nèi)
resultElement.innerHTML = "";
return true;
}
else {
resultElement.innerHTML = "性別判斷是否在：男、女、male、famale、m、f 之內(nèi)！";
return false;
}
}
function checkAge() {
var ageElement = document.getElementById("age");
var resultElement = document.getElementById("resAge");
if (parseInt(ageElement.value) > 0 && parseInt(ageElement.value) <= 150) {
//如果年齡在0~150之間
resultElement.innerHTML = "";
return true;
}
else {
resultElement.innerHTML = "年齡在0~150之間！";
return false;
}
}
function checkMail() {
var mailElement = document.getElementById("mail");
var regExp = /[^a-z0-9_]/gi; // 匹配非字母、數(shù)字、下劃線的字符
var regExp2 = /[a-z]/gi; // 匹配字母
var resultElement = document.getElementById("resMail");
if (!mailElement.value.match(regExp)) {//如果出現(xiàn)非字母、數(shù)字、下劃線的字符
resultElement.innerHTML = "郵箱地址不正確！";
return false;
}
else {
if (mailElement.value.indexOf(".") - mailElement.value.indexOf("@") >= 2) {
resultElement.innerHTML = "";
return true;
}
else {
resultElement.innerHTML = "郵箱地址不正確！";
return false;
}
}
}
function checkTel() {
var telElement = document.getElementById("tel");
var regExp = /\d{7,12}/g;// 匹配7~12位電話數(shù)字
var regExp2 = /[^0-9]/g; // 是否有數(shù)字以外的字符
var resultElement = document.getElementById("resTel");
if (telElement.value.match(regExp) && telElement.value.length <= 12) {
if (telElement.value.match(regExp2)) {
resultElement.innerHTML = "電話號碼為純數(shù)字，且位于7~12位之間！";
return false;
}
else {
resultElement.innerHTML = "";
return true;
}
}
else {
resultElement.innerHTML = "電話號碼為純數(shù)字，且位于7~12位之間！"; //!telElement.value.match(regExp2) &&
return false;
}
}
function checkAll() {
if (checkName() && checkPwd() && checkPwd2() && checkGentle() && checkAge() && checkMail() && checkTel()) {
alert("恭喜,填寫的信息正確！");
}
else {
alert("錯誤,請確認(rèn)填寫的信息是否正確！");
}
}
//當(dāng)窗體加載完成時執(zhí)行
window.onload = function () {
var inputElements = document.getElementsByTagName("input");
inputElements[0].onblur = function () {
checkName();
}
inputElements[1].onblur = function () {
checkPwd();
}
inputElements[2].onblur = function () {
checkPwd2();
}
inputElements[3].onblur = function () {
checkGentle();
}
inputElements[4].onblur = function () {
checkAge();
}
inputElements[5].onblur = function () {
checkMail();
}
inputElements[6].onblur = function () {
checkTel();
}
inputElements[7].onclick = function () {
checkAll();
}
}
</script>
<style type="text/css">
body{ font-size:16px;
font-weight:600;
font-family:微軟雅黑;
line-height:30px;
}
thead{ text-align:center;
}
input{ width:150px;
}
input[type=button]{ height:38px;
font-size:20px;
font-weight:600;
}
ul{ border:1px solid #c3c3c3;
}
li{ list-style-type:square;
}
</style>
</head>
<body>
<form action="" method="post">
<table>
<thead><tr><td colspan="2"><h2>表單驗證</h2></td></tr></thead>
<tr><td>會員名：</td><td><input type="text" id="name" /></td><td id="resName"></td></tr>
<tr><td>密碼：</td><td><input type="password" id="pwd" /></td><td id="resPwd"></td></tr>
<tr><td>重復(fù)密碼：</td><td><input type="password" id="pwd2" /></td><td id="resPwd2"></td></tr>
<tr><td>性別：</td><td><input type="text" id="gentle" /></td><td id="resGentle"></td></tr>
<tr><td>年齡：</td><td><input type="text" id="age" /></td><td id="resAge"></td></tr>
<tr><td>電子郵件：</td><td><input type="text" id="mail" /></td><td id="resMail"></td></tr>
<tr><td>聯(lián)系號碼：</td><td><input type="text" id="tel" /></td><td id="resTel"></td></tr>
<tr><td></td><td><input type="button" value="注冊" id="checkAll" /></td></tr>
</table>
</form>
<ul>
<li>會員名為字母、數(shù)字、下劃線組成，并且字母為開頭，長度不小于6</li>
<li>密碼為字母、數(shù)字、下劃線組成，并且必須有字母、數(shù)字，長度不小于6</li>
<li>性別判斷是否在：男、女、male、famale、m、f 之內(nèi)</li>
<li>年齡在0~150之間</li>
<li>郵箱地址</li>
<li>電話號碼為純數(shù)字，且位于7~12位之間！</li>
</ul>
</body>
</html>
PS：這里再為大家提供2款非常方便的正則表達式工具供大家參考使用：
JavaScript正則表達式在線測試工具：
http://tools.jb51.net/regex/javascript
正則表達式在線生成工具：
http://tools.jb51.net/regex/create_reg
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript正則表達式技巧大全》、《JavaScript替換操作技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript中json操作技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
layui默認(rèn)選中table的CheckBox復(fù)選框方法
今天小編就為大家分享一篇layui默認(rèn)選中table的CheckBox復(fù)選框方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這里給大家分享的是本人近期學(xué)習(xí)與使用javascript之后總結(jié)出來的一些經(jīng)驗和心得，雖然目前只有5點，但以后會慢慢更新，希望對大家能有所幫助。2015-01-01
由于現(xiàn)在的很多用戶的分辨率問題，導(dǎo)致很多廣告會遮擋內(nèi)容或者對于不同分辨率的用戶不同的css樣式，就可以參考下面的代碼2013-07-07
JavaScript String 對象常用方法總結(jié)
下面小編就為大家?guī)硪黄狫avaScript String 對象常用方法總結(jié)。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考2016-04-04
據(jù)說，對于網(wǎng)頁開發(fā)人員來說，F(xiàn)irebug是Firefox瀏覽器中最好的插件之一。2010-08-08
BootstrapValidator實現(xiàn)表單驗證功能
這篇文章主要為大家詳細介紹了BootstrapValidator實現(xiàn)表單驗證功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
JS字符串分割方法整理匯總示例講解（3種截取方法和6個輔助方法）
JavaScript在開發(fā)中常常會需要截取字符串，而JS提供了slice()?、substring()、substr()?3種方法實現(xiàn)截取操作。另外還有字符串相關(guān)的6種輔助方法：indexOf()、lastIndexOf()、split()、join()、concat()、charAt()?。2023-02-02
JS實現(xiàn)根據(jù)詳細地址獲取經(jīng)緯度功能示例
這篇文章主要介紹了JS實現(xiàn)根據(jù)詳細地址獲取經(jīng)緯度功能,涉及javascript與百度地圖接口交互進行地址經(jīng)緯度查詢的相關(guān)操作技巧,需要的朋友可以參考下2019-04-04
Javascript 拖拽的一些高級的應(yīng)用(逐行分析代碼，讓你輕松了拖拽的原理)
這篇文章主要介紹了Javascript 拖拽的一些高級的應(yīng)用(逐行分析代碼，讓你輕松了拖拽的原理),需要的朋友可以參考下2015-01-01
這篇文章主要介紹了微信小程序國際化探索實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05