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中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jquery replace方法去空格
May 08 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
jquery实现简单每周轮换的日历
Sep 10 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快速统计某个数据库中每张表的数据量
2012/09/04 PHP
PHP线程的内存回收问题
2016/07/08 PHP
php中序列化与反序列化详解
2017/02/13 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
javascript中的关于类型转换的性能优化
2010/12/14 Javascript
图片轮换效果实现代码(点击按钮停止执行)
2013/04/12 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
javascript unicode与GBK2312(中文)编码转换方法
2013/11/14 Javascript
jQuery中设置form表单中action值的实现方法
2016/05/25 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
2017/04/29 jQuery
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
2018/02/24 Javascript
JavaScript事件委托原理与用法实例分析
2018/06/07 Javascript
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
原生js实现针对Dom节点的CRUD操作示例
2019/08/26 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
2020/02/14 Javascript
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
Python3.x和Python2.x的区别介绍
2013/02/12 Python
python无限生成不重复(字母,数字,字符)组合的方法
2018/12/04 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
Django models文件模型变更错误解决
2020/05/11 Python
如何理解Python中的变量
2020/06/01 Python
Django中和时区相关的安全问题详解
2020/10/12 Python
牵手50香港:专为黄金岁月的单身人士而设的交友网站
2020/08/14 全球购物
CK澳大利亚官网:Calvin Klein澳大利亚
2020/12/12 全球购物
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
2014广电局实施党的群众路线教育实践活动方案思想汇报
2014/09/22 职场文书
大一学生个人总结
2015/02/15 职场文书
办公室卫生管理制度
2015/08/04 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server
Go遍历struct,map,slice的实现
2021/06/13 Golang
js基础语法与maven项目配置教程案例
2021/07/15 Javascript
类和原型的设计模式之复制与委托差异
2022/07/07 Javascript