詳解正則表達(dá)式表單驗(yàn)證實(shí)例
更新時(shí)間：2016年03月09日 08:50:00 作者：極道先生
這篇文章主要為大家詳細(xì)介紹了正則表達(dá)式表單驗(yàn)證實(shí)例，如何進(jìn)行表單驗(yàn)證，感興趣的小伙伴們可以參考一下
先看看效果圖：
首先給大家解釋一些符號(hào)相關(guān)的意義
* 匹配前面的子表達(dá)式零次或多次；
^ 匹配輸入字符串的開(kāi)始位置；$匹配輸入字符串的結(jié)束位置
1. /^$/ 這個(gè)是個(gè)通用的格式。
2. 里面輸入需要實(shí)現(xiàn)的功能。
\d 匹配一個(gè)數(shù)字字符，等價(jià)于[0-9]
+ 匹配前面的子表達(dá)式一次或多次；
？匹配前面的子表達(dá)式零次或一次；
下面通過(guò)一段代碼給大家分析表單驗(yàn)證正則表達(dá)式，具體代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-">
<title>正則驗(yàn)證常用表單方法</title>
<script type="text/javascript">
function focus_username() {
var resultObj=document.getElementById('result_username');
resultObj.innerHTML="以字母開(kāi)頭的-位的字符";
resultObj.style.color="blue";
document.form.username.style="border:px solid red";
}
// function blur_username () {
//第一種方法：
// var resultObj=document.getElementById('result_username')
// if (document.form.username.value=='') {
// resultObj.innerHTML="用戶名不能為空";
// resultObj.style.color="red";
// return false;
// }else if (document.form.username.value.length<||document.form.username.value.length>) {
// resultObj.innerHTML="用戶名字符長(zhǎng)度必須介于到個(gè)之間";
// resultObj.style.color="red";
// return false;
// }else{
// resultObj.innerHTML="ok";
// resultObj.style.color="green";
// }
// }
function blur_username () {
//第二種方法：
var resultObj=document.getElementById('result_username')
var pre=document.form.username.value;
var reg=/^[a-zA-Z]\w{,}$/;
if (pre=='') {
resultObj.innerHTML="(必填項(xiàng))用戶名不能為空";
resultObj.style.color="red";
return false;
}else if (!reg.test(pre)) {
resultObj.innerHTML="用戶名字符輸入不合法";
resultObj.style.color="red";
return false;
}else{
resultObj.innerHTML="ok";
resultObj.style.color="green";
return true;
}
}
function focus_userpwd() {
var resultObj=document.getElementById('result_userpwd');
resultObj.innerHTML="(必填項(xiàng))介于-位的非特殊字符";
resultObj.style.color="blue";
document.form.userpwd.style="border:px solid red";
}
// function blur_userpwd () {
// var resultObj=document.getElementById('result_userpwd')
// if (document.form.userpwd.value=='') {
// resultObj.innerHTML="用戶名密碼不能為空";
// resultObj.style.color="red";
// return false;
// }else if (document.form.userpwd.value.length<||document.form.userpwd.value.length>) {
// resultObj.innerHTML="用戶名密碼字符長(zhǎng)度必須介于到個(gè)之間";
// resultObj.style.color="red";
// return false;
// }else{
// resultObj.innerHTML="ok";
// resultObj.style.color="green";
// return true;
// }
// }
function blur_userpwd () {
var resultObj=document.getElementById('result_userpwd')
var pre=document.form.userpwd.value;
var reg=/^\w{,}$/;
if (pre=='') {
resultObj.innerHTML="(必填項(xiàng))用戶名密碼不能為空";
resultObj.style.color="red";
return false;
}else if (!reg.test(pre)) {
resultObj.innerHTML="用戶名密碼字符輸入不合法";
resultObj.style.color="red";
return false;
}else{
resultObj.innerHTML="ok";
resultObj.style.color="green";
return true;
}
}
function focus_userpwd() {
var resultObj=document.getElementById('result_userpwd');
resultObj.innerHTML="(必填項(xiàng))介于-位的非特殊字符";
resultObj.style.color="blue";
document.form.userpwd.style="border:px solid red";
}
// function blur_userpwd () {
// var resultObj=document.getElementById('result_userpwd')
// if (document.form.userpwd.value=='') {
// resultObj.innerHTML="用戶名密碼不能為空";
// resultObj.style.color="red";
// return false;
// }else if (document.form.userpwd.value!=document.form.userpwd.value) {
// resultObj.innerHTML="兩次用戶名密碼輸入不一致";
// resultObj.style.color="red";
// return false;
// }else{
// resultObj.innerHTML="ok";
// resultObj.style.color="green";
// return true;
// }
// }
function blur_userpwd () {
var resultObj=document.getElementById('result_userpwd')
var pre=document.form.userpwd.value;
var reg=/^\w{,}$/;
if (pre=='') {
resultObj.innerHTML="(必填項(xiàng))用戶名密碼不能為空";
resultObj.style.color="red";
return false;
}else if (!reg.test(pre)) {
resultObj.innerHTML="用戶名密碼字符輸入不合法";
resultObj.style.color="red";
return false;
}else if(document.form.userpwd.value!=document.form.userpwd.value){
resultObj.innerHTML="兩次用戶名密碼輸入不一致";
resultObj.style.color="red";
return false;
}else {resultObj.innerHTML="ok";
resultObj.style.color="green";
return true;
}
}
function focus_Mobile() {
var resultObj=document.getElementById('result_Mobile');
resultObj.innerHTML="請(qǐng)輸入你位數(shù)的手機(jī)號(hào)碼";
resultObj.style.color="blue";
document.form.Mobile.style="border:px solid red";
}
function blur_Mobile() {
var resultObj=document.getElementById('result_Mobile')
var pre=document.form.Mobile.value;
var reg=/^[||][-]{}$/;
if (pre=='') {
resultObj.innerHTML="手機(jī)號(hào)碼不能為空";
resultObj.style.color="red";
}else if (!reg.test(pre)) {
resultObj.innerHTML="手機(jī)號(hào)碼字符輸入不合法";
resultObj.style.color="red";
}else {
resultObj.innerHTML="ok";
resultObj.style.color="green";
}
}
function focus_Tel() {
var resultObj=document.getElementById('result_Tel');
resultObj.innerHTML="請(qǐng)輸入你的座機(jī)號(hào)碼";
resultObj.style.color="blue";
document.form.Tel.style="border:px solid red";
}
function blur_Tel() {
var resultObj=document.getElementById('result_Tel')
var pre=document.form.Tel.value;
var reg=/^{}[-]{,}\-[]?[-]{}$/;
if (pre=='') {
resultObj.innerHTML="座機(jī)號(hào)碼不能為空";
resultObj.style.color="red";
}else if (!reg.test(pre)) {
resultObj.innerHTML="座機(jī)號(hào)碼字符輸入不合法";
resultObj.style.color="red";
}else {
resultObj.innerHTML="ok";
resultObj.style.color="green";
}
}
function focus_mail() {
var resultObj=document.getElementById('result_mail');
resultObj.innerHTML="請(qǐng)輸入你的郵箱號(hào)碼";
resultObj.style.color="blue";
document.form.mail.style="border:px solid red";
}
function blur_mail() {
var resultObj=document.getElementById('result_mail');
var pre=document.form.mail.value;
var reg=/^[a-zA-Z-][a-zA-Z-\._]+@[a-z-]+\.(com)(\.(cn))?$/;
if (pre=='') {
resultObj.innerHTML="郵箱號(hào)碼不能為空";
resultObj.style.color="red";
}else if (!reg.test(pre)) {
resultObj.innerHTML="郵箱號(hào)碼字符輸入不合法";
resultObj.style.color="red";
}else {
resultObj.innerHTML="ok";
resultObj.style.color="green";
}
}
function focus_ID() {
var resultObj=document.getElementById('result_ID');
resultObj.innerHTML="(必填項(xiàng))請(qǐng)輸入你位的二代身份證號(hào)碼";
resultObj.style.color="blue";
document.form.ID.style="border:px solid red";
}
function blur_ID() {
var resultObj=document.getElementById('result_ID');
var pre=document.form.ID.value;
var reg=/^[-]{}[-x]$/;
if (pre=='') {
resultObj.innerHTML="(必填項(xiàng))二代身份證號(hào)碼字符不能為空";
resultObj.style.color="red";
return false;
}else if (!reg.test(pre)) {
resultObj.innerHTML="二代身份證號(hào)碼字符輸入不合法";
resultObj.style.color="red";
return false;
}else {
resultObj.innerHTML="ok";
resultObj.style.color="green";
return true;
}
}
function checkForm(){
var flag_username=blur_username();
var flag_userpwd=blur_userpwd();
var flag_userpwd=blur_userpwd();
var flag_ID=blur_ID();
if (flag_username==true&&flag_userpwd==true&&flag_userpwd==true&&flag_ID==true) {
return true;
}else{
return false;
}
}
</script>
<style type="text/css">
body{background-image: url(images/.jpg);background-size: cover;}
table{margin-left: px;margin-top: px;background-image: url(images/.jpg);background-size: cover;box-shadow: px px px #C}
.vip{font-size: px;}
</style>
</head>
<body>
<form name="form" action=".php" method="post" onsubmit="return checkForm()">
<table width="px" border="px" bordercolor="red" cellpadding="px" cellspacing="px" align="center" >
<tr>
<th colspan="" class="vip">VIP會(huì)員注冊(cè)</th>
</tr>
<tr>
<td width="px" align="right" >用戶名：</td>
<td width="px"><input type="text" name="username" onfocus="focus_username()" onblur="blur_username()" ></td>
<td><div width="px" id="result_username"></div></td>
</tr>
<tr>
<td align="right">密碼：</td>
<td><input type="password" name="userpwd" onfocus="focus_userpwd()" onblur="blur_userpwd()" /></td>
<td><div id="result_userpwd"></div></td>
</tr>
<tr>
<td align="right">確認(rèn)密碼：</td>
<td><input type="password" name="userpwd" onfocus="focus_userpwd()" onblur="blur_userpwd()"/></td>
<td><div id="result_userpwd"></div></td>
</tr>
<tr>
<td align="right">手機(jī)號(hào)碼：</td>
<td><input type="text" name="Mobile" onfocus="focus_Mobile()" onblur="blur_Mobile()"/></td>
<td><div id="result_Mobile"></div></td>
</tr>
<tr>
<td align="right">座機(jī)號(hào)碼：</td>
<td><input type="text" name="Tel" onfocus="focus_Tel()" onblur="blur_Tel()"/></td>
<td><div id="result_Tel"></div></td>
</tr>
<tr>
<td align="right">郵箱號(hào)碼：</td>
<td><input type="text" name="mail" onfocus="focus_mail()" onblur="blur_mail()"/></td>
<td><div id="result_mail"></div></td>
</tr>
<tr>
<td align="right">二代身份證：</td>
<td><input type="text" name="ID" onfocus="focus_ID()" onblur="blur_ID()"/></td>
<td><div id="result_ID"></div></td>
</tr>
<tr>
<td align="center" colspan=""><input type="submit" value="提交注冊(cè)" />
<input type="reset" value="重置資料" /></td>
<td></td>
</tr>
</table>
</form>
</body>
</html>
以上內(nèi)容就是表單驗(yàn)證正則表達(dá)式實(shí)例代碼，希望對(duì)大家有幫助。
您可能感興趣的文章:
- 表單驗(yàn)證正則表達(dá)式實(shí)例代碼詳解
- java正則表達(dá)式表單驗(yàn)證類(lèi)工具類(lèi)(驗(yàn)證郵箱、手機(jī)號(hào)碼、qq號(hào)碼等)
- 通過(guò)正則表達(dá)式實(shí)現(xiàn)表單驗(yàn)證是否為中文
- JavaScript常用的正則表達(dá)式表單驗(yàn)證代碼
- js 常用正則表達(dá)式表單驗(yàn)證代碼
- 常用正則表達(dá)式范例 方便表單驗(yàn)證
- JavaScript 使用正則表達(dá)式進(jìn)行表單驗(yàn)證的示例代碼
- JavaScript 表單驗(yàn)證正則表達(dá)式大全[推薦]
- php使用ereg驗(yàn)證文件上傳的方法
- ThinkPHP實(shí)現(xiàn)帶驗(yàn)證碼的文件上傳功能實(shí)例
- 表單正則驗(yàn)證及文件上傳驗(yàn)證功能
相關(guān)文章
正則表達(dá)式斷言、巡視（Assertions）、正向斷言、反向斷言介紹
這篇文章主要介紹了正則表達(dá)式斷言、巡視（Assertions）、正向斷言、反向斷言介紹,需要的朋友可以參考下2015-10-10
js正則匹配markdown里的圖片標(biāo)簽的實(shí)現(xiàn)
這篇文章主要介紹了js正則匹配markdown里的圖片標(biāo)簽的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
密碼強(qiáng)度的正則表達(dá)式兩種方案JS總結(jié)篇
本文給出了兩個(gè)密碼強(qiáng)度的正則表達(dá)式方案，一個(gè)簡(jiǎn)單，一個(gè)更復(fù)雜和安全。并分別給出了兩個(gè)方案的解析和測(cè)試程序。對(duì)密碼強(qiáng)度正則表達(dá)式的兩種方案感興趣的朋友跟隨腳本之家一起看看吧2018-03-03
正則表達(dá)式是一種文本模式，包括普通字符（例如，a 到 z 之間的字母）和特殊字符（稱(chēng)為“元字符”）。模式描述在搜索文本時(shí)要匹配的一個(gè)或多個(gè)字符串。2008-05-05
這篇文章繼續(xù)介紹了更多關(guān)于正則表達(dá)式知識(shí)點(diǎn)，幫助大家更好的認(rèn)識(shí)正則表達(dá)式，從而更好的掌握它，感興趣的小伙伴們可以參考一下2015-10-10
正則表達(dá)式學(xué)習(xí)教程之回溯引用backreference詳解
這篇文章主要介紹了正則表達(dá)式學(xué)習(xí)教程之回溯引用backreference,結(jié)合實(shí)例形式詳細(xì)分析了回溯引用的概念、功能及實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-01-01
去除內(nèi)容中的html...2006-06-06
解決正則表示式匹配($regex)引起的一次mongo數(shù)據(jù)庫(kù)cpu占用率高的問(wèn)題
這篇文章主要介紹了由正則表示式匹配($regex)引起的一次mongo數(shù)據(jù)庫(kù)cpu占用率高的問(wèn)題,本文通過(guò)實(shí)例給大家分析的非常詳細(xì)，需要的朋友可以參考下2019-11-11
用正則表達(dá)式過(guò)濾html代碼...2006-06-06
iOS中使用正則表達(dá)式NSRegularExpression 來(lái)驗(yàn)證textfiled輸入的內(nèi)容
一個(gè)正則表達(dá)式（regexp）是由元字符和文字?jǐn)?shù)字的文本字符，或者“文字的”（abc，123，及其他）混合組合而成的文本模式。 該類(lèi)型用于匹配文本字符——并附有匹配的結(jié)果，是成功還是失敗。 Regexps 主要用于規(guī)則文本匹配以及搜索和替換。2015-09-09