登錄，注冊是我們使用的較多的表單認證，每個項目都從頭開始寫，顯然是沒有必要的。下面和大家分享下我所寫的表單驗證：
下面的代碼，會附上完整代碼，使用的過程中，只需要根據自己的項目進行簡單的修改即可，非常方便。
此表單認證使用了jquery，如您需要原生的JS，改寫起來，也是非常方便的。
請看效果圖：
~~~
<!doctype html>
<html lang="en">
<head>
<!--網站編碼格式，UTF-8 國際編碼，GBK或 gb2312 中文編碼-->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="Keywords" content="關鍵詞一，關鍵詞二">
<meta name="Description" content="網站描述內容">
<meta name="Author" content="Yvette Lau">
<meta name = "viewport" content = " width = device-width, initial-scale = 1 ">
<title>CSSDemo</title>
<style>
*{
margin: 0px;
padding: 0px;
}
/*布局開始*/
#login_dialog {
position: fixed;
left: 40%;
top: 40%;
background-color: #303a40;
width: 500px;
margin-left: -200px;
margin-top: -150px;
font-family: "黑體";
/*禁止復制粘貼*/
-moz-user-select: none;
-webkit-user-select: none;
user-select:none;
}
.register_dialog_title {
height: 35px;
line-height: 35px;
margin: 0 5px;
}
.register_dialog_info {
float: left;
margin-left:10px;
color: #fff;
margin-top: 5px;
font-size: 20px;
}
#register_dialog {
position: fixed;
left: 40%;
top: 40%;
background-color: #303a40;
width: 500px;
/* height: 600px; */
margin-left: -200px;
margin-top: -200px;
font-family: "黑體";
-moz-user-select:none; /*火狐*/
-webkit-user-select:none; /*webkit瀏覽器*/
-ms-user-select:none; /*IE10*/
-khtml-user-select:none; /*早期瀏覽器*/
user-select:none;
}
.register_dialog_info {
float: left;
margin-left:10px;
color: #fff;
margin-top: 5px;
font-size: 20px;
}
.dialog_close {
cursor: pointer;
width: 40px;
height:40px;
border-radius:25px;
float: right;
line-height:40px;
font-size: 20px;
color: #d8dadb;
font-family: "微軟雅黑";
text-align: center;
cursor:center;
}
form{padding: 20px 0px;}
ul li {list-style: none;}
.sub {
text-align: center;
}
.sub input {
display: inline-block;
width: 300px;
background-color: rgb(255, 109, 11);
color: rgb(255, 255, 255);
font-size: 20px;
text-align: center;
height: 40px;
line-height: 40px;
font-family: 黑體;
outline: none;
border: none;
margin: auto;
}
.dialog_close:hover {
background-color: #566
}
input[type = "submit"]:hover{cursor: pointer;}
/*布局結束*/
.reg-box { padding-left: 30px; }
.reg-box li { line-height: 44px; width: 500px; overflow: hidden; }
.reg-box li label { width: 68px; height: 50px; float: left; line-height: 50px; text-align: right; padding-right: 20px; }
.reg-box li input,.reg-box li select{ padding: 6px 0; font-size: 16px; width: 296px; height: 28px; line-height: 28px; border: 1px solid #dddddd; text-indent: 0.5em; float: left; }
.reg-box li select option{font-size:16px;}
.registered .btn a { background: #ff7200; margin-left: 110px; }
/*驗證碼*/
.add { width: 128px; height: 44px; float: left; _display: inline; cursor: pointer; margin-left: 20px; }
.reg-box li .sradd { width: 148px; text-indent: 4px; font-size: 14px; }
.reg-box li .input-code { width: 106px; padding: 10px; font-family: Arial; font-style: italic; color: red; letter-spacing: 1px; cursor: pointer; text-align: center; text-indent: 0; }
.yzm,.phoKey { background: #ff7200; text-align: center; line-height: 44px; color: #fff; }
.phoKey{letter-spacing: 3px; font-size:18px;}
.yzmc { background: #dddddd; text-align: center; line-height: 44px; color: #999; }
.error { clear:both;display:block;color: red; padding-left: 90px; padding-bottom:5px;height:20px;float: left; font-size:12px;line-height: 20px;}
input { background-color: #fff; outline: none; }
.reg-box li { width: auto; }
.reg-box li input.errorC, .errorC{ border: 1px solid red; }
.reg-box li input.checkedN , .checkedN{ border: 1px solid #1ece6d; }
</style>
<!--css js 文件的引入-->
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
</head>
<body>
<div id="login_dialog">
<div class="register_dialog_title">
<p class="register_dialog_info">登錄</p>
<p class="dialog_close">X</p>
<div class="clear"></div>
</div>
<div style="background-color:#ffffff;margin:10px;">
<form action="">
<ul class="reg-box">
<li>
<label for="">賬????號</label><input type="text" value="請輸入您的賬號" class="account" maxlength="11" style="color:#999;" onBlur="textBlur(this)" onFocus="textFocus(this)"/><span class="error error5"></span>
</li>
<li>
<label for="">密????碼</label><input type="password" class = "admin_pwd" value="請輸入密碼" style="color:#999;" onBlur="textBlur(this)" onFocus="textFocus(this)"/><span class="error error6"></span>
</li>
<li>
<label for="">驗證碼</label><input type="text" class="sradd photokey" value="請輸入驗證碼" style="color:#999;ime-mode:disabled;-webkit-ime-mode:inactive;" onBlur="textBlur(this)" onFocus=" textFocus(this) " /><span class="add phoKey"></span><span class="error error7"></span>
</li>
</ul>
<div class="sub">
<input type="submit" value="立即登錄" />
</div>
</form>
</div>
</div>
</body>
</html>
~~~
JS部分代碼如下：
~~~
<script type="text/javascript">
//文本框默認提示文字
function textFocus(el) {
if (el.defaultValue == el.value) { el.value = ''; el.style.color = '#333'; }
}
function textBlur(el) {
if (el.value == '') { el.value = el.defaultValue; el.style.color = '#999'; }
}
$(function(){
//注冊頁面的提示文字
(function register(){
//手機號欄失去焦點
$(".reg-box .phone").blur(function(){
reg=/^1[3|4|5|7|8][0-9]\d{4,8}$/i;//驗證手機正則(輸入前7位至11位)
if( $(this).val()==""|| $(this).val()=="請輸入您的手機號")
{
$(this).addClass("errorC");
$(this).next().html("請輸入您的手機號");
$(this).next().css("display","block");
}
else if($(this).val().length<11)
{
$(this).addClass("errorC");
$(this).next().html("手機號長度有誤！");
$(this).next().css("display","block");
}
else if(!reg.test($(".reg-box .phone").val()))
{
$(this).addClass("errorC");
$(this).next().html("手機號不存在!");
$(this).next().css("display","block");
}
else
{
$(this).addClass("checkedN");
$(this).removeClass("errorC");
$(this).next().empty();
}
});
//驗證碼欄失去焦點
$(".reg-box .phonekey").blur(function(){
reg=/^[A-Za-z0-9]{6}$/;
if( $(this).val()=="" || $(this).val()=="請輸入收到的驗證碼")
{
$(this).addClass("errorC");
$(this).next().next().html("請填寫驗證碼");
$(this).next().next().css("display","block");
}
else if(!reg.test($(".phonekey").val()))
{
$(this).addClass("errorC");
$(this).next().next().html("驗證碼輸入有誤！");
$(this).next().next().css("display","block");
}
else
{
$(this).removeClass("errorC");
$(this).next().next().empty();
$(this).addClass("checkedN");
}
});
//密碼欄失去焦點
$(".reg-box .password").blur(function(){
reg=/^[\@A-Za-z0-9\!\#\$\%\^\&\*\.\~]{6,22}$/;
if(!reg.test($(".password").val()))
{
$(this).addClass("errorC");
$(this).next().html("格式有誤，請輸入6~12位的數字、字母或特殊字符！");
$(this).next().css("display","block");
}
else
{
$(this).removeClass("errorC");
$(".reg-box .error3").empty();
$(this).addClass("checkedN");
}
});
/*確認密碼失去焦點*/
$(".reg-box .email").blur(function(){
var pwd1=$('.reg-box input.password').val();
var pwd2=$(this).val();
if(($(this).val() == '請再次輸入密碼' || $(this).val() == "") && (pwd1 == "請輸入密碼" || pwd1 == "") ){
return;
}else if(pwd1!=pwd2)
{
$(this).addClass("errorC");
$(this).removeClass("checkedN");
$(this).next().html("兩次密碼輸入不一致！");
$(this).next().css("display","block");
}
else
{
$(this).removeClass("errorC");
$(this).next().empty();
$(this).addClass("checkedN");
}
});
})();
/*生成驗證碼*/
(function create_code(){
function shuffle(){
var arr=['1','r','Q','4','S','6','w','u','D','I','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p',
'q','2','s','t','8','v','7','x','y','z','A','B','C','9','E','F','G','H','0','J','K','L','M','N','O','P','3','R',
'5','T','U','V','W','X','Y','Z'];
return arr.sort(function(){
return (Math.random()-.5);
});
};
shuffle();
function show_code(){
var ar1='';
var code=shuffle();
for(var i=0;i<6;i++){
ar1+=code[i];
};
//var ar=ar1.join('');
$(".reg-box .phoKey").text(ar1);
};
show_code();
$(".reg-box .phoKey").click(function(){
show_code();
});
})();
//登錄頁面的提示文字
//賬戶輸入框失去焦點
(function login_validate(){
$(".reg-box .account").blur(function(){
reg=/^1[3|4|5|8][0-9]\d{4,8}$/i;//驗證手機正則(輸入前7位至11位)
if( $(this).val()==""|| $(this).val()=="請輸入您的賬號")
{
$(this).addClass("errorC");
$(this).next().html("賬號不能為空！");
$(this).next().css("display","block");
}
else if($(".reg-box .account").val().length<11)
{
$(this).addClass("errorC");
$(this).next().html("賬號長度有誤！");
$(this).next().css("display","block");
}
else if(!reg.test($(".reg-box .account").val()))
{
$(this).addClass("errorC");
$(this).next().html("賬號不存在!");
$(this).next().css("display","block");
}
else
{
$(this).addClass("checkedN");
$(this).removeClass("errorC");
$(this).next().empty();
}
});
/*密碼輸入框失去焦點*/
$(".reg-box .admin_pwd").blur(function(){
reg=/^[\@A-Za-z0-9\!\#\$\%\^\&\*\.\~]{6,22}$/;
if($(this).val() == "請輸入密碼"){
$(this).addClass("errorC");
$(this).next().html("密碼不能為空！");
$(this).next().css("display","block");
}else if(!reg.test($(".admin_pwd").val()))
{
$(this).addClass("errorC");
$(this).next().html("密碼為6~12位的數字、字母或特殊字符！");
$(this).next().css("display","block");
}else
{
$(this).addClass("checkedN");
$(this).removeClass("errorC");
$(this).next().empty();
}
});
/*驗證碼輸入框失去焦點*/
$(".reg-box .photokey").blur(function(){
var code1=$('.reg-box input.photokey').val().toLowerCase();
var code2=$(".reg-box .phoKey").text().toLowerCase();
if(code1!=code2)
{
$(this).addClass("errorC");
$(this).next().next().html("驗證碼輸入錯誤！");
$(this).next().next().css("display","block");
}
else
{
$(this).removeClass("errorC");
$(this).next().next().empty();
$(this).addClass("checkedN");
}
})
})();
});
/*清除提示信息*/
function emptyRegister(){
$(".reg-box .phone,.reg-box .phonekey,.reg-box .password,.reg-box .email").removeClass("errorC");;
$(".reg-box .error1,.reg-box .error2,.reg-box .error3,.reg-box .error4").empty();
}
function emptyLogin(){
$(".reg-box .account,.reg-box .admin_pwd,.reg-box .photokey").removeClass("errorC");;
$(".reg-box .error5,.reg-box .error6,.reg-box .error7").empty();
}
</script>
~~~
備注：這段JS代碼中不僅包含了登錄對話框的驗證部分，其實也包含了注冊對話框的驗證.
注冊對話框的效果圖如下：
~~~
<body>
<div id="register_dialog">
<div class="register_dialog_title">
<p class="register_dialog_info">注冊</p>
<p class="dialog_close">X</p>
<div class="clear"></div>
</div>
<div style="background-color:#ffffff;margin:10px;">
<form action="">
<ul class="reg-box">
<li>
<label for="">手????機</label><input type="text" value="手機號為登錄密碼" class="phone" maxlength="11" style="color:#999;" onBlur="textBlur(this)" onFocus="textFocus(this)"/><span class="error error1"></span>
</li>
<li>
<label for="">驗證碼</label><input type="text" class="sradd phonekey" value="請輸入收到的驗證碼" style="color:#999;ime-mode:disabled;-webkit-ime-mode:inactive;" banInputMethod = "english" onBlur="textBlur(this)" onFocus=" textFocus(this) " /><span class="add yzm">發送驗證碼</span><span class="error error2"></span>
</li>
<li>
<label for="">密????碼</label><input type="password" class = "password" value="請輸入密碼" style="color:#999;" onBlur="textBlur(this)" onFocus="textFocus(this)"/><span class="error error3"></span>
</li>
<li>
<label for="">確認密碼</label><input type="password" class = "email" value="請再次輸入密碼" style="color:#999;" onBlur="textBlur(this)" onFocus="textFocus(this)"/><span class="error error4"></span>
</li>
</ul>
<div class="sub">
<input type="submit" value="立即注冊" />
</div>
</form>
</div>
</div>
</body>
~~~
說明：
如果需要使用注冊對話框，只需要替換body中的內容即可。JS和html部分都是通用的。注意jquery.min.js的路徑，是您自己本地的路徑，記得修改。
另外，如果需要修改樣式，可以自行修改css部分。
您可以根據自己的需求，進行修改。
附上一些實用的正則表達式，您可以利用下面的正則表達式，寫出豐富的表單：
1.身份證驗證：
reg=/^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/;
2.手機號驗證：
reg=/^1[3|4|5|8][0-9]\d{4,8}$/i;
3.密碼驗證：
6~15位，不能含有空格，支持中文、字母、數字、下劃線和小數點
reg =?/^([\w\.\_]|[\u4e00-\u9fa5]){6,15}$/;
密碼中必須包含字母、數字、特稱字符，至少8個字符，最多30個字符
reg =?/(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9])/;
4.郵箱驗證
reg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
5.只能輸入中文
reg = /^[u4e00-u9fa5],{0,}$/
6.只能輸入數字
reg = /^[0,9]{0,}$/
- 前言
- jQuery輪播圖插件
- JS模擬事件操作
- JS閉包與變量
- JS綁定事件
- HTML5之file控件
- JavaScript的this詞法
- JavaScript的this詞法（二）
- JS this詞法（三）
- JS檢測瀏覽器插件
- JS拖拽組件開發
- number輸入框
- Modernizr.js和yepnode.js
- DOM變化后事件綁定失效
- div和img之間的縫隙問題
- 詳解JavaScript作用域
- bootstrap入門
- 表單驗證（登錄/注冊）
- Bootstrap網格系統
- Bootstrap排版
- Bootstrap創建表單（一）
- Bootstrap表單（二）
- Bootstrap按鈕
- Bootstrap圖片
- Bootstrap字體圖標(glyphicons)
- Bootstrap的aria-label和aria-labelledby
- Bootstrap下拉菜單
- Bootstrap按鈕組
- Bootstrap按鈕菜單
- Bootstrap輸入框組
- Bootstrap導航元素
- Bootstrap導航欄
- sublimeText頻頻崩潰
- JQuery不同版本的差異（checkbox）
- Bootstrap面包屑導航、分頁、標簽、徽章
- Bootstrap警告
- Bootstrap進度條
- 前端的上傳下載
- JS字符串的相關方法
- CSS3選擇器（全）
- CSS3新增文本屬性詳述
- 利用CSS3實現圖片切換特效
- CSS3新增顏色屬性
- CSS3的border-radius屬性詳解
- JS創建對象幾種不同方法詳解
- JS實現繼承的幾種方式詳述（推薦）
- CSS3響應式布局
- JS模塊化開發(requireJS)
- 利用@font-face實現個性化字體
- 前端在html頁面之間傳遞參數的方法
- CSS自動換行、強制不換行、強制斷行、超出顯示省略號
- 如何在Html中引入外部頁面
- reactJS入門
- React組件生命周期
- 使用React實現類似快遞單號查詢效果
- ReactJS組件生命周期詳述
- React 屬性和狀態詳解