表單驗(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è)通用的格式。
^ 匹配輸入字符串的開始位置；$匹配輸入字符串的結(jié)束位置
2. 里面輸入需要實(shí)現(xiàn)的功能。
* 匹配前面的子表達(dá)式零次或多次；
+ 匹配前面的子表達(dá)式一次或多次；
？匹配前面的子表達(dá)式零次或一次；
\d 匹配一個(gè)數(shù)字字符，等價(jià)于[0-9]
下面通過一段代碼給大家分析表單驗(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="用戶名字符長(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í)例代碼詳解的全部敘述，希望大家喜歡。
相關(guān)文章
這篇文章主要為大家介紹了如何利用JavaScript實(shí)現(xiàn)開心消消樂小游戲,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
寫過JavaScript的都知道,JS中的this相對(duì)來講是比較難以捉摸的,尤其在一些復(fù)雜的場(chǎng)景下的指向總是讓人摸不著頭腦,所以這篇文章我們就來系統(tǒng)的學(xué)習(xí)和研究一下this的綁定規(guī)則,需要的朋友可以參考下2024-04-04
原生javascript中this幾種常見用法總結(jié)
這篇文章主要介紹了原生javascript中this幾種常見用法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript中this的功能、常見用法及操作注意事項(xiàng),需要的朋友可以參考下2020-02-02
JavaScript實(shí)現(xiàn)QQ列表展開收縮擴(kuò)展功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)QQ列表展開收縮擴(kuò)展功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
js 打開新頁(yè)面在屏幕中間的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨s 打開新頁(yè)面在屏幕中間的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要介紹了js實(shí)現(xiàn)防止被iframe的方法,實(shí)例分析了兩種比較常用的javascript防止頁(yè)面被iframe的技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-07-07
var?let?const關(guān)鍵字之間的區(qū)別及使用場(chǎng)景示例詳解
這篇文章主要為大家介紹了var?let?const關(guān)鍵字之間的區(qū)別及使用場(chǎng)景示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12
用javascript動(dòng)態(tài)調(diào)整iframe高度的代碼
用javascript動(dòng)態(tài)調(diào)整iframe高度的代碼...2007-04-04
JavaScript實(shí)現(xiàn)秒數(shù)轉(zhuǎn)換時(shí)間的兩種格式
在開發(fā)過程中,經(jīng)常會(huì)遇到后臺(tái)接口返回的是以秒為單位的數(shù)據(jù),而我們需要將其轉(zhuǎn)換為一個(gè)更加易讀的格式,本文將介紹如何實(shí)現(xiàn)秒數(shù)轉(zhuǎn)時(shí)間的兩種格式,有需要的可以參考下2025-02-02
閉包的功能強(qiáng)大，但如果沒有正確理解閉包的概念，其結(jié)果往往出乎人的意料。例如，下面是一個(gè)較常見的問題2009-03-03