jQuery validate插件实现ajax验证重复的2种方法
2016-01-22 00:00
951 查看
本文实例讲述了jQuery validate插件实现ajax验证重复的2种方法。分享给大家供大家参考,具体如下:
jquery validate 经过这种多年的改良,已经很完善了。它能满足80%的验证需要,如果validate自带的功能,不能满足我们需求,它提供了addMethod来扩展功能。下面就举个小例子来说明一下addMethod的用法。
完整demo实例代码如下:
在这里推荐大家使用jquery validate,用熟了,很方便。
更多关于jQuery插件相关内容感兴趣的读者可查看本站专题:《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
深入学习jQuery Validate表单验证(二)
深入学习jQuery Validate表单验证
jquery validate表单验证的基本用法入门
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
jquery.validate 自定义验证方法及validate相关参数
jQuery插件Validate实现自定义校验结果样式
jQuery Validate表单验证深入学习
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
jQuery插件EasyUI校验规则 validatebox验证框
jquery.validate提示错误信息位置方法
jquery validate 经过这种多年的改良,已经很完善了。它能满足80%的验证需要,如果validate自带的功能,不能满足我们需求,它提供了addMethod来扩展功能。下面就举个小例子来说明一下addMethod的用法。
完整demo实例代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <title>jquery validate ajax check exist</title> <head> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.validate.min.js"></script> <script> $(document).ready(function(){ jQuery.validator.addMethod("phonecheck", function(value, element) { string = value.match(/0(\d{2,2})-(\d{7,7})/ig); if(string != null){ return true; }else{ return false; } }, "telphone number like 021-1234567"); jQuery.validator.addMethod("phonesame", function(value, element) { var flag = 1; $.ajax({ type:"POST", url:'tel.php', async:false, data:{'tel':value}, success: function(msg){ if(msg == 'yes'){ flag = 0; } } }); if(flag == 0){ return false; }else{ return true; } }, "sorry number have been exist"); $("#myform").validate({ errorPlacement: function(error, element) { error.insertAfter(element); }, rules:{ username:{ required:true, remote:{ url:"tel.php", type:"post", dataType:"html", data:{ username:function(){return $("#username").val();} }, dataFilter: function(data, type) { if (data == "yes") return true; else return false; } } }, telphone:{ required:true, rangelength:[11,11], phonecheck:true, phonesame:true } }, messages:{ telphone:{ required:"Please enter your phone", rangelength:"phone must be 11 numbers" }, username:{ required:"Please enter your username", remote:"the username have been exist" } }, debug:true }) }); </script> </head> <body style="margin-left:500px;margin-top:100px;"> <div style="font-size:24px;">021-1234567 or tank exist</div><br> <form id="myform" method="post"> <label>Your telphone</label> <input name="telphone" class="required" value="" /><br><br> <label>Your username</label> <input name="username" id="username" class="required" value="" /> <br/> <input type="submit" value="Submit"/> </form> </body> </html>
在这里推荐大家使用jquery validate,用熟了,很方便。
更多关于jQuery插件相关内容感兴趣的读者可查看本站专题:《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章:
jQuery validate插件submitHandler提交导致死循环解决方法深入学习jQuery Validate表单验证(二)
深入学习jQuery Validate表单验证
jquery validate表单验证的基本用法入门
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
jquery.validate 自定义验证方法及validate相关参数
jQuery插件Validate实现自定义校验结果样式
jQuery Validate表单验证深入学习
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
jQuery插件EasyUI校验规则 validatebox验证框
jquery.validate提示错误信息位置方法
相关文章推荐
- jQuery弹层插件jquery.fancybox.js用法实例
- jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
- jQuery简单获取键盘事件的方法
- jQuery ajax时间差导致的变量赋值问题分析
- jquery.validate提示错误信息位置方法
- jQuery实现图片轮播效果
- jquery日历插件datepicker用法分析
- jquery采用oop模式class类的使用示例
- DOMLoaded 类似jquery的$(callback)
- 第二章 jQuery选择器
- 第三章 jQuery中的DOM操作
- jquery读写cookie
- jQuery-extend分析
- JQuery学习笔记——JQuery基础
- 2016 系统设计第一期 (档案一)jQuery checkbox 取值赋值
- 2016 系统设计第一期 (档案一)jQuery radio 取值赋值
- 2016 系统设计第一期 (档案一)jQuery ajax serialize()方法form提交数据
- Jquery 对话框确认
- 冻结 锁定 固定 行 列 表头 抬头 html table jquery 全兼容常见浏览器
- jQuery Dialog API (二)