JAVA_WEB项目之j使用query的验证框架的例子

来源：互联网发布：腾讯网络认证编辑：程序博客网时间：2024/06/05 07:18

一般我们在做网站开发的时候都会遇到前台表单的验证，以及远程验证：类似于注册的用户名是否被占用，下面贴出个人在学习过程中编写的例子：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>首页</title>     <script type="text/javascript" src="/shop/js/jquery-1.3.js"></script>     <script type="text/javascript" src="/shop/js/jquery.validate.js"></script>     <script type="text/javascript">     $(function(){     //自定义验证方法(方法名，方法体，错误消息)     $.validator.addMethod("checkText",function(value, element,param){     //根据返回true或false来表示验证是否通过     console.log(value);     console.log(element);     console.log(param[0]+"-"+param[1]);     return false;     },"内容不能为空");     $("form").validate({     debug:true,     //文本框在丢失焦点的时候才验证     onkeyup:false,     rules:{     username:{     required:true,     rangelength:[4,12],     remote:{//远程验证，默认在表单会把参数和参数值传递过去     url: "shopAjax_ajaxDemo.action",     type:"post"     }     },     pass:{     required:true,     rangelength:[4,12]     },     passconfirm:{     equalTo:"#pass"     },     email:{     email:true     },     file:{     required:true,     accept:"gif|jpg"     },     address:{     required:true     },     test:{     checkText:[1,16]     }     },     messages:{     username:{     required:"用户名不能为空",     rangelength:$.format("用户名的长度必须在{0}-{1}之间"),     remote:"用户名被占用"     },     pass:{     required:"密码不能为空",     rangelength:$.format("密码的长度必须在{0}-{1}之间")     },     passconfirm:{     equalTo:"密码不一致"     },     email:{     email:"输入的邮箱格式不正确"     },     file:{     required:"文件必须上传",     accept:$.format("上传的文件格式必须为{0}")     },     address:{   required:"请选择地址"   }        }          });     });     </script>  </head>  <body>  <form action="http://www.baidu.com" method="post">  用户名：<input name="username" type="text"></br>  密码：<input name="pass" type="text" id="pass"></br>  确认密码：<input name="passconfirm" type="text"></br>  邮箱: <input type="text" name="email" /><br />  照片:<input type="file" name="file" /><br>  <select name="address">  <option value="广东">广东</option>  <option value="广西">广西</option>  </select></br>  测试：<input type="type" name="test"><br>  <input type="submit" value="提交">  </form>  </body></html>

struts。xml配置：

<action name="shopAjax_*" class="registerDemo" method="{1}"><result name="stream" type="stream"></result></action>

后台远程验证：

package com.shop.action;import java.io.ByteArrayInputStream;import java.io.InputStream;import org.springframework.context.annotation.Scope;import org.springframework.stereotype.Controller;import com.sun.xml.internal.messaging.saaj.util.ByteInputStream;@Controller("registerDemo")@Scope("prototype")public class RegisterDemo {private InputStream inputStream;private String username;public InputStream getInputStream() {return inputStream;}public void setInputStream(InputStream inputStream) {this.inputStream = inputStream;}public String getUsername() {return username;}public void setUsername(String username) {this.username = username;}public String ajaxDemo(){if(username.equals("admin")){System.out.println(username);inputStream=new ByteArrayInputStream("false".getBytes());}else{System.out.println(username);inputStream=new ByteArrayInputStream("true".getBytes());}return "stream";}}

</pre>结果显示：<p></p><p><img src="http://img.blog.csdn.net/20140722170147552?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2hlbmNodWRvbmdzZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /></p><p>如何制定错误消息的显示位置以及远程验证成功后的结果显示，下面用一个完整的例子来显示。</p><p><pre name="code" class="java"><%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>首页</title>     <script type="text/javascript" src="/shop/js/jquery-1.3.js"></script>     <script type="text/javascript" src="/shop/js/jquery.validate.js"></script>     <script type="text/javascript">     $(function(){     //自定义验证方法(方法名，方法体，错误消息)     $.validator.addMethod("checkText",function(value, element,param){     //根据返回true或false来表示验证是否通过     console.log(value);     console.log(element);     console.log(param[0]+"-"+param[1]);     return false;     },"内容不能为空");     $("form").validate({     debug:true,     //文本框在丢失焦点的时候才验证     onkeyup:false,     rules:{     username:{     required:true,     rangelength:[4,12],     remote:{//远程验证，默认在表单会把参数和参数值传递过去     url: "shopAjax_ajaxDemo.action",     type:"post"     }     },     pass:{     required:true,     rangelength:[4,12]     },     passconfirm:{     equalTo:"#pass"     },     email:{     email:true     },     file:{     required:true,     accept:"gif|jpg"     },     address:{     required:true     },     test:{     checkText:[1,16]     }     },     messages:{     username:{     required:"用户名不能为空",     rangelength:$.format("用户名的长度必须在{0}-{1}之间"),     remote:"用户名被占用"     },     pass:{     required:"密码不能为空",     rangelength:$.format("密码的长度必须在{0}-{1}之间")     },     passconfirm:{     equalTo:"密码不一致"     },     email:{     email:"输入的邮箱格式不正确"     },     file:{     required:"文件必须上传",     accept:$.format("上传的文件格式必须为{0}")     },     address:{   required:"请选择地址"   }        },     errorPlacement:function(error,element){//跟一个函数,可以自定义错误放到哪里     element.parent("td").next().html(error);     }     ,     success:function(label){//验证成功后捆版的函数，参数是包含了错误消息的标签默认是label     $(label).html(" ");     $(label).attr("class","success");     alert($(label).attr("class"));          }     });     });     </script>     <style type="text/css">     /**     错误消息的样式     */     form label{     color:red;     background-image: url("image/error.png");     background-repeat:no-repeat;     padding-left:25px;     }      /**     成功消息的样式         */     .success{     background-repeat:no-repeat;     padding-left:25px;     background-image: url("image/right.png");     }     </style>  </head>  <body>  <form action="http://www.baidu.com" method="post">  <table border="1" width="600px">  <tr>  <td>用户名：</td>  <td><input name="username" type="text"></br></td>  <td></td>  </tr>  <tr>  <td>密码：</td>  <td><input name="pass" type="text" id="pass"></br></td>  <td> </td>  </tr>  <tr>  <td>确认密码：</td>  <td><input name="passconfirm" type="text"></br></td>  <td></td>  </tr>  <tr>  <td>邮箱: </td>  <td><input type="text" name="email" /><br /></td>  <td> </td>  </tr>  <tr>  <td>照片:</td>  <td><input type="file" name="file" /><br></td>  <td> </td>  </tr>  <tr>  <td>地址</td>  <td><select name="address">  <option value="广东">广东</option>  <option value="广西">广西</option>  </select></br>  </td>  <td> </td>  </tr>  <tr>  <td>测试：</td>  <td><input type="type" name="test"><br></td>  <td> </td>  </tr>  <tr>  <td colspan="3" align="center"><input type="submit" value="提交"></td>  </tr>  </table>  </form>  </body></html>

显示的结果：

0 0