詳解正則表達(dá)式表單驗(yàn)證實(shí)例
更新時間：2016年03月09日 08:50:00 作者：極道先生
這篇文章主要為大家詳細(xì)介紹了正則表達(dá)式表單驗(yàn)證實(shí)例，如何進(jìn)行表單驗(yàn)證，感興趣的小伙伴們可以參考一下
先看看效果圖：
首先給大家解釋一些符號相關(guān)的意義
* 匹配前面的子表達(dá)式零次或多次；
^ 匹配輸入字符串的開始位置；$匹配輸入字符串的結(jié)束位置
1. /^$/ 這個是個通用的格式。
2. 里面輸入需要實(shí)現(xiàn)的功能。
\d 匹配一個數(shù)字字符，等價于[0-9]
+ 匹配前面的子表達(dá)式一次或多次；
？匹配前面的子表達(dá)式零次或一次；
下面通過一段代碼給大家分析表單驗(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="以字母開頭的-位的字符";
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="用戶名字符長度必須介于到個之間";
// 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="(必填項)用戶名不能為空";
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="(必填項)介于-位的非特殊字符";
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="用戶名密碼字符長度必須介于到個之間";
// 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="(必填項)用戶名密碼不能為空";
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="(必填項)介于-位的非特殊字符";
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="(必填項)用戶名密碼不能為空";
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="請輸入你位數(shù)的手機(jī)號碼";
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ī)號碼不能為空";
resultObj.style.color="red";
}else if (!reg.test(pre)) {
resultObj.innerHTML="手機(jī)號碼字符輸入不合法";
resultObj.style.color="red";
}else {
resultObj.innerHTML="ok";
resultObj.style.color="green";
}
}
function focus_Tel() {
var resultObj=document.getElementById('result_Tel');
resultObj.innerHTML="請輸入你的座機(jī)號碼";
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ī)號碼不能為空";
resultObj.style.color="red";
}else if (!reg.test(pre)) {
resultObj.innerHTML="座機(jī)號碼字符輸入不合法";
resultObj.style.color="red";
}else {
resultObj.innerHTML="ok";
resultObj.style.color="green";
}
}
function focus_mail() {
var resultObj=document.getElementById('result_mail');
resultObj.innerHTML="請輸入你的郵箱號碼";
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="郵箱號碼不能為空";
resultObj.style.color="red";
}else if (!reg.test(pre)) {
resultObj.innerHTML="郵箱號碼字符輸入不合法";
resultObj.style.color="red";
}else {
resultObj.innerHTML="ok";
resultObj.style.color="green";
}
}
function focus_ID() {
var resultObj=document.getElementById('result_ID');
resultObj.innerHTML="(必填項)請輸入你位的二代身份證號碼";
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="(必填項)二代身份證號碼字符不能為空";
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 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會員注冊</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ī)號碼：</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ī)號碼：</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">郵箱號碼：</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="提交注冊" />
<input type="reset" value="重置資料" /></td>
<td></td>
</tr>
</table>
</form>
</body>
</html>
以上內(nèi)容就是表單驗(yàn)證正則表達(dá)式實(shí)例代碼，希望對大家有幫助。
相關(guān)文章
正則表達(dá)式中?=、?!、?＜=、?＜!、?:的理解與應(yīng)用舉例
正則表達(dá)式就是用事先定義好的一些特定字符、及這些特定字符的組合,組成一個規(guī)則字符串,這個規(guī)則字符串表達(dá)對字符串的一種過濾邏輯,這篇文章主要給大家介紹了關(guān)于正則表達(dá)式中?=、?!、?＜=、?＜!、?:的理解與應(yīng)用舉例的相關(guān)資料,需要的朋友可以參考下2024-03-03
正則表達(dá)式就是一種強(qiáng)大而靈活的文本處理工具,正則可以很好的解決這類字符串校驗(yàn)問題,下面這篇文章主要給大家介紹了關(guān)于正則表達(dá)式之字符串模式匹配的相關(guān)資料,需要的朋友可以參考下2022-04-04
這篇文章給大家收集整理了用戶名和密碼等15個常用的js正則表達(dá)式，需要的朋友參考下吧2017-06-06
基于xpath選擇器、PyQuery、正則表達(dá)式的格式清理工具詳解
這篇文章主要介紹了基于xpath選擇器、PyQuery、正則表達(dá)式的格式清理工具，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-09-09
第一次遇到這個問題, 是大概兩年前寫代碼高亮, 從當(dāng)時的解決方案到現(xiàn)在一共有三代, 嘎嘎. 覺得還是算越來越好的2020-04-04
匹配5到10位無重復(fù)數(shù)字的正則表達(dá)式
對于有重復(fù)的5到10位數(shù)字可以使用\d{5,10} 這樣的正則，無重復(fù)的5到10位數(shù)字我考慮了一下還不會，最然只好查網(wǎng)上，找了段代碼，分享給需要的朋友2012-10-10
查找html中有id屬性的標(biāo)簽，說具體點(diǎn)就是尖括號中還有id=""的html標(biāo)簽2012-10-10
這篇文章給大家介紹java正則表達(dá)式入門基礎(chǔ)篇， 由于正則表達(dá)式是一個很龐雜的體系，所以我僅例舉些入門的概念，更多的請參閱相關(guān)書籍及自行摸索。感興趣的朋友一起跟著小編來看看吧2015-10-10
php 正則表達(dá)式的子模式詳解,學(xué)習(xí)php的朋友可以參考下2012-06-06
PHP html標(biāo)簽正則替換并可自定義正則規(guī)則
PHP有個去除HTML標(biāo)簽的函數(shù)strip_tags，不過對于某些特殊符號不好使，下面這個函數(shù)的功能非常強(qiáng)大,同時用戶還可以根據(jù)自己的需要進(jìn)行正則替換.2010-05-05