- 浏览: 88905 次
- 性别:
- 来自: 福州
文章分类
最新评论
-
liwenhui_aisino:
这个ajax,ok
jQuery验证框架(八)应用实例 (jQuery validation) -
jun19910822:
你好 请问能把这些 Jquery相关插件提供出来吗?
jQuery验证框架(八)应用实例 (jQuery validation) -
xiaobadi:
good~
jQuery验证框架(七)注意事项 (jQuery validation)
jQuery验证框架
八、应用实例
[1] 验证页面
[2] 验证js
[3] 远程验证程序
[4] 验证效果
八、应用实例
[1] 验证页面
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%> <html> <head> <title>jquery验证框架</title> <link rel="stylesheet" type="text/css" href="css/index.css"> <script type="text/javascript" src=js/jquery-1.3.2.min.js></script> <script type="text/javascript" src=js/jquery.validate.pack.js></script> <script type="text/javascript" src=js/jquery.form.js></script> <script type="text/javascript" src=js/valid.js></script> <style type="text/css"> label { width: 10em; float: left; } label.haha {color: red; padding-left: 18px; vertical-align: top;width: 196px; background: url("images/unchecked.gif") no-repeat;} input.haha { border: 1px solid red; } label.valid {background: url("images/checked.gif") no-repeat; color: #065FB9;} input.focus { border: 2px solid green; } ul li{ display: block;} </style> </head> <body> <div id="form_con"> <form class="cmxform" id="myform" method="post" action=""> <table cellspacing="0" cellpadding="0"> <tbody> <tr> <td>用户名</td> <td><input type="text" name="username" class="required" /></td> <td></td> </tr> <tr> <td>密码</td> <td><input id="password" type="password" name="firstpwd" /></td> <td></td> </tr> <tr> <td>验证密码</td> <td><input type="password" name="secondpwd" /></td> <td></td> </tr> <tr> <td>性别</td> <td><input id="sex" type="radio" name="sex" />男<input type="radio" name="sex" />女</td> <td></td> </tr> <tr> <td>年龄</td> <td><input type="text" name="age" /></td> <td></td> </tr> <tr> <td>邮箱</td> <td><input type="text" name="email" /></td> <td></td> </tr> <tr> <td>个人网页</td> <td><input type="text" name="purl" /></td> <td></td> </tr> <tr> <td>电话</td> <td><input type="text" name="telephone" /></td> <td></td> </tr> <tr> <td>附件</td> <td><input type="file" name="afile"/></td> <td></td> </tr> <tr><td colspan="3" ><input type="submit" name="submit" value="提交" /><button>重置</button></td></tr> </tbody> </table> </form> </div> </body> </html>
[2] 验证js
$(function(){ var validator = $("#myform").validate({ debug: true, //调试模式取消submit的默认提交功能 errorClass: "haha",//默认为错误的样式类为:error focusInvalid: false, onkeyup: false, submitHandler: function(form){ //表单提交句柄,为一回调函数,带一个参数:form alert("提交表单"); //form.submit(); 提交表单 }, rules: { //定义验证规则,其中属性名为表单的name属性 username: { required: true, minlength: 2, remote: "uservalid.jsp" //传说当中的ajax验证 }, firstpwd: { required: true, //minlength: 6 rangelength: [6,8] }, secondpwd: { required: true, equalTo: "#password" }, sex: { required: true }, age: { required: true, range: [0,120] }, email: { required: true, email: true }, purl: { required: true, url: true }, afile: { required: true, accept: "xls,doc,rar,zip" } }, messages: { //自定义验证消息 username: { required: "用户名是必需的!", minlength: $.format("用户名至少要{0}个字符!"), remote: $.format("{0}已经被占用") }, firstpwd: { required: "密码是必需的!", rangelength: $.format("密码要在{0}-{1}个字符之间!") }, secondpwd: { required: "密码验证是必需的!", equalTo: "密码验证需要与密码一致" }, sex: { required: "性别是必需的" }, age: { required: "年龄是必需的", range: "年龄必须介于{0}-{1}之间" }, email: { required: "邮箱是必需的!", email: "请输入正确的邮箱地址(例如 myemail@163.com)" }, purl: { required: "个人主页是必需的", url: "请输入正确的url格式,如 http://www.domainname.com" }, afile: { required: "附件是必需的!", accept: "只接收xls,doc,rar,zip文件" } }, errorPlacement: function(error, element) { //验证消息放置的地方 error.appendTo( element.parent("td").next("td") ); }, highlight: function(element, errorClass) { //针对验证的表单设置高亮 $(element).addClass(errorClass); }, success: function(label) { label.addClass("valid").text("Ok!") } /*, errorContainer: "#error_con", //验证消息集中放置的容器 errorLabelContainer: "#error_con ul", //存放消息无序列表的容器 wrapper: "li", //将验证消息用无序列表包围 validClass: "valid", //通过验证的样式类 errorElement: "em", //验证标签的名称,默认为:label success: "valid" //验证通过的样式类 */ }); $("button").click(function(){ validator.resetForm(); }); //alert($("#password").rules()["required"]); //validator.showErrors({"username": "用户名是必需的"}); /*$("button").click(function () { var str = "Hello {0}, this is {1}"; alert("'" + str + "'"); str = $.validator.format(str, ["koala","oo"]); alert("'" + str + "'"); });*/ });
[3] 远程验证程序
<%@ page language="java" import="java.io.PrintWriter" pageEncoding="gb2312"%><% String username = request.getParameter("username"); PrintWriter pw = response.getWriter(); try{ if(username.toLowerCase().equals("admin")){ pw.println("true"); }else{ pw.println("false"); } }catch(Exception ex){ ex.getStackTrace(); }finally{ pw.flush(); pw.close(); } %>
[4] 验证效果
发表评论
-
jQuery验证框架(七)注意事项 (jQuery validation)
2009-12-29 15:15 5253jQuery验证框架 七、注意事项 [1]复杂的name属 ... -
jQuery验证框架(六)内置验证方法 (jQuery validation)
2009-12-26 17:38 11569jQuery验证框架 六、框架内建的验证方法( List o ... -
jQuery验证框架(五)验证器 (jQuery validation)
2009-12-26 16:51 9336jQuery验证框架 五、验证器( Validator ) ... -
jQuery验证框架(三、四)选择器及实用工具 (jQuery validation)
2009-12-26 15:17 4007jQuery验证框架 三、定 ... -
jQuery验证框架(二)插件方法 (jQuery validation)
2009-12-25 17:56 5896jQuery验证框架 二、插件方法( Plugin meth ... -
jQuery验证框架(一) 可选项 (jQuery validation)
2009-12-25 16:24 17549jQuery验证框架 <scrip ... -
Jquery属性(一) -- Attr
2009-12-14 15:29 1874属性 [1] attr( name ) Ret ... -
Jquery选择器(九) -- Form Filters
2009-12-14 15:04 1264表单过滤器 [1] :enabled Retu ... -
Jquery选择器(八) -- Forms
2009-12-14 14:42 2185表单选择器 [1] :input Return ... -
Jquery选择器(七) -- Child Filters
2009-12-14 14:17 2056子节点过滤器 [1] :nth-child(index/ ... -
Jquery选择器(六) -- Attribute Filters
2009-12-14 12:56 2588属性过滤器 注意:在jQuery1.3中,[@attr] 形 ... -
Jquery选择器(五) -- Visibility Filters
2009-12-14 11:01 3050可见性过滤器 [1] :hidden Retu ... -
Jquery选择器(四) -- Content Filters
2009-12-14 10:21 1506内容过滤器 [1] :contains(text) ... -
Jquery选择器(三) -- Basic Filters
2009-12-14 10:01 1650基本过滤选择器 [1] :first Retu ... -
Jquery选择器(二)--Hierarchy
2009-12-11 23:35 2030层级选择器 [1] ancestor descendan ... -
Jquery选择器(一) -- Basics
2009-12-11 18:06 1148基本选择器 [1] #id Returns: Ar ... -
Jquery核心(三) Data
2009-12-11 17:43 1484jQuery数据 [1] data( name ) ... -
Jquery核心(二) $(...) jQuery Object Accessors
2009-12-11 16:45 2303jQuery对象访问器 [1] each( callback ... -
Jquery核心(一) $(...) The jQuery Function
2009-12-11 15:04 1131jQuery核心 [1] jQuery( expre ...
相关推荐
jquery.validate Validation .js验证框架 帮助 手册 文档.chm 版本 方面查询 (一)、可选项( options ) 1 ...(八)应用实例 (jQuery validation) 17 出处地址:http://koalaxyq.javaeye.com/blog/556633
jQuery Validation表单验证插件实例合集,是锋利的JQuery第七章中的一个典型实例,一步步向大家讲解如何使用基于jQuery的表单验证插件jquery.validate.js和jquery.validate.messages_cn.js的使用方法,一共包含了7个...
jquery.validate Validation .js验证框架 帮助 手册 文档.doc (一)、可选项( options ) 1 (二)插件方法 (jQuery ...(八)应用实例 (jQuery validation) 17 出处地址:http://koalaxyq.javaeye.com/blog/556633
核心内容: jquery.validationEngine.js
jquery formValidation是个强大的jquery插件,使用简单,自定义提示层,弹出警告框,能验证常用的表单输入框。
jquery validation 实例 API
jquery ui validation canlender常见的英文jquery 表单验证,日历控件使用,表单的直接修改,主要是jquery的应用
jQuery Validation Plugin v1.19.1 表单验证插件 2020年官方最新版。包含中文语言包messages_zh.js及jquery.validate.js,在dist目录中。
实例测试 博文链接:https://201610222643.iteye.com/blog/2399494
使用客户端验证可以有效的减少数据往返服务器和客户端的次数,有利于提高服务器的资源利用路,并且还能够给用户直观,快速的回应。 在Web 2.0时代,这显得... 让我们以一个简单的实例来开始我们对于jQuery Validation
jquery validation验证身份证号,护照,电话号码,email(实例代码)。需要的朋友可以过来参考下,希望对大家有所帮助
内有写好的测试页面,直接就可运行,很好的jQueryValidation验签实例
节介绍jQuery validation插件一个新的校验规则属性rangelength,通过数组方式赋值
简单来说,jQuery validation插件就是来校验表单form里面元素输入的内容是否满足业务规则,如果不满足,可以给出用户自定义的提示信息。该插件不仅默认有一些校验规则,如校验内容是否为空,内容的长度是否符合给定...
现在结合实际情况,我把项目中经常要用到的验证整理成一个实例DEMO,本文就是通过讲解这个实例来理解Validation的应用。 本实例涉及到的验证有: 用户名:长度、字符验证,重复性ajax验证(是否已存在)。 密码:...
jquery表单验证插件form_validation.js jQuery表格导出数据 jQuery表格导入Excel文件 jQuery表格拖动排序插件TableDnD jQuery常用网站商品分类筛选功能 jquery-弹出表单录入商品信息 jQuery弹出层插件popupWindow.js...
Validation是jQuery的插件,提供的方法可以大大简化验证表单的工作,功能也足够一般的需要了。rules也足够简单,很容易上手,举个简单的例子,用validation来验证注册表单。 首先确定验证的目标是: 1. 必填项不能为...
在这节我们将使用validation插件实现注册页面的验证功能,通过这个例子,可以更全面的掌握该插件的使用功能