zoukankan      html  css  js  c++  java

  • jQuery验证框架

    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 {  10em; float: left; }   
    12.         label.haha {color: red; padding-left: 18px; vertical-align: top; 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 {  10em; float: left; }
		label.haha {color: red; padding-left: 18px; vertical-align: top; 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] 验证效果





  • 相关阅读:
    Java利用Base64编码和解码图片文件
    SQL查询结果列拼接成逗号分隔的字符串：group_concat
    两个正则表达式：匹配固定电话号码，匹配手机号码
    IDEA导入Junit jar包，在JavaSE的Module中使用Junit测试
    如何正确遍历删除List中的元素(普通for循环、增强for循环、迭代器iterator、removeIf+方法引用)
    Java Springboot 根据图片链接生成图片下载链接 及 多个图片打包zip下载链接
    fastjson List<> 转Json , Json 转List<>
    PHP结合memcacheq消息队列解决并发问题
    Redis与Memcached的区别
    yii2 中excel表导出
  • 原文地址：https://www.cnblogs.com/yangy608/p/1874090.html
Copyright © 2011-2022 走看看