jQuery简单前端表单验证
2015-08-09 22:18
826 查看
<!DOCTYPE html> <html> <head> <title>表单验证</title> <script src="../scripts/jquery-1.9.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("form :input.required").each(function(){ var $required = $("<strong class='high'>*</strong>"); $(this).parent().append($required); }); $("input").blur(function(){ var $parent = $(this).parent(); if($(this).is("#username")){ $parent.find(".formtips").remove(); if( this.value==""||this.value.length<6){ var errorMsg = "请输入至少6位的用户名."; $parent.append('<span class="formtips onError">'+errorMsg+'</span>'); //$(this).after(errorMsg); }else{ var okMsg = "输入正确."; $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>'); } } }); $("#send").click(function(){ $("form .required:input").trigger("blur"); var numError = $('form .onError').length; if(numError){ //任何非0的数像1 -1等都被认为是真 return false; } alert(numError); }) }); </script> </head> <body> <form method="post" action=""> <div class="int"> <label for="username">用户名: </label> <input type="text" id="username" class="required" /> </div> <div class="int"> <label for="email">邮箱: </label> <input type="text" id="email" class="required" /> </div> <div class="int"> <label for="persioninfo">个人资料:</label> <input type="text" id="persioninfo" class="required" /> </div> <div class="sub"> <input type="submit" id="send" value="提交"/> <input type="reset" id="res"/> </div> </form> </body> </html>
相关文章推荐
- JQuery之选择器
- jquery控件-实现自定义样式的弹出窗口和确认框
- java_web学习(15)jQuery
- jQuery工具函数
- jQuery 动画、HTML、CSS
- 简单的jQuery 四级分类实用插件
- Dom对象和Jquery对象区别详解
- jQuery Mobile 网格
- jQuery中的ajax
- jquery基础学习之变量命名不污染的方法总结
- jquery基础学习之变量命名不污染的方法总结
- jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
- jquery 解析返回的xml和json
- 廖雪峰javascrip学习笔记<jQuery>
- jQuery初学
- 用jQuery Mobile做HTML5移动应用的三个优缺点
- jquery动态创建节点
- jquery实现页面控件拖动效果js代码
- 【前端学习笔记】JQuery事件细节、JQ进阶常用方法
- jQuery中的Ajax