表單驗(yàn)證正則表達(dá)式實(shí)例代碼詳解
更新時(shí)間：2015年11月09日 13:42:20 作者：七秒鐘記憶~
這篇文章主要介紹了表單驗(yàn)證正則表達(dá)式實(shí)例代碼詳解的相關(guān)資料,需要的朋友可以參考下
表單驗(yàn)證正則表達(dá)式具體內(nèi)容如下所示：
首先給大家解釋一些符號(hào)相關(guān)的意義
1. /^$/ 這個(gè)是個(gè)通用的格式。
^ 匹配輸入字符串的開(kāi)始位置；$匹配輸入字符串的結(jié)束位置
2. 里面輸入需要實(shí)現(xiàn)的功能。
* 匹配前面的子表達(dá)式零次或多次；
+ 匹配前面的子表達(dá)式一次或多次；
？匹配前面的子表達(dá)式零次或一次；
\d 匹配一個(gè)數(shù)字字符，等價(jià)于[0-9]
下面通過(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í)例代碼詳解的全部敘述，希望大家喜歡。
您可能感興趣的文章:
- 詳解正則表達(dá)式表單驗(yàn)證實(shí)例
- java正則表達(dá)式表單驗(yàn)證類工具類(驗(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)文章
基于Bootstrap的Metronic框架實(shí)現(xiàn)條碼和二維碼的生成及打印處理操作
這篇文章主要介紹了基于Bootstrap的Metronic框架實(shí)現(xiàn)條碼和二維碼的生成及打印處理操作的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08
使用Sticky組件實(shí)現(xiàn)帶sticky效果的tab導(dǎo)航和滾動(dòng)導(dǎo)航的方法
sticky組件，通常應(yīng)用于導(dǎo)航條或者工具欄，當(dāng)網(wǎng)頁(yè)在某一區(qū)域滾動(dòng)的時(shí)候，將導(dǎo)航條或工具欄這類元素固定在頁(yè)面頂部或底部，方便用戶快速進(jìn)行這類元素提供的操作2016-03-03
layui 數(shù)據(jù)表格+分頁(yè)+搜索+checkbox+緩存選中項(xiàng)數(shù)據(jù)的方法
今天小編就為大家分享一篇layui 數(shù)據(jù)表格+分頁(yè)+搜索+checkbox+緩存選中項(xiàng)數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
TypeScript使用vscode監(jiān)視代碼編譯的過(guò)程
這篇文章主要介紹了TypeScript使用vscode監(jiān)視代碼編譯,使用tsc 文件名稱可以將ts文件轉(zhuǎn)化為js文件，js文件可以引入在html文件中直接使用，需要的朋友可以參考下2021-12-12
use jscript with List Proxy Server Information
use jscript with List Proxy Server Information...2007-06-06
IE中JS跳轉(zhuǎn)丟失referrer問(wèn)題的2個(gè)解決方法
這篇文章主要介紹了IE中JS跳轉(zhuǎn)丟失referrer問(wèn)題的2個(gè)解決方法,算是IE的一個(gè)BUG吧,本文提供了2個(gè)方法解決這個(gè)問(wèn)題,需要的朋友可以參考下2014-07-07
在JavaScript中，和JAVA類似，也提供了對(duì)于基本數(shù)據(jù)類型的包裝類型。例如Number、Boolean、String類型。下面我們就來(lái)詳細(xì)探討下吧。2015-06-06
這篇文章主要介紹了js中獲取一個(gè)月有多少天的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
javascript多行字符串的簡(jiǎn)單實(shí)現(xiàn)方式
之前我們給大家講訴過(guò)javascript多行字符串的7種解決辦法，今天來(lái)給大家分享一個(gè)更簡(jiǎn)單的方法，非常的實(shí)用，大家一定要仔細(xì)看看哦。2015-05-05
解析利用javascript如何判斷一個(gè)數(shù)為素?cái)?shù)
本文主要分享了利用javascript如何判斷一個(gè)數(shù)為素?cái)?shù)的具體實(shí)例代碼，有需要的朋友可以作為參考看下2016-12-12