jQuery Validate插件ajax方式验证输入值

2017-12-20 08:19:13来源:CSDN作者:mytt_10566人点击

分享

项目中经常会遇到需要后台验证问题,如用户名、用户账号是否存在等。使用jQuery Validate插件可以使用remote校验规则完成验证。

示例:

一.基本用法

1.需要验证的表单

<form id="registForm">	<input type="text" id="username" name="username"></form>
2.js

使用remote校验规则,最简单粗暴的写法是remote: url,此时请求的url后面自动拼接当前验证的值,例如下面的写法,请求的url为:xxx/checkUsername.do?username=test

// 导入jquery、validte库略$(function() {	$.validator.setDefaults({		submitHandler: function(form) {			// 验证通过处理			...		}	});					$("#registForm").validate({		rules: {			username: {				required: true,				remote: "checkUsername.do"			},					},		messages: {			username: {				required: "用户名不能为空",				remote: "用户名已经存在"			}		}	});});
3.后台(Spring MVC测试)

后台响应只能输出true或false,不能有其他数据,true:验证通过,false:验证失败;设置返回类型为boolean或String都可以

(1).返回boolean

@RequestMapping("/checkUsername")public @ResponseBody boolean checkUsername(@RequestParam String username) {	// 测试	return !"test".equals(username);}
(2).返回String

@RequestMapping("/checkUsername")public @ResponseBody String checkUsername(@RequestParam String username) {	// 测试	return !"test".equals(username) ? "true" : "false";}


二.其他用法

上面的用法不能满足实际的需求,有时候会有需要提交其他参数、参数名和属性名不一致或请求方式为POST的情况,写法如下:

1.js

  • 使用data选项,也就是jQuery的$.ajax({...})的写法;
  • 提交的数据需要通过函数返回值的方式,直接写值有问题;
  • 默认会提交当前验证的值,也就是下例中的 username: xxx会被默认作为参数提交

....username: {	required: true,	remote: {		url: "checkUsername.do",		type: "post",               //数据发送方式		dataType: "json",           //接受数据格式   		data: {                     //要传递的数据			username: function() {				return $("#username").val();			},			extra: function() {				return "额外信息";			}		 }	}}
2.后台

限制了必须为POST方式请求

@RequestMapping(value = "/checkUsername", method = RequestMethod.POST)public @ResponseBody boolean checkUsername(User user, @RequestParam String extra) {	// 测试	System.out.println(extra);	return !"test".equals(user.getUsername());}


参考文章:http://www.runoob.com/jquery/jquery-plugin-validate.html



最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台