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 相关文章推荐
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
使用jquery实现轮播图效果
Jan 02 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网站来路获取代码(针对搜索引擎)
2010/06/08 PHP
php下网站防IP攻击代码,超级实用
2010/10/24 PHP
php中filter函数验证、过滤用户输入的数据
2014/01/13 PHP
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
php调用淘宝开放API实现根据卖家昵称获取卖家店铺ID的方法
2015/07/29 PHP
PHP 自动加载的简单实现(推荐)
2016/08/12 PHP
PHP基于mssql扩展远程连接MSSQL的简单实现方法
2016/10/08 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
初学Javascript的一些总结
2008/11/03 Javascript
IE 条件注释详解总结(附实例代码)
2009/08/29 Javascript
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
javascript中关于执行环境的杂谈
2011/08/14 Javascript
javascript时间自动刷新实现原理与步骤
2013/01/06 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
JavaScript实现多重继承的方法分析
2018/01/09 Javascript
如何为你的JS项目添加智能提示与类型检查详解
2019/03/12 Javascript
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
微信小程序反编译的实现
2020/12/10 Javascript
微信小程序 接入腾讯地图的两种写法
2021/01/12 Javascript
用Python脚本生成Android SALT扰码的方法
2013/09/18 Python
python多线程抓取天涯帖子内容示例
2014/04/03 Python
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
详解Python中的文件操作
2016/08/28 Python
Python 实现文件的全备份和差异备份详解
2016/12/27 Python
python3.x上post发送json数据
2018/03/04 Python
Python3的介绍、安装和命令行的认识(推荐)
2018/10/20 Python
如何使用Python多线程测试并发漏洞
2019/12/18 Python
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
大学生的网上创业计划书
2013/12/31 职场文书
大学生村官典型材料
2014/01/12 职场文书
《九寨沟》教学反思
2014/04/08 职场文书
我爱读书演讲稿
2014/05/07 职场文书
汇报材料怎么写
2014/12/30 职场文书
退休教师欢送会致辞
2015/07/31 职场文书
vue实现锚点定位功能
2021/06/29 Vue.js