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異步驗證用戶名是否存在,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!