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


Posted in jQuery onDecember 21, 2017

项目中经常会遇到需要后台验证问题,如用户名、用户账号是否存在等。使用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

以上这篇jQuery Validate插件ajax方式验证输入值的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery操作css样式
May 15 jQuery
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
使用jQuery实现简单的tab框实例
Aug 22 jQuery
jquery中有哪些api jQuery主要API
Nov 20 jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
jQuery实现鼠标滑动切换图片
May 27 jQuery
jQuery实时统计输入框字数及限制
Jun 24 jQuery
jQuery实现回到顶部效果
Oct 19 jQuery
webpack写jquery插件的环境配置
Dec 21 #jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 #jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 #jQuery
jquery自定义显示消息数量
Dec 19 #jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 #jQuery
jquery中done和then的区别(详解)
Dec 19 #jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 #jQuery
You might like
php 显示指定路径下的图片
2009/10/29 PHP
PHP原生模板引擎 最简单的模板引擎
2012/04/25 PHP
解析二进制流接口应用实例 pack、unpack、ord 函数使用方法
2013/06/18 PHP
php使用fsockopen函数发送post,get请求获取网页内容的方法
2014/11/15 PHP
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
2016/03/23 PHP
php+jQuery+Ajax简单实现页面异步刷新
2016/08/08 PHP
location.href 在IE6中不跳转的解决方法与推荐使用代码
2010/07/08 Javascript
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
javascript中创建对象的几种方法总结
2013/11/01 Javascript
jquery插件之定时查询待处理任务数量
2014/05/01 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
2014/12/15 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
2016/04/14 Javascript
Bootstrap每天必学之折叠(Collapse)插件
2016/04/25 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
2016/10/21 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
详解Jquery Easyui的验证扩展
2017/01/09 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
详解Vue中CSS样式穿透问题
2019/09/12 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
2019/09/21 Javascript
[01:28:24]NAVI vs VG Supermajor 败者组 BO3 第三场 6.5
2018/06/06 DOTA
python之PyMongo使用总结
2017/05/26 Python
python实现kmp算法的实例代码
2019/04/03 Python
python实现图片中文字分割效果
2019/07/22 Python
python爬虫之遍历单个域名
2019/11/20 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
机械专业毕业生自荐信
2013/11/02 职场文书
留学推荐信怎么写
2014/01/25 职场文书
运动会获奖感言
2014/02/11 职场文书
社区清明节活动总结
2014/07/04 职场文书
2015年商场工作总结
2015/04/27 职场文书
法制工作总结2015
2015/07/23 职场文书
MySQL 慢查询日志深入理解
2021/04/22 MySQL
基于python定位棋子位置及识别棋子颜色
2021/07/26 Python
浅析python中特殊文件和特殊函数
2022/02/24 Python