<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input{
width:400px;
height:40px;
line-height: 40px;
font-size: 16px;
border:1px solid #ccc;
}
input[type='submit']{
background: #f5f5f5;
cursor:pointer;
}
</style>
</head>
<body>
<h1>注冊(cè)</h1>
<hr>
<form action="1.php" name="myform" onSubmit="return demo()">
<table>
<tr>
<td>用戶名:</td>
<td><input type="text" name="username" id="" onblur="checkUser()"></td>
<td id="username_info"></td>
</tr>
<tr>
<td>郵箱:</td>
<td><input type="text" name="email" id="" onblur="checkEmail()"></td>
<td id="email_info"></td>
</tr>
<tr>
<td>密碼:</td>
<td><input type="password" name="pwd" id="" onblur="checkPwd()"></td>
<td id="pwd_info"></td>
</tr>
<tr>
<td>確認(rèn)密碼:</td>
<td><input type="password" name="repwd" id="" onblur="checkRepwd()"></td>
<td id="repwd_info"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="提 交"></td>
<td></td>
</tr>
</table>
</form>
<script>
//驗(yàn)證用戶名
function checkUser(){
//獲取輸入框的值
var value = document.myform.username.value;
//獲取td
var td = document.getElementById('username_info');
//判斷驗(yàn)證 6-12位的數(shù)字\字母下劃線
if (value.search(/^\w{6,12}$/) === -1) {
td.innerHTML = "用戶名必須是6-12位的數(shù)字 字母 下劃線";
td.style.color = "red";
return false;
}
td.innerHTML = "用戶名可用";
td.style.color = "green";
return true;
}
//驗(yàn)證郵箱
function checkEmail(){
//獲取輸入框的值
var value = document.myform.email.value;
//獲取td
var td = document.getElementById('email_info');
//判斷驗(yàn)證 郵箱
if (value.search(/^\w+@\w+(\.\w+){1,3}$/) === -1) {
td.innerHTML = "郵箱格式不正確";
td.style.color = "red";
return false;
}
td.innerHTML = "郵箱可用";
td.style.color = "green";
return true;
}
//驗(yàn)證密碼
function checkPwd(){
//獲取密碼
var pwd = document.myform.pwd.value;
var td = document.getElementById('pwd_info');
//驗(yàn)證
if (pwd.length < 6 || pwd.length > 18) {
td.innerHTML = "密碼的長度必須是6-18位";
td.style.color = "red";
return false;
}
td.innerHTML = "密碼可用";
td.style.color = "green";
return true;
}
//驗(yàn)證確認(rèn)密碼
function checkRepwd(){
//獲取密碼
var pwd = document.myform.pwd.value;
var repwd = document.myform.repwd.value;
var td = document.getElementById('repwd_info');
//驗(yàn)證
if (pwd != repwd) {
td.innerHTML = "兩次密碼不一致";
td.style.color = "red";
return false;
}
td.innerHTML = "確認(rèn)密碼正確";
td.style.color = "green";
return true;
}
function demo(){
return checkRepwd() && checkPwd() && checkEmail() && checkUser();
}
</script>
</body>
</html>
js實(shí)例——正則表單驗(yàn)證
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門涝动，熙熙樓的掌柜王于貴愁眉苦臉地迎上來厦酬，“玉大人，你說我怎么就攤上這事瘫想≌淘模” “怎么了？”我有些...
- 文/不壞的土叔 我叫張陵国夜，是天一觀的道長减噪。 經(jīng)常有香客問我，道長车吹，這世上最難降的妖魔是什么筹裕？ 我笑而不...
- 正文 為了忘掉前任，我火速辦了婚禮窄驹，結(jié)果婚禮上朝卒，老公的妹妹穿的比我還像新娘。我一直安慰自己乐埠，他們只是感情好抗斤，可當(dāng)我...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著丈咐，像睡著了一般豪治。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上扯罐，一...
- 文/蒼蘭香墨 我猛地睜開眼衅澈，長吁一口氣：“原來是場噩夢(mèng)啊……” “哼键菱！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起今布，我...
- 序言：老撾萬榮一對(duì)情侶失蹤经备，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后部默，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體侵蒙，經(jīng)...
- 正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
- 正文 我和宋清朗相戀三年傅蹂，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了纷闺。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片算凿。...
- 正文 年R本政府宣布署鸡，位于F島的核電站，受9級(jí)特大地震影響镐躲，放射性物質(zhì)發(fā)生泄漏储玫。R本人自食惡果不足惜，卻給世界環(huán)境...
- 文/蒙蒙 一萤皂、第九天 我趴在偏房一處隱蔽的房頂上張望撒穷。 院中可真熱鬧，春花似錦裆熙、人聲如沸端礼。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽蛤奥。三九已至，卻和暖如春僚稿，著一層夾襖步出監(jiān)牢的瞬間凡桥，已是汗流浹背。 一陣腳步聲響...
- 正文 我出身青樓蠢络，卻偏偏與公主長得像衰猛，于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子刹孔，可洞房花燭夜當(dāng)晚...
推薦閱讀更多精彩內(nèi)容
- 本文內(nèi)容： 1.什么是正則表達(dá)式髓霞？ 2.正則表達(dá)式限定符卦睹、選擇匹配符、字符匹配符 3.常用的正則表達(dá)式 4.創(chuàng)建R...
- 1.用戶名正則 2 密碼強(qiáng)度正則 3 整數(shù)正則 4 數(shù)字正則 5 Email正則 6 手機(jī)號(hào)碼正則 7 身份證號(hào)正...
- 1 用戶名正則 2 密碼強(qiáng)度正則 3 整數(shù)正則 4 數(shù)字正則 6 手機(jī)號(hào)碼正則 7 身份證號(hào)正則 9 IPv4地址...
- http://jaywcjlove.github.io/validator.js/
