“两个蝴蝶飞”特别喜欢"java1234知识分享网"小峰的实用主义，所以本文及其系列文章均是采用实用主义，从项目和代码的角度去分析。由于本人经验有限，嘴皮子不溜，所以学术性，概念性，底层性的知识点暂时不做介绍。文章中有错误之处，欢迎拍砖和指点。特别感谢"java1234知识分享网 "和"黑马程序员官网"，所有的资料大部分是两者提供，为了方便书写，故不一一指名出处，请谅解，非常抱歉。
上一章简单介绍了jQuery前端基本验证(二),如果没有看过，请观看上一章
前面讲到了，我们自己手写前端验证，然后相对应的做一些简单的封装。但是发现，仍然有一些不小的问题。做进一步的优化，用Juqery自身提供的相关jquery-validate.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{
}
但现在看来，不用了. 验证框架会自己进行相应的检测。这点非常好。
但是利用验证框架，仍然有一些问题需要自己处理。 就是验证后的提示语句放在了标签后面，影响美观。而且提示方式也不太好。需要继续优化一下。
写的过程中，浏览器崩溃了三次，心态都快炸了，但最后还是写完了,只是内容写得不太好。没有办法，心态已经炸了。
谢谢!!!