springmvc中注册功能与validate.js验证并结合图片验证码

话不多话，直接上代码。

1、首先写一个form表单

<form action="user/register.do" method="post" id="registerForm">
		<div>
			<input type="text" name="email" class="email" placeholder="输入邮箱地址" οncοntextmenu="return false" οnpaste="return false" />
		</div>
		<div>
			<input type="text" name="username" class="username" placeholder="您的用户名" autocomplete="off"/>
		</div>
		<div>
			<input type="password" name="password" class="password" placeholder="输入密码" οncοntextmenu="return false" οnpaste="return false" />
		</div>
		<div>
			<input type="password" name="confirm_password" class="confirm_password" placeholder="再次输入密码" οncοntextmenu="return false" οnpaste="return false" />
		</div>
		<div>
			<input type="text" name="mobilePhone" class="mobilePhone" placeholder="输入手机号码" autocomplete="off" id="number"/>
		</div>
		<div>
			<input type="text"  class="kaptchaImage" name="kaptchaImage" style="width:150px;"
			 placeholder="输入验证码" autocomplete="off"/>
			 
			 <img src="image/captcha-image.do" width="110" height="40" id="kaptchaImage" 
			 	οnclick="changeValidateCode(this);" style="margin-bottom:-15px"/>   
		</div>

		<button id="submit" type="submit">注 册</button>
	</form>

  2、其中有一个验证码，需要我们在后台写生成的功能，img标签中src的地址就是我们后台生成验证码的地址。

  首先是java代码

@Controller  
@RequestMapping("/image")
public class CaptchaImageCreateController {
	   
    private Producer captchaProducer = null;  
  
    @Autowired  
    public void setCaptchaProducer(Producer captchaProducer) {  
        this.captchaProducer = captchaProducer;  
    }  
  
    @RequestMapping("/captcha-image.do")  
    public ModelAndView handleRequest(HttpServletRequest request, HttpServletResponse response) throws Exception {  
  
        response.setDateHeader("Expires", 0);  
        // Set standard HTTP/1.1 no-cache headers.  
        response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");  
        // Set IE extended HTTP/1.1 no-cache headers (use addHeader).  
        response.addHeader("Cache-Control", "post-check=0, pre-check=0");  
        // Set standard HTTP/1.0 no-cache header.  
        response.setHeader("Pragma", "no-cache");  
        // return a jpeg  
        response.setContentType("image/jpeg");  
        // create the text for the image  
        String capText = captchaProducer.createText(); 
        // store the text in the session  
        request.getSession().setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);  
        // create the image with the text  
        BufferedImage bi = captchaProducer.createImage(capText);  
        ServletOutputStream out = response.getOutputStream();  
        // write the data out  
        ImageIO.write(bi, "jpg", out);  
        try {  
            out.flush();  
        } finally {  
            out.close();  
        }  
        return null;  
    }  
}

然后我们需要点击能随机更换验证码，加入下面js代码：

 function changeValidateCode(obj) {   
        	obj.src="image/captcha-image.do?"+ Math.floor(Math.random()*100);   
        }  

3、与validate.js结合进行注册验证

  首先引入validate.js

 <script src="resource/js/jquery.validate.min.js"></script> 

然后，注意：

 （1）#registerForm是表单的ID

 （2）rules中比如username，password参数必须和form表单中name的值一致。

 （3）remote中通过ajax异步验证 （用户名是否存在，输入验证码是否一致）
 （4）addMethod是自定义验证，我们可以自己定义验证规则，比如手机号码，邮箱等的验证。

	//注册表单验证
	$("#registerForm").validate({
		errorPlacement: function(error, element) { 
		    error.appendTo(element.parent()); 
		},
		rules:{
			username:{
				required:true,//必填
				minlength:3, //最少6个字符
				maxlength:32,//最多20个字符
				remote:{
					url:"user/checkUser.do",//用户名重复检查，别跨域调用
					type:"post",
					dataType: "json", 
					data: {                     //要传递的数据
					        username: function() {
					            return $(".username").val();
					     }
				  }
				},
			},
			password:{
				required:true,
				minlength:3, 
				maxlength:32,
			},
			email:{
				required:true,
				email:true,
				remote:{
					url:"user/checkEmail.do",//用户名重复检查，别跨域调用
					type:"post",
					dataType: "json", 
					data: {                     //要传递的数据
						  email: function() {
					            return $(".email").val();
					     }
				  }
				},
			},
			confirm_password:{
				required:true,
				minlength:3,
				equalTo:'.password'
			},
			mobilePhone:{
				required:true,
				phone_number:true,//自定义的规则
				digits:true,//整数
			},
			kaptchaImage:{
					required:true,//必填
					remote:{
						url:"user/checkRandom.do",//用户名重复检查，别跨域调用
						type:"post",
						dataType: "json", 
						data: {                     //要传递的数据
						        username: function() {
						            return $(".kaptchaImage").val();
						     }
					  }
					},
			}
		},
		//错误信息提示
		messages:{
			username:{
				required:"必须填写用户名",
				minlength:"用户名至少为3个字符",
				maxlength:"用户名至多为32个字符",
				remote: "用户名已存在",
			},
			password:{
				required:"必须填写密码",
				minlength:"密码至少为3个字符",
				maxlength:"密码至多为32个字符",
			},
			email:{
				required:"请输入邮箱地址",
				email: "请输入正确的email地址",
				remote: "邮箱已存在",
			},
			confirm_password:{
				required: "请再次输入密码",
				minlength: "确认密码不能少于3个字符",
				equalTo: "两次输入密码不一致",//与另一个元素相同
			},
			mobilePhone:{
				required:"请输入手机号码",
				digits:"请输入正确的手机号码",
			},
			kaptchaImage:{
				required:"请输入验证码",
				remote: "验证码不正确",
			},
		
		},
	});
	//添加自定义验证规则
	jQuery.validator.addMethod("phone_number", function(value, element) { 
		var length = value.length; 
		var phone_number = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/ 
		return this.optional(element) || (length == 11 && phone_number.test(value)); 
	}, "手机号码格式错误");