詳解正則表達(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="用戶(hù)名不能為空";
// resultObj.style.color="red";
// return false;
// }else if (document.form.username.value.length<||document.form.username.value.length>) {
// resultObj.innerHTML="用戶(hù)名字符長(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))用戶(hù)名不能為空";
resultObj.style.color="red";
return false;
}else if (!reg.test(pre)) {
resultObj.innerHTML="用戶(hù)名字符輸入不合法";
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="用戶(hù)名密碼不能為空";
// resultObj.style.color="red";
// return false;
// }else if (document.form.userpwd.value.length<||document.form.userpwd.value.length>) {
// resultObj.innerHTML="用戶(hù)名密碼字符長(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))用戶(hù)名密碼不能為空";
resultObj.style.color="red";
return false;
}else if (!reg.test(pre)) {
resultObj.innerHTML="用戶(hù)名密碼字符輸入不合法";
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="用戶(hù)名密碼不能為空";
// resultObj.style.color="red";
// return false;
// }else if (document.form.userpwd.value!=document.form.userpwd.value) {
// resultObj.innerHTML="兩次用戶(hù)名密碼輸入不一致";
// 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))用戶(hù)名密碼不能為空";
resultObj.style.color="red";
return false;
}else if (!reg.test(pre)) {
resultObj.innerHTML="用戶(hù)名密碼字符輸入不合法";
resultObj.style.color="red";
return false;
}else if(document.form.userpwd.value!=document.form.userpwd.value){
resultObj.innerHTML="兩次用戶(hù)名密碼輸入不一致";
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" >用戶(hù)名：</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ì)大家有幫助。
您可能感興趣的文章:
相關(guān)文章
正則表達(dá)式中?=、?!、?＜=、?＜!、?:的理解與應(yīng)用舉例
正則表達(dá)式就是用事先定義好的一些特定字符、及這些特定字符的組合,組成一個(gè)規(guī)則字符串,這個(gè)規(guī)則字符串表達(dá)對(duì)字符串的一種過(guò)濾邏輯,這篇文章主要給大家介紹了關(guān)于正則表達(dá)式中?=、?!、?＜=、?＜!、?:的理解與應(yīng)用舉例的相關(guān)資料,需要的朋友可以參考下2024-03-03
正則表達(dá)式就是一種強(qiáng)大而靈活的文本處理工具,正則可以很好的解決這類(lèi)字符串校驗(yàn)問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于正則表達(dá)式之字符串模式匹配的相關(guān)資料,需要的朋友可以參考下2022-04-04
用戶(hù)名、密碼等15個(gè)常用的js正則表達(dá)式
這篇文章給大家收集整理了用戶(hù)名和密碼等15個(gè)常用的js正則表達(dá)式，需要的朋友參考下吧2017-06-06
基于xpath選擇器、PyQuery、正則表達(dá)式的格式清理工具詳解
這篇文章主要介紹了基于xpath選擇器、PyQuery、正則表達(dá)式的格式清理工具，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-09
第一次遇到這個(gè)問(wèn)題, 是大概兩年前寫(xiě)代碼高亮, 從當(dāng)時(shí)的解決方案到現(xiàn)在一共有三代, 嘎嘎. 覺(jué)得還是算越來(lái)越好的2020-04-04
匹配5到10位無(wú)重復(fù)數(shù)字的正則表達(dá)式
對(duì)于有重復(fù)的5到10位數(shù)字可以使用\d{5,10} 這樣的正則，無(wú)重復(fù)的5到10位數(shù)字我考慮了一下還不會(huì)，最然只好查網(wǎng)上，找了段代碼，分享給需要的朋友2012-10-10
查找html中有id屬性的標(biāo)簽，說(shuō)具體點(diǎn)就是尖括號(hào)中還有id=""的html標(biāo)簽2012-10-10
Java正則表達(dá)式入門(mén)基礎(chǔ)篇(新手必看)
這篇文章給大家介紹java正則表達(dá)式入門(mén)基礎(chǔ)篇， 由于正則表達(dá)式是一個(gè)很龐雜的體系，所以我僅例舉些入門(mén)的概念，更多的請(qǐng)參閱相關(guān)書(shū)籍及自行摸索。感興趣的朋友一起跟著小編來(lái)看看吧2015-10-10
php 正則表達(dá)式的子模式詳解,學(xué)習(xí)php的朋友可以參考下2012-06-06
PHP html標(biāo)簽正則替換并可自定義正則規(guī)則
PHP有個(gè)去除HTML標(biāo)簽的函數(shù)strip_tags，不過(guò)對(duì)于某些特殊符號(hào)不好使，下面這個(gè)函數(shù)的功能非常強(qiáng)大,同時(shí)用戶(hù)還可以根據(jù)自己的需要進(jìn)行正則替換.2010-05-05