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

2023-09-19 00:48:05 328

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

示例：

一.基本用法

1.需要验证的表单

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.后台（SpringMVC测试）

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

(1).返回boolean

@RequestMapping("/checkUsername")
public@ResponseBodybooleancheckUsername(@RequestParamStringusername){
	//测试
	return!"test".equals(username);
}

(2).返回String

@RequestMapping("/checkUsername")
public@ResponseBodyStringcheckUsername(@RequestParamStringusername){
	//测试
	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@ResponseBodybooleancheckUsername(Useruser,@RequestParamStringextra){
	//测试
	System.out.println(extra);
	return!"test".equals(user.getUsername());
}

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

以上这篇jQueryValidate插件ajax方式验证输入值的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

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

热门推荐

随机推荐