`
BlueFuture
  • 浏览: 53100 次
  • 性别: Icon_minigender_1
  • 来自: 大连
最近访客 更多访客>>
社区版块
存档分类
最新评论

jQuery验证框架（八）应用实例 (jQuery validation)

jQuery框架JavaScriptCSSOO 
阅读更多

jQuery验证框架

八、应用实例

[1] 验证页面

Html代码 复制代码
  1. <%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>  
  2. <html>  
  3.   <head>  
  4.     <title>jquery验证框架</title>  
  5.     <link rel="stylesheet" type="text/css" href="css/index.css">  
  6.     <script type="text/javascript" src=js/jquery-1.3.2.min.js></script>  
  7.     <script type="text/javascript" src=js/jquery.validate.pack.js></script>  
  8.     <script type="text/javascript" src=js/jquery.form.js></script>  
  9.     <script type="text/javascript" src=js/valid.js></script>  
  10.     <style type="text/css">  
  11.         label { width: 10em; float: left; }   
  12.         label.haha {color: red; padding-left: 18px; vertical-align: top;width: 196px; background: url("images/unchecked.gif") no-repeat;}   
  13.         input.haha { border: 1px solid red; }   
  14.         label.valid {background: url("images/checked.gif") no-repeat; color: #065FB9;}   
  15.         input.focus { border: 2px solid green; }   
  16.         ul li{ display: block;}   
  17.     </style>  
  18.   </head>  
  19.      
  20.   <body>  
  21.      
  22.   <div id="form_con">  
  23.         <form class="cmxform" id="myform" method="post" action="">  
  24.             <table cellspacing="0" cellpadding="0">  
  25.                 <tbody>  
  26.                     <tr>  
  27.                         <td>用户名</td>  
  28.                         <td><input type="text" name="username" class="required" /></td>  
  29.                         <td></td>  
  30.                     </tr>  
  31.                     <tr>  
  32.                         <td>密码</td>  
  33.                         <td><input id="password" type="password" name="firstpwd" /></td>  
  34.                         <td></td>  
  35.                     </tr>  
  36.                     <tr>  
  37.                         <td>验证密码</td>  
  38.                         <td><input type="password" name="secondpwd" /></td>  
  39.                         <td></td>  
  40.                     </tr>  
  41.                     <tr>  
  42.                         <td>性别</td>  
  43.                         <td><input id="sex" type="radio" name="sex" />男<input type="radio" name="sex" />女</td>  
  44.                         <td></td>  
  45.                     </tr>  
  46.                     <tr>  
  47.                         <td>年龄</td>  
  48.                         <td><input type="text" name="age" /></td>  
  49.                         <td></td>  
  50.                     </tr>  
  51.                     <tr>  
  52.                         <td>邮箱</td>  
  53.                         <td><input type="text" name="email" /></td>  
  54.                         <td></td>  
  55.                     </tr>  
  56.                     <tr>  
  57.                         <td>个人网页</td>  
  58.                         <td><input type="text" name="purl" /></td>  
  59.                         <td></td>  
  60.                     </tr>  
  61.                     <tr>  
  62.                         <td>电话</td>  
  63.                         <td><input type="text" name="telephone" /></td>  
  64.                         <td></td>  
  65.                     </tr>  
  66.                     <tr>  
  67.                         <td>附件</td>  
  68.                         <td><input type="file" name="afile"/></td>  
  69.                         <td></td>  
  70.                     </tr>  
  71.                     <tr><td colspan="3" ><input type="submit" name="submit" value="提交" /><button>重置</button></td></tr>  
  72.                 </tbody>             
  73.             </table>  
  74.         </form>  
  75.   </div>     
  76.   </body>  
  77. </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

Js代码 复制代码
  1. $(function(){   
  2.     var validator = $("#myform").validate({   
  3.         debug: true,       //调试模式取消submit的默认提交功能   
  4.         errorClass: "haha",//默认为错误的样式类为：error   
  5.         focusInvalid: false,   
  6.         onkeyup: false,   
  7.         submitHandler: function(form){   //表单提交句柄,为一回调函数，带一个参数：form   
  8.             alert("提交表单");   
  9.             //form.submit();   提交表单   
  10.         },   
  11.         rules: {           //定义验证规则,其中属性名为表单的name属性   
  12.             username: {   
  13.                 required: true,   
  14.                 minlength: 2,   
  15.                 remote: "uservalid.jsp"  //传说当中的ajax验证   
  16.             },   
  17.             firstpwd: {   
  18.                 required: true,   
  19.                 //minlength: 6   
  20.                 rangelength: [6,8]   
  21.             },   
  22.             secondpwd: {   
  23.                 required: true,   
  24.                 equalTo: "#password"  
  25.             },   
  26.             sex: {   
  27.                 required: true  
  28.             },   
  29.             age: {   
  30.                 required: true,   
  31.                 range: [0,120]   
  32.             },   
  33.             email: {   
  34.                 required: true,   
  35.                 email: true  
  36.             },   
  37.             purl: {   
  38.                 required: true,   
  39.                 url: true  
  40.             },   
  41.             afile: {   
  42.                 required: true,   
  43.                 accept: "xls,doc,rar,zip"  
  44.             }   
  45.         },   
  46.         messages: {       //自定义验证消息   
  47.             username: {   
  48.                 required: "用户名是必需的！",   
  49.                 minlength: $.format("用户名至少要{0}个字符！"),   
  50.                 remote: $.format("{0}已经被占用")   
  51.             },   
  52.             firstpwd: {   
  53.                 required: "密码是必需的！",   
  54.                 rangelength: $.format("密码要在{0}-{1}个字符之间！")   
  55.             },   
  56.             secondpwd: {   
  57.                 required: "密码验证是必需的！",     
  58.                 equalTo: "密码验证需要与密码一致"  
  59.             },   
  60.             sex: {   
  61.                 required: "性别是必需的"  
  62.             },   
  63.             age: {   
  64.                 required: "年龄是必需的",   
  65.                 range: "年龄必须介于{0}-{1}之间"  
  66.             },   
  67.             email: {   
  68.                 required: "邮箱是必需的！",   
  69.                 email: "请输入正确的邮箱地址（例如 myemail@163.com）"  
  70.             },   
  71.             purl: {   
  72.                 required: "个人主页是必需的",   
  73.                 url: "请输入正确的url格式,如 http://www.domainname.com"  
  74.             },   
  75.             afile: {   
  76.                 required: "附件是必需的！",   
  77.                 accept: "只接收xls,doc,rar,zip文件"  
  78.             }   
  79.         },   
  80.         errorPlacement: function(error, element) {  //验证消息放置的地方   
  81.             error.appendTo( element.parent("td").next("td") );   
  82.         },   
  83.         highlight: function(element, errorClass) {  //针对验证的表单设置高亮   
  84.             $(element).addClass(errorClass);   
  85.         },   
  86.         success: function(label) {     
  87.                     label.addClass("valid").text("Ok!")     
  88.             }     
  89.            
  90.         /*,  
  91.         errorContainer: "#error_con",               //验证消息集中放置的容器  
  92.         errorLabelContainer: "#error_con ul",       //存放消息无序列表的容器  
  93.         wrapper: "li",                              //将验证消息用无序列表包围  
  94.         validClass: "valid",                        //通过验证的样式类  
  95.         errorElement: "em",                         //验证标签的名称，默认为：label  
  96.         success: "valid"                            //验证通过的样式类  
  97.         */  
  98.     });   
  99.     $("button").click(function(){   
  100.         validator.resetForm();   
  101.     });   
  102.     //alert($("#password").rules()["required"]);   
  103.     //validator.showErrors({"username": "用户名是必需的"});   
  104.     /*$("button").click(function () {  
  105.         var str = "Hello {0}, this is {1}";  
  106.         alert("'" + str + "'");  
  107.         str = $.validator.format(str, ["koala","oo"]);  
  108.         alert("'" + str + "'");  
  109.     });*/  
  110.                
  111. });   
$(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] 远程验证程序

Java代码 复制代码
  1. <%@ page language="java" import="java.io.PrintWriter" pageEncoding="gb2312"%><%   
  2.     String username = request.getParameter("username");   
  3.     PrintWriter pw = response.getWriter();   
  4.     try{   
  5.         if(username.toLowerCase().equals("admin")){   
  6.             pw.println("true");   
  7.         }else{   
  8.             pw.println("false");   
  9.         }   
  10.     }catch(Exception ex){   
  11.         ex.getStackTrace();   
  12.     }finally{   
  13.         pw.flush();   
  14.         pw.close();   
  15.     }   
  16. %>  
<%@ 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 val ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery.validate Validation .js验证框架 帮助 手册 文档 chm

    jquery.validate Validation .js验证框架 帮助 手册 文档.chm 版本 方面查询 （一）、可选项( options ) 1 ...（八）应用实例 (jQuery validation) 17 出处地址：http://koalaxyq.javaeye.com/blog/556633

    jQuery Validation表单验证插件实例打包.rar

    jQuery Validation表单验证插件实例合集，是锋利的JQuery第七章中的一个典型实例，一步步向大家讲解如何使用基于jQuery的表单验证插件jquery.validate.js和jquery.validate.messages_cn.js的使用方法，一共包含了7个...

    jquery 前端验证框架

    本文将详细介绍jQuery的前端验证框架，并通过具体的Demo实例进行解析。 **一、jQuery基础知识** jQuery是由John Resig于2006年创建的一个轻量级的JavaScript库，它的核心功能包括DOM操作、事件处理、动画效果以及...

    很漂亮的Jquery验证框架（内带实例）

    jQuery作为一款强大的JavaScript库，提供了丰富的功能扩展，其中jQuery Validation Engine是一款极其出色的表单验证框架，它以其直观、易用且功能强大而受到广大开发者的青睐。本篇文章将详细介绍jQuery Validation ...

    jQuery验证框架

    #### 八、应用实例 下面是一个简单的示例，展示如何使用jQuery Validation Plugin进行表单验证： ```html &lt;script src="js/jquery.min.js"&gt; &lt;script src="js/jquery.validate.pack.js"&gt; $(document).ready...

    jQuery验证框架[收集].pdf

    《jQuery验证框架》是软件开发领域中用于前端数据验证的一款高效工具，主要目的是确保用户在交互过程中输入的数据符合预设的规则，从而提高网站或应用的用户体验和数据准确性。jQuery验证框架是基于jQuery库构建的，...

    jQuery Validation 1.19.1表单验证 2020年 最新完整版 官方网站下载

    jQuery Validation Plugin v1.19.1 表单验证插件 2020年官方最新版。包含中文语言包messages_zh.js及jquery.validate.js，在dist目录中。

    jquery formValidation表单验证插件实例

    1. **初始化插件**：在jQuery的`$(document).ready()`函数中，使用`$.fn.formValidation`方法初始化表单验证。指定一个容器（通常是包含表单的元素），并传递一个配置对象： ```javascript $(document).ready...

    jQuery验证控件 Validation Plugin - v1.14.0汉化及附带案例

    使用jQuery Validation Plugin的基本步骤是：选择要验证的表单，然后调用`validate()`方法。例如： ```javascript $(document).ready(function () { $('#myForm').validate({ rules: { // 规则定义 }, ...

    jquery ui validation canlender美工实例

    《jQuery UI Validation与Calendar美工实例详解》 在Web开发中，用户界面的美观与交互性至关重要，...总的来说，理解并掌握jQuery UI Validation和Calendar组件的使用，对于提升Web应用的质量和用户体验具有重要意义。

    JQuery验证框架

    #### 三、插件方法(jQueryvalidation) 除了上述的配置项外，JQuery验证框架还提供了一些插件方法来进一步增强其功能： 1. **`$.validator.addMethod(name, method, message)`**：用于向验证框架添加新的验证方法。...

    jquery-validation实例+API

    本文将深入探讨jQuery Validation的实例和API，帮助你更好地理解和应用这个插件。 首先，我们来看jQuery Validation的基本使用。`jQuery.validate.js`是该插件的核心文件，包含了所有验证规则和方法。引入这个文件...

    jquery会员注册表单验证实例演示

    除了手动编写验证逻辑，还可以使用jQuery插件，如jQuery Validation Plugin。这个插件提供了一系列内置验证方法和自定义规则，使表单验证更加便捷。例如，我们可以使用`rules()`和`messages()`方法为表单元素添加...

    jquery-validation-1.8.0下载

    本篇文章将围绕"jquery-validation-1.8.0"这一版本进行详细介绍，并探讨其核心功能、使用方法以及常见应用场景。 一、jQuery Validation插件概述 jQuery Validation插件是基于jQuery库的一个扩展，它使得在网页中...

    jquery.validate Validation .js验证框架 帮助 手册 文档.doc

    这个文档主要涵盖了一系列关于jQuery Validate框架的使用方法、可选参数、验证器和实用工具。以下是对这些知识点的详细说明： 1. **启用调试模式**： - `debug` 参数是一个布尔值，默认为 `false`。如果设置为 `...

    jquery-validation-1.8.1里面有很多例子

    《jQuery Validation插件详解——基于jquery-validation-1.8.1实例分析》 在Web开发领域，表单验证是不可或缺的一环，它确保用户输入的数据符合预期格式，从而提高用户体验并减少服务器端处理的压力。jQuery ...

    用户注册验证JQuery插件及实例

    在这个“用户注册验证JQuery插件及实例”中，我们将探讨如何使用JQuery这一强大的JavaScript库来实现高效、友好的前端验证。 JQuery是一个轻量级、高性能的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计...

    jquery会员注册表单验证实例演示.zip

    在这个"jquery表单验证实例"中，我们还可以期待看到如何使用AJAX技术实现异步验证。通过发送请求到服务器，我们可以验证用户输入是否唯一（比如检查用户名是否已被占用）。这需要结合使用jQuery的`.ajax()`或`.get...

    jquery表单验证实例网站会员注册表单验证提交form表单代码

    jQuery生态系统中有许多优秀的表单验证插件，如jQuery Validation Plugin，它可以提供更丰富的验证规则和定制化选项。在大型项目中，使用这类插件可以简化代码并提高可维护性。 总的来说，jQuery为表单验证提供了...

    jQuery formValidator表单验证插件实例（php）

    在提供的`form`文件中，包含了使用jQuery formValidator进行表单验证的示例代码，你可以根据这些代码进行学习和实践，理解其工作原理并应用于自己的项目中。 总结，jQuery formValidator是一个功能强大的表单验证...

Magicbox
Global site tag (gtag.js) - Google Analytics