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实现的手风琴侧边菜单效果
Mar 29 jQuery
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
Jquery把获取到的input值转换成json
May 15 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 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
一个更简单的无限级分类菜单代码
2007/01/16 PHP
基于php iconv函数的使用详解
2013/06/09 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
php+ajax登录跳转登录实现思路
2016/07/31 PHP
Redis构建分布式锁
2017/03/28 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
获取当前网页document.url location.href区别总结
2008/05/10 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
基于jQuery实现模拟页面加载进度条
2013/04/01 Javascript
javascript获取隐藏dom的宽高 具体实现
2013/07/14 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
Nodejs学习笔记之Global Objects全局对象
2015/01/13 NodeJs
jQuery获取样式中颜色值的方法
2015/01/29 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
Bootstrap表单布局
2016/07/19 Javascript
javascript 实现动态侧边栏实例详解
2016/11/11 Javascript
BootStrap 动态表单效果
2017/06/02 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
2017/06/18 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
2017/12/26 Javascript
vue 自定义提示框(Toast)组件的实现代码
2018/08/17 Javascript
基于Vue实现可以拖拽的树形表格实例详解
2018/10/18 Javascript
Vue 2.0双向绑定原理的实现方法
2019/10/23 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
python导出hive数据表的schema实例代码
2018/01/22 Python
pyqt5 QScrollArea设置在自定义侧(任何位置)
2019/09/25 Python
通过python检测字符串的字母
2020/02/18 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
澳大利亚有机化妆品网上商店:The Well Store
2020/02/20 全球购物
五星红旗迎风飘扬观后感
2015/06/17 职场文书
给校长的建议书范文
2015/09/14 职场文书
丧事答谢词大全
2015/09/30 职场文书
Python利用机器学习算法实现垃圾邮件的识别
2021/06/28 Python
一篇文章了解正则表达式的替换技巧
2022/02/24 Javascript