使用正規表示式驗證登入頁面輸入是否符合要求_正規表示式
這篇文章主要介紹了使用正規表示式驗證登入頁面輸入是否符合要求的實例程式碼，在實際開發過程正規表示式起到了很重要的作用，正規表示式也比較難學，不易懂。需要的朋友可以參考下
先給大家展示下效果圖：
廢話不多說了，直接給大家貼程式碼了，具體程式碼如下圖：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="js/jquery-1.8.0.min.js"></script>
<script>
$(function() {
$("input[name='uname']").blur(function() { //失去焦点
var namestr = $(this).val();
var regstr = /^[\u4e00-\u9fa5]{2,4}$/;
if(!regstr.test(namestr)) {
$(this).parent().next().html("用户名必须是2-4个汉字").css("color", "red");
return false;
}
return true;
});
$("input[name = 'uname']").focus(function() { //获取焦点
$(this).val("");
$(this).parent().next().html("");
});
$("input[name='pwd']").blur(function() {
var pwdstr = $(this).val();
var regstr = /^\w{6}$/;
if(!regstr.test(pwdstr)) {
$(this).parent().next().html("密码必须是6位数字字母下划线").css("color", "red");
return false;
}
return true;
});
$("input[name='pwd']").focus(function() {
$(this).parent().next().html("");
});
$("input[name='birthday']").blur(function() {
var birthdaystr = $(this).val();
var regstr = /^(19|20)\d{2}-(1[0-2]|0?[1-9])-(3[0-1]|2[0-9]|0?[1-9])$/;
if(!regstr.test(birthdaystr)) {
$(this).parent().next().html("日期格式不正确").css("color", "red");
return false;
}
return true;
});
$("input[name='birthday']").focus(function() {
$(this).parent().next().html("");
});
$("input[name='email']").blur(function(){
var emailstr = $(this).val();
var regstr = /^[\w\-]+@[a-z0-9A-Z]+(\.[a-zA-Z]{2,3}){1,2}$/;
if(!regstr.test(emailstr)){
$(this).parent().next().html("邮箱格式不正确").css("color","red");
return false;
}
return true;
});
$("input[name='email']").focus(function(){
$(this).parent().next().html("");
});
});
</script>
<style>
body {
font-size: 12px;
}
#home {
background-color: beige;
border: solid 1px black;
width: 550px;
height: 185px;
margin: auto;
margin-top: 20px;
}
#head {
height: 135px;
}
#foot {
text-align: center;
}
.dl1 {
clear: both;
padding-left: 10px;
}
.dl1 dt {
float: left;
height: 30px;
width: 80px;
line-height: 30px;
}
.dl1 dd {
float: left;
height: 30px;
line-height: 30px;
/*width: 250px;*/
}
#btn_res {
background-image: url(img/reset.gif);
width: 80px;
height: 34px;
}
#btn_sub {
background-image: url(img/submit.gif);
width: 80px;
height: 34px;
}
</style>
<body>
<p id="home">
<p id="head">
<form action="" method="post">
<dl class="dl1">
<dt>用户名 : </dt>
<dd class="dd1"><input type="text" value="输入用户名" name="uname" /></dd>
<dd></dd>
</dl>
<dl class="dl1">
<dt>用户密码 : </dt>
<dd class="dd1"><input type="password" name="pwd" /></dd>
<dd></dd>
</dl>
<dl class="dl1">
<dt>出生日期 : </dt>
<dd class="dd1"><input type="text" name="birthday" /></dd>
<dd>yyyy-mm-dd</dd>
</dl>
<dl class="dl1">
<dt>用户邮箱 : </dt>
<dd><input type="text" name="email"/></dd>
<dd></dd>
</dl>
</form>
</p>
<p id="foot">
<input type="submit" value="" id="btn_sub" />
<input type="reset" value="" id="btn_res" />
</p>
</p>
</body>
</html>總結
#以上所述是小編給大家介紹的使用正規表示式驗證登入頁面輸入是否符合要求，希望對大家有幫助！ ！
相關推薦：
#
以上是使用正規表示式驗證登入頁面輸入是否符合要求_正規表示式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
小紅書怎麼登入以前的帳號？它換綁後原來號碼遺失了怎麼辦？
Mar 21, 2024 pm 09:41 PM
隨著社群媒體的快速發展，小紅書成為許多年輕人分享生活、探索新產品的熱門平台。在使用過程中，有時使用者可能會遇到登入先前帳號的困難。本文將詳細探討如何解決小紅書登入舊帳號的問題，以及如何應對更換綁定後可能遺失原帳號的情況。一、小紅書怎麼登入以前的帳號？ 1.找回密碼登入如果長時間未登入小紅書，可能導致帳號被系統回收。為了恢復存取權限，你可以嘗試透過找回密碼的方式重新登入帳號。操作步驟如下：（1）開啟小紅書App或官網，點選「登入」按鈕。 （2）選擇「找回密碼」。 （3）輸入你註冊帳號時所使用的手機號碼
wallpaperengine登入別的號碼後下載別人的桌布怎麼辦
Mar 19, 2024 pm 02:00 PM
當你在自己電腦上登過別人steam帳號之後，剛好這個別人的帳號也有wallpaper軟體，切換回自己帳號之後steam就會自動下載別人帳號訂閱的桌布，使用者可以透過關閉steam雲端同步解決。 wallpaperengine登入別的號碼後下載別人的桌布怎麼辦1、登陸你自己的steam帳號，在設定裡面找到雲端同步，關閉steam雲端同步。 2.登陸你之前登陸的別人的steam帳號，打開wallpaper創意工坊，找到訂閱內容，然後取消全部訂閱。 （以後防止找不到壁紙，可以先收藏再取消訂閱）3、切換回自己的stea
《陰陽師》茨木童子典藏皮膚登入即領，禪心雲外鏡新造型即將上線！
Jan 05, 2024 am 10:42 AM
山野間萬鬼嘶鳴，隱沒兵刃交接之聲，越嶺奔赴而來的鬼將，心中戰意洶湧，以炎火為號，率百鬼衝鋒迎戰。 【熾焱百煉•茨木童子典藏皮膚上線】鬼角熾焰怒燃，鎏金眼眸迸發桀駿戰意，白玉甲片裝飾戰袍，彰顯大妖不羈狂放的氣勢。雪白飄揚的袖擺上，赤焰攀附交織，金紋烙印其中，燃點一片緋艷妖異色彩。妖力凝聚而成的鬼火咆哮而至，烈焰令群巒為之震動，煉獄間歸來的妖鬼啊，一同懲戒進犯之人吧。 【專屬動態頭像框•熾焱百煉】【專屬插畫•焰火將魂】【傳記鑑賞】【獲取方式】茨木童子典藏皮膚·熾焱百煉將於12月28日維護後上架皮膚商店，
Discuz後台登入問題解決方法大揭秘
Mar 03, 2024 am 08:57 AM
Discuz後台登入問題解決方法大揭秘，需要具體程式碼範例隨著網路的快速發展，網站建置變得越來越普遍，而Discuz作為一款常用的論壇建站系統，受到了許多站長的青睞。然而，正是因為其功能強大，有時候我們在使用Discuz的過程中會遇到一些問題，例如後台登入問題。今天，我們就來大揭秘Discuz後台登入問題的解決方法，並且提供具體的程式碼範例，希望能幫助到有需要
快手電腦版怎麼登入-快手電腦版的登入方法
Mar 04, 2024 pm 03:30 PM
近日有一些小夥伴諮詢小編快手電腦版怎麼登入?下面就為大家帶來了快手電腦版的登入方法，有需要的小夥伴可以來了解了解哦。第一步：先在電腦的瀏覽器上百度搜尋快手官網。第二步：在搜尋結果清單裡面選取第一條。第三步：進入快手官網主頁面後，點選影片的選項。第四步：點選右上角的使用者頭像。步驟五：在彈出的登入選單裡面點選二維碼登入。步驟六：之後打開手機上的快手，點選左上角的圖示。第七步：點選二維碼標誌。第八步：在我的二維碼介面點擊右上角的掃描圖示之後，掃描電腦上的二維碼即可。第九步：最後電腦版的快手就登入成
如何在PDF中驗證簽名
Feb 18, 2024 pm 05:33 PM
我們通常會接收到政府或其他機構發送的PDF文件，有些文件有數位簽章。驗證簽名後，我們會看到SignatureValid訊息和一個綠色勾號。如果簽章未驗證，會顯示有效性未知。驗證簽名很重要，以下看看如何在PDF中進行驗證。如何在PDF中驗證簽名驗證PDF格式的簽名使其更可信，文件更容易被接受。您可以透過以下方式驗證PDF文件中的簽名。在AdobeReader中開啟PDF右鍵點選簽名，然後選擇顯示簽名屬性點選顯示簽署者憑證按鈕從「信任」標籤將簽名新增至「受信任的憑證」清單中點選驗證簽名以完成驗證讓
微信好友輔助驗證解封的詳細方法
Mar 25, 2024 pm 01:26 PM
1.打開微信進入後，點選搜尋圖標，輸入微信團隊，點選下方的服務進入。 2、進入後，點選左下方的自助工具的選項。 3、點選後，在上方的選項內，點選解封/申訴輔助驗證的選項。
夸克怎麼登入兩個設備
Feb 23, 2024 pm 10:55 PM
夸克怎麼登入兩個設備?夸克瀏覽器是支援同時登陸兩個設備的，但是多數的小夥伴不知道夸克瀏覽器如何登陸兩個設備，接下來就是小編為用戶帶來的夸克登陸兩個設備方法圖文教程，有興趣的用戶快來一起看看吧！夸克瀏覽器使用教學夸克怎麼登入兩個裝置1、先開啟夸克瀏覽器APP，主頁點選【夸克網盤】;2、接著進入夸克網盤介面，選擇【我的備份】服務功能;3、最後選擇其中的【切換設備】即可更換新設備登陸兩個。
