demo2中，我们写了一些基本的表单了，并且在js中对其进行了验证，validate中定义了一些缺省的验证，required表示必填字段，rangelength表示长度范围，用数组表示范围边界，equalTo后面跟一个id，表示跟后面跟的id的元素内容相同，这里说一下extension，表示后缀，以前版本叫accept，新版本中改为extension了，网上的搜索的关于后缀的验证都是accept，新版没了，而且extension就是在新加的additional-methods.js中。我们看一下这个版本的效果：
有点丑……因为还没做css， 但是我直接点击提交，会出现一些验证信息了，这些都是默认的信息，是源码中提供的，说明一点，验证功能生效了，我们下面就改写一下后面显示的信息，这些默认的显然不太友好。
5. 实现错误消息的本地化
我们可以指定messages消息的显示内容，也是json格式的，如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>jquery validate验证</title> <script type="text/javascript" src="https://www.jb51.net/jquery-1.11.1.js"></script> <script type="text/javascript" src="https://www.jb51.net/jquery.validate.js"></script> <script type="text/javascript" src="https://www.jb51.net/additional-methods.js"></script> <script type="text/javascript"> $(function(){ //让当前表单调用validate方法，实现表单验证功能 $("#ff").validate({ debug:true, //调试模式，即使验证成功也不会跳转到目标页面 rules:{ //配置验证规则，key就是被验证的dom对象，value就是调用验证的方法(也是json格式) sname:{ required:true, //必填。如果验证方法不需要参数，则配置为true rangelength:[6,12] }, spass:{ required:true, rangelength:[6,12] }, spass2:{ required:true, equalTo:'#spass' //表示和id="spass"的值相同 }, saddress:{ required:true }, semail:{ required:true, email:true }, simage:{ required:true, extension:'gif|jpe?g|png' } }, messages:{ sname:{ required:"请输入用户名", rangelength:$.validator.format("用户名长度在必须为：{0}-{1}之间") }, spass:{ required:"请输入密码", rangelength:$.validator.format("字段长度必须为：{0}-{1}之间") }, spass2:{ required:"请再次输入密码", equalTo:"两次密码必须一致" //表示和id="spass"的值相同 }, saddress:{ required:"请选择地址" }, semail:{ required:"请填写邮件", email:"邮箱格式不正确" }, simage:{ required:"请选择要上传的头像", extension:"文件后缀名必须为jpg,jpeg,gif,png" } } }); }); </script> </head> <body> <!-- body中的内容不变，省略不写了 --> </body> </html>
相当于覆写了原来默认的消息提示，来看下效果：
这就有点感觉了。继续往下完善。
6. 实现远程验证
所谓远程验证，指的是当用户注册时输入用户名时，系统得从数据库中查询是否已经有该用户名了，如果有则告诉用户已经有人注册过了该名字了，但是我们不用去查数据库，我们写个Action模拟下即可，主要是实现validate插件和Action之间的通信。看demo4.jsp：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>jquery validate验证</title> <script type="text/javascript" src="https://www.jb51.net/js/jquery-1.11.1.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/jquery.validate.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/additional-methods.js"></script> <script type="text/javascript"> $(function(){ //让当前表单调用validate方法，实现表单验证功能 $("#ff").validate({ debug:true, //调试模式，即使验证成功也不会跳转到目标页面 onkeyup:null, //当丢失焦点时才触发验证请求 rules:{ //配置验证规则，key就是被验证的dom对象，value就是调用验证的方法(也是json格式) sname:{ required:true, //必填。如果验证方法不需要参数，则配置为true rangelength:[3,12], remote:{ url:"ajax_check.action", type:"post" } }, spass:{ required:true, rangelength:[6,12] }, spass2:{ required:true, equalTo:'#spass' //表示和id="spass"的值相同 }, saddress:{ required:true }, semail:{ required:true, email:true }, simage:{ required:true, extension:'gif|jpe?g|png' } }, messages:{ sname:{ required:"请输入用户名", rangelength:$.validator.format("用户名长度在必须为：{0}-{1}之间"), remote:"该用户名已存在！" }, spass:{ required:"请输入密码", rangelength:$.validator.format("字段长度必须为：{0}-{1}之间") }, spass2:{ required:"请再次输入密码", equalTo:"两次密码必须一致" //表示和id="spass"的值相同 }, saddress:{ required:"请选择地址" }, semail:{ required:"请填写邮件", email:"邮箱格式不正确" }, simage:{ required:"请选择要上传的头像", extension:"文件后缀名必须为jpg,jpeg,gif,png" } } }); }); </script> </head> <body> <!-- body中的内容不变，省略不写了 --> </body> </html>