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加载单文件vue组件的方法
Jun 20 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
JQuery常见节点操作实例分析
May 15 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
jQuery ajax - getScript() 方法和getJSON方法
May 14 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
UTF8编码内的繁简转换的PHP类
2009/07/09 PHP
php设计模式 Observer(观察者模式)
2011/06/26 PHP
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
PHP版本常用的排序算法汇总
2015/12/20 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
Laravel框架实现的批量删除功能示例
2019/01/16 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
js整数字符串转换为金额类型数据(示例代码)
2013/12/26 Javascript
AngularJS基础知识
2014/12/21 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
使用JS中的exec()方法构造正则表达式验证
2016/08/01 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
jQuery实现QQ空间汉字转拼音功能示例
2017/07/10 jQuery
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
2017/12/28 Javascript
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
js实现自动播放匀速轮播图
2020/02/06 Javascript
vue开发中遇到的问题总结
2020/04/07 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
2020/11/23 Javascript
[44:50]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 TNC vs VG
2018/04/02 DOTA
[38:39]完美世界DOTA2联赛循环赛 IO vs GXR BO2第二场 11.04
2020/11/05 DOTA
python机器学习库scikit-learn:SVR的基本应用
2019/06/26 Python
postman和python mock测试过程图解
2020/02/22 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
Python实现图片指定位置加图片水印(附Pyinstaller打包exe)
2021/03/04 Python
css3 自定义字体font-face使用介绍
2014/05/14 HTML / CSS
Orvis官网:自1856年以来,优质服装、飞钓装备等
2018/12/17 全球购物
美国批发供应商:Kole Imports
2019/04/10 全球购物
中文系师范生自荐信
2013/10/01 职场文书
自我鉴定范文200字
2013/10/02 职场文书
户外拓展活动方案
2014/02/11 职场文书
县政府班子个人对照检查材料
2014/10/05 职场文书
党的群众路线教育实践活动组织生活会发言材料
2014/10/17 职场文书
秋菊打官司观后感
2015/06/03 职场文书
详解MySQL主从复制及读写分离
2021/05/07 MySQL