快捷導(dǎo)航

jQuery實(shí)現(xiàn)用戶注冊的表單驗(yàn)證示例

更新時間：2013年08月28日 18:58:03 作者：

用戶注冊的表單往往是需要進(jìn)行驗(yàn)證的，否則會有一些不否合規(guī)則的數(shù)據(jù)入庫，后果會不堪設(shè)想，下面為大家詳細(xì)介紹下通過jquery是如何實(shí)現(xiàn)的，下面有個示例，感興趣的朋友可以參考下

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<meta charset="utf-8"/> 
<script type="text/javascript" src="../script/jquery-1.4.2.min.js"></script> 
<script> 
$(function(){ 
$(":input.required").each(function(){ 
var $required = $("<strong>*</strong>"); 
$(this).parent().append($required); 
}); 
$(":input.required").blur(function(){ 
//判斷一下鼠標(biāo)離開誰了 
if($(this).is("#username")){ 
$(".formtip").remove(); 
//按照用戶名的規(guī)則去驗(yàn)證 
if(this.value==""||this.value.length<6){ 
var errMsg = "<span class='formtip'>用戶名至少是6個字母</span>"; 
$(this).parent().append(errMsg); 
}else{ 
var msg = "<span class='formtip'>用戶名可以使用</span>"; 
$(this).parent().append(msg); 
} 
} 
//判斷一下如果是email的話,應(yīng)該按照email的規(guī)則去驗(yàn)證 
if($(this).is("#email")){ 
$(".emailtip").remove(); 
//按照email的規(guī)則去驗(yàn)證 
var reg = /^\w{1,}@\w+\.\w+$/; 
var $email = $("#email").val(); 
if(!reg.test($email)){ 
var errMsg = "<span class='emailtip'>郵箱不合法</span>"; 
$(this).parent().append(errMsg); 
}else{ 
var Msg = "<span class='emailtip'>郵箱可以使用</span>"; 
$(this).parent().append(Msg); 
} 
} 
}); 


}) 
</script> 
</head> 

<body> 
<form action="#" method="post"> 
<div class="int"> 
用戶名:<input type="text" name="username" id="username" class="required"/> 
</div> 
<div class="int"> 
郵箱:<input type="text" id="email" class="required"/> 
</div> 
<div class="int"> 
個人資料:<input type="text" id="personInfo" class="required"/> 
</div> 
<input type="submit" value="提交" id="send"/><input type="reset" id="res"/> 
</form> 
</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

jQuery阻止冒泡和HTML默認(rèn)操作
jQuery是一個快捷簡便的JavaScript框架，說道框架可以直接理解為就是對原來底層的東西進(jìn)行了封裝使得開發(fā)者能夠利用這個框架快速開發(fā)。
2010-11-11
jQuery DOM操作實(shí)例
本文用代碼的方式詳細(xì)講解了jQuery的DOM操作,具體操作方法請?jiān)敿?xì)參看代碼中的注釋部份
2014-03-03
如何使用jquery動態(tài)加載js,css文件實(shí)現(xiàn)代碼
在jquery中要實(shí)現(xiàn)動態(tài)加載js文件的方法有很多種,最簡單的我們可以直接利用$.include()方法來實(shí)現(xiàn)，感興趣的朋友可以參考下哈
2013-04-04
基于jQuery全屏焦點(diǎn)圖左右切換插件responsiveslides
這篇文章主要介紹了基于jQuery全屏焦點(diǎn)圖左右切換插件responsiveslides的相關(guān)資料,需要的朋友可以參考下
2015-09-09
jQuery讀取和設(shè)定KindEditor值的方法
這篇文章主要介紹了jQuery讀取和設(shè)定KindEditor值的方法，大家參考使用吧
2013-11-11
jQuery中多個元素的Hover事件解決方案
jQuery的hover事件只是針對單個HTML元素，不過，有些時候我們希望當(dāng)鼠標(biāo)進(jìn)入兩個或多個元素時觸發(fā)fun1，離開他們時觸發(fā)fun2，而在這些元素間移動鼠標(biāo)并不觸發(fā)任何事件
2014-06-06
JQUERY表單暫存功能插件分享
今天我想介紹的是一款jQuery的插件:jquery.formLocalStorage.js。通過該插件，我們可以非常簡單的實(shí)現(xiàn)表單暫存功能
2016-02-02
使用jQuery簡單實(shí)現(xiàn)模擬瀏覽器搜索功能
這篇文章主要介紹了使用jQuery簡單實(shí)現(xiàn)模擬瀏覽器搜索功能,需要的朋友可以參考下
2014-12-12
jQuery之選項(xiàng)卡的簡單實(shí)現(xiàn)
本篇文章主要是對jQuery 選項(xiàng)卡的簡單實(shí)現(xiàn)進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-02-02
jquery 回車事件實(shí)現(xiàn)代碼
簡單地記下jquery實(shí)現(xiàn)回車事件，學(xué)習(xí)jquery的朋友可以參考下。
2011-08-08