利用jQuery.Validate異步驗證用戶名是否存在(推薦)
HTML頭部引用:
<script type="text/JavaScript" src="../js/jQuery-1.3.2.min.js"></script> <script type="text/javascript" src="../js/jquery.validate.min.js"></script> <script type="text/javascript" src="../js/messages_cn.js"></script>
HTML內(nèi)容(部分):
<form name="form1" id="form1" method="post" action=""> <dl> <dt>用戶名:</dt> <dd><input name="txtUserName" id="txtUserName" type="text" class="input1" /></dd> </dl> </form>
JS代碼部分:
$(function() {
//表單驗證JS
$("#form1").validate({
//出錯時添加的標簽
errorElement: "span",
rules: {
txtUserName: {
required: true,
minlength: 3,
maxlength: 16,
remote: {
type: "post",
url: "/tools/ValidateUserName.ashx",
data: {
username: function() {
return $("#txtUserName").val();
}
},
dataType: "html",
dataFilter: function(data, type) {
if (data == "true")
return true;
else
return false;
}
}
}
},
success: function(label) {
//正確時的樣式
label.text(" ").addClass("success");
},
messages: {
txtUserName: {
required: "請輸入用戶名,3-16個字符(字母、數(shù)字、下劃線),注冊后不能更改",
minlength: "用戶名長度不能小于3個字符",
maxlength: "用戶名長度不能大于16個字符",
remote: "用戶名不可用"
}
}
});
});
應注意的地方:
data: {
username: function() {
return $("#txtUserName").val();
}
有返回值,如果直接寫“data: {username: $("#txtUserName").val();}”,這樣是獲取不到值的。
以上所述是小編給大家介紹的利用jQuery.Validate異步驗證用戶名是否存在,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關文章
圣誕節(jié)Merry Christmas給博客添加浪漫的下雪效果基于jquery實現(xiàn)
一年一度的圣誕節(jié)又到了,首先祝大家好運一串串,健康一年年,平安到永遠!今天就教大家如何在博客中添加紛紛揚揚的下雪效果。今天,你那里下雪了嗎2012-12-12
jQuery實現(xiàn)仿Alipay支付寶首頁全屏焦點圖切換特效
這篇文章主要介紹了jQuery實現(xiàn)仿Alipay支付寶首頁全屏焦點圖切換特效,涉及jQuery插件jquery.kinMaxShow的相關使用技巧,非常具有實用價值,需要的朋友可以參考下2015-05-05
jQuery實現(xiàn)列表內(nèi)容的動態(tài)載入特效
這里給大家分享的是使用jQuery實現(xiàn)列表內(nèi)容的動態(tài)載入的特效,效果相當棒,后面附上瀑布流的實現(xiàn)思路和關鍵代碼,有需要的小伙伴可以參考下。2015-08-08
JQUERY 對象與DOM對象之兩者相互間的轉(zhuǎn)換
jquery對象的相應方法DOM對象不能使用,而DOM對象的相應方法jquery也不能使用。所以在具體項目中要注意Jquery對象與DOM對象的轉(zhuǎn)換問題2009-04-04
jQuery效果 slideToggle() 方法(在隱藏和顯示之間切換)
slideToggle() 方法通過使用滑動效果(高度變化)來切換元素的可見狀態(tài)。2011-06-06

