- 浏览: 51887 次
- 性别:
- 来自: 大连
最近访客 更多访客>>
最新评论
-
lovefly_zero:
很感谢你的文章 不过调整一下排版吧 冗余code太多了。
jQuery验证框架(六)内置验证方法 (jQuery validation) -
tomorrow009:
受交了~
RoR的部署方案选择
jQuery验证框架
八、应用实例
[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>
<%@ 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 + "'");
- });*/
- });
$(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();
- }
- %>
<%@ 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)
2010-05-17 16:27 1251jQuery验证框架 七、注意事项 [1]复杂的name属性值 ... -
jQuery验证框架(六)内置验证方法 (jQuery validation)
2010-05-17 16:26 1086jQuery验证框架 六、框架内建的验证方法( List of ... -
jQuery验证框架(五)验证器 (jQuery validation)
2010-05-17 16:25 1431jQuery验证框架 五、验证器( Validator ) ... -
jQuery验证框架(三、四)选择器及实用工具 (jQuery validation)
2010-05-17 16:24 749jQuery验证框架 三、定制的选择器(Custom Sele ... -
jQuery验证框架(二)插件方法 (jQuery validation)
2010-05-17 16:24 1175jQuery验证框架 二、插件方法( Plugin metho ... -
jQuery验证框架(一) 可选项 (jQuery validation)
2010-05-17 16:23 1467jQuery验证框架 Html代码 & ... -
Jquery属性(一) -- Attr
2010-05-17 16:22 995属性 [1] attr( name ) Retur ... -
Jquery选择器(九) -- Form Filters
2010-05-17 16:22 859表单过滤器 [1] :enabled Return ... -
Jquery选择器(八) -- Forms
2010-05-17 16:21 727表单选择器 [1] :input Returns: ... -
Jquery选择器(七) -- Child Filters
2010-05-17 16:20 941子节点过滤器 [1] :nth-child(index/ev ... -
Jquery选择器(六) -- Attribute Filters
2010-05-17 16:20 944属性过滤器 注意:在jQuery1.3中,[@attr] 形式 ... -
Jquery选择器(五) -- Visibility Filters
2010-05-17 16:19 898可见性过滤器 [1] :hidden Return ... -
Jquery选择器(四) -- Content Filters
2010-05-17 16:19 716内容过滤器 [1] :contains(text) ... -
Jquery选择器(三) -- Basic Filters
2010-05-17 16:18 898基本过滤选择器 [1] :fi ... -
Jquery选择器(二)--Hierarchy
2010-05-17 16:17 817层级选择器 [1] ancestor descendant ... -
Jquery选择器(一) -- Basics
2010-05-17 16:17 677基本选择器 [1] #id Returns: Ar ... -
Jquery核心(三) Data
2010-05-17 16:16 772jQuery数据 [1] data( name ) ... -
Jquery核心(二) $(...) jQuery Object Accessors
2010-05-17 16:15 958jQuery对象访问器 [1] each( callback ... -
Jquery核心(一) $(...) The jQuery Function
2010-05-17 16:14 937jQuery核心 [1] jQuery( expression ...
相关推荐
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 Validation Plugin v1.19.1 表单验证插件 2020年官方最新版。包含中文语言包messages_zh.js及jquery.validate.js,在dist目录中。
核心内容: jquery.validationEngine.js
jquery formValidation是个强大的jquery插件,使用简单,自定义提示层,弹出警告框,能验证常用的表单输入框。
jquery validation 实例 API
jquery ui validation canlender常见的英文jquery 表单验证,日历控件使用,表单的直接修改,主要是jquery的应用
实例测试 博文链接: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插件实现注册页面的验证功能,通过这个例子,可以更全面的掌握该插件的使用功能