利用jQuery.Validate異步驗證用戶名是否存在(推薦)
更新時間:2016年12月09日 11:09:40 作者:huang100qi
這篇文章主要介紹了利用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內容(部分):
<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個字符(字母、數字、下劃線),注冊后不能更改", minlength: "用戶名長度不能小于3個字符", maxlength: "用戶名長度不能大于16個字符", remote: "用戶名不可用" } } }); });
應注意的地方:
data: { username: function() { return $("#txtUserName").val(); }
有返回值,如果直接寫“data: {username: $("#txtUserName").val();}”,
這樣是獲取不到值的。
以上所述是小編給大家介紹的利用jQuery.Validate異步驗證用戶名是否存在,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
相關文章
圣誕節(jié)Merry Christmas給博客添加浪漫的下雪效果基于jquery實現
一年一度的圣誕節(jié)又到了,首先祝大家好運一串串,健康一年年,平安到永遠!今天就教大家如何在博客中添加紛紛揚揚的下雪效果。今天,你那里下雪了嗎2012-12-12jQuery效果 slideToggle() 方法(在隱藏和顯示之間切換)
slideToggle() 方法通過使用滑動效果(高度變化)來切換元素的可見狀態(tài)。2011-06-06