前面讲到了，我们自己手写前端验证，然后相对应的做一些简单的封装。但是发现，仍然有一些不小的问题。做进一步的优化，用Juqery自身提供的相关jquery-validate.js验证框架进行相应的验证。
一 所需要用的JS库
第一: 需要用到jQuery库 jquery.js
第二: 用jQuery框架库, jquery-validate.js
第三: 方法库 additional-methods.js
第四: 国际化库 messages_zh.min.js
第五: 添加相应的图标，正确图标用checked.gif, 错误图标用unchecked.gif
都放置在Plugins文件夹下:
二 用Class进行相关的验证
在form1.jsp中添加相应的页面，需要注意以下几点:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <!--引入相应的JS库--> <script src="Plugins/jquery-1.7.2.js"></script> <script src="Plugins/jquery.validate.min.js"></script> </head> <body> <form id="myform" class="cmxform" action="#" method="post"> <div> <label >姓名</label> <input type="text" id="cname" name="name" class="required" minlength="4" maxlength="10"/> </div> <div> <label>电子邮件</label> <input type="text" id="cemail" name="email" class="email"/><!--不为空,是email格式--> </div> <div> <label>网址</label> <input type="text" id="curl" name="url" class="url"/> </div> <div> <label>你的评论</label> <textarea cols="20" rows="3" id="ccomment" name="comment" class="required"></textarea> </div> <div> <input type="submit" value="提交"> </div> </form> </body> </html>
要注意以下四点:
1. form表单的class应该为'cmxform' 即class="cmxform"
2. input标签或者textarea标签中, id的值应该为'c'+input标签name的值。 如name为email,则相应的id为'cemail'
3. 在class中添加相关的验证，如required(必填),email,url等。
4. 不要忘记引入验证，否则验证是不起作用的。
重启服务器，进行相关的验证。
四 中文化提示信息
现在提示信息是默认的语句，而且是英文的。不太方便，换成中文的。只需要引入相应的JS国际化库即可.
<script src="Plugins/jquery-1.7.2.js"></script> <script src="Plugins/jquery.validate.min.js"></script> <!-- 引入国际化库 --> <script src="Plugins/messages_zh.min.js"></script>
重启服务器，进行验证:
五 自定义提示信息
提示信息是jquery-validate.js验证框架自带的，为了更方便人性化，需要自定义提示信息。
在JS中，添加一个与rules同级的messages标签即可.
<script> $(function() { //用表单来调用validate()的插件方法,里面填写一个对象 //以rules开头 $("#myform").validate({ rules : { //与表单的name值相同 name : { required : true, maxlength : 10, minlength : 5, //与类型同一级目录 }, email : { required : true, email : true }, url : { url : true }, comment : { required : true } }, //messages与rules同级,里面填写相应的自定义提示 messages : { //与表单的name值相同 name : { required : '姓名不能为空', maxlength : '姓名最大值不能超过10', minlength:'最小值不能超过5' }, email : { email : '邮箱格式不合法' }, url : { url : '网格式不合法' }, comment : { required : '请输入你的评论' } } }) }) </script>
重启服务器，进行相关的验证
六 添加成功和错误的图标
为了更加人性化一点，需要添加相对应的图标。如果正确了，显示正确的图标，如果错误了，显示错误的图标。
1. 先定义一个CSS的样式，将正确图标和错误图标引入。
<style type="text/css"> em.error { background:url("Plugins/unchecked.gif") no-repeat 0px 0px; padding-left: 16px; } em.success { background:url("Plugins/checked.gif") no-repeat 0px 0px; padding-left: 16px; } </style>
2. 在与rules,messages同级的目录下，添加关于图标的支持。
errorElement: "em", //可以用其他标签，记住把样式也对应修改 success: function(label) { //label指向上面那个错误提示信息标签em label.text(" ") //清空错误提示消息 .addClass("success"); //加上自定义的success类 }
重启服务器，进行相关的验证。
七 添加自定义验证
有时候，需要添加自定义的验证。 这里添加一个手机号的验证。
在HTML中添加手机的标签
<div> <label>你的电话</label> <input type="text" name="tel"/> </div>
在JS中，准确的说是在additional-methods.js添加对tel的相关验证。 在additional-method.js的最后，按照上面的格式进行仿写，
//添加自定义的验证 $.validator.addMethod( //这个tel标签就是名称，类似于定义好的email标签 "tel",function(value,element,param){ //传入的是参数的形式,其中value指我们在标签中 //写入的值,element指我们要操作的那个对象, //param指得是我们传入的参数，如true,2等. //自定义的时候，一般指的是正则表达式 var reg=new RegExp(param); return reg.test(value); }, //输入错误时显示的提示信息 即需要传入三个参数,tel,function,和错误信息. "电话号码格式不正确" ); }));
在JS中，添加相关的验证信息，在rules里面
comment : { required : true }, //那么在电话号码时，那么rules中: //这个tel指的是标签中的值 tel:{ //这个tel指的是上面定义的值,正则验证. tel: '^\\d{11}$' }
重启服务器，进行相关的验证
正确时:
当输入一次成功后，即使下面出错，也会显示正确的图标 ，但会显示错误的消息提示。
怀疑是jquery版本的问题。将jquery版本换成1.3版本后,
<script src="Plugins/jquery-1.3.2.min.js"></script>
上面这个问题就不存在了。
八 Ajax形式的验证
对用户名进行相关的ajax形式的验证。
需要在rules下面，用一个remote进行相关的验证。 remote已经被系统定义好了。
rules : { //与表单的name值相同 name : { required : true, remote: { type: "post", url: '/Validate/ValidateServlet?a='+new Date().getTime(), data: { name: function() { return $("input[name='name']").val(); } }, dataType: "html", //这里，不是以前的success了. dataFilter: function(data, type) { if (data == "true") return false; else return true; } }, maxlength : 10, minlength : 5 //与类型同一级目录 },
只能返回true或者false。
这时，需要创建一个Servlet了。
简单Servlet的内容有:
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8"); System.out.println("运动了吗"); //先得到输入的值 String name=request.getParameter("name"); String result=""; if("admin".equals(name)){ result="true"; }else{ result="false"; } System.out.println("输出结果是:"+result); response.getWriter().print(result); }
不要忘记在web.xml中进行相关的配置。
<servlet> <servlet-name>ValidateServlet</servlet-name> <servlet-class>com.yjl.servlet.ValidateServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>ValidateServlet</servlet-name> <url-pattern>/ValidateServlet</url-pattern> </servlet-mapping>
重启服务器，进行相关的验证
九 提交表单验证（不必用）
虽然标签验证时，有错误，但是当点击提交按钮时，也是无法进行提交的，与需求一致。
本来准备利用这种方式解决的，
$("#myform").validate({ submitHandler:function(form){ //表单提交后要执行的内容 alert("成功了"); form.submit(); } , rules{ }
但现在看来，不用了. 验证框架会自己进行相应的检测。这点非常好。
但是利用验证框架，仍然有一些问题需要自己处理。 就是验证后的提示语句放在了标签后面，影响美观。而且提示方式也不太好。需要继续优化一下。
写的过程中，浏览器崩溃了三次，心态都快炸了，但最后还是写完了,只是内容写得不太好。没有办法，心态已经炸了。
谢谢!!!
