Validate插件的自定义验证方法入门（结合Ajax实现用户名的数据库查重）
概述
本文介绍Validate自定义表单校验方式。Validate插件虽然提供了丰富的验证规则，但在很多时候仍然很难满足我们的开发需求，在注册页面我们需要通过ajax验证用户输入的用户名是否已经被他人注册，那此时通过传统的Validate验证方式已经无法满足需求了！ 我们可以通过自定义验证方法来结合ajax实现这个需求。
自定义ajax基本语法
因为validate是JQuery的插件，所以在此之前必须先导入JQuery和validate的JS包。
<script type="text/javascript">
//下面开始自定义一个校验规则（addMethod方法传入两个参数，第一个是自定义校验规则的规则名称，第二个传入的是校验方法）
$.validator.addMethod(
"规则名称",
function(value,element,params){
//这个是验证所调用函数（校验函数），传入三个参数
//value:输入的内容（表单元素输入的内容，如果此时username表单元素绑定了该校验规则，那么value就是在触发此校验规则时，用户输入的用户名）
//element:被校验的元素对象
//params：规则对应的参数值（例：在required:true 传入的params就是true）
}
);
</script>在这里需要明确的是
- addMethod()方法中需要传入两个参数，第一个参数为自定义校验规则的规则名称，第二个为校验时所调用的方法（校验函数）。
- 在传入的校验函数中有三个形参（具体作用前面已经指出）
- 校验函数需要返回布尔值，如果返回为true，则不会显示绑定的提示信息。如果为false，就会显示绑定的信息（“用户名已存在”）
用户名的查重需求的具体实现
- 前端页面实现
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>会员注册</title>
</head>
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<!-- 引入表单校验jquery插件 -->
<script src="js/jquery.validate.min.js" type="text/javascript"></script>
<style>
.error{
color:red
}
</style>
<script type="text/javascript">
//自定义校验规则
$.validator.addMethod(
//规则的名称
"checkUsername",
//校验的函数
function(value,element,params){
//定义一个标志
var flag = false;
//此时使用ajax后台校验用户名是否正确
$.ajax({
"async":false,
"url":"${pageContext.request.contextPath}/checkUsername",
"data":{"username":value},
"type":"POST",
"dataType":"json",
//这里的data是服务器传来的一个json字符串，前端解析为JS对象（里面包含是否存在该用户的信息）
"success":function(data){
//data.isExist==false代表服务器不存在该用户
flag = data.isExist;
}
});
//返回false代表该校验器不通过
return !flag;
}
); $(function(){
$("#myform").validate({
rules:{
"username":{
"required":true,
"checkUsername":true
}
},
messages:{
"username":{
"required":"用户名不能为空",
"checkUsername":"用户名已存在"
}
}
);
});
</script>
<body>
<form id="myform" class="form-horizontal" action="省略" method="post" >
用户名<input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名">
</form>
</body>
</html>
- 后端页面实现
package com.web.servlet; import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import com.service.UserService; public class CheckUsernameServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
String username=request.getParameter("username");
UserService service=new UserService();
//isExist代表用户名是否存在，true代表存在,false代表不存在
boolean isExist=service.checkUserisExist(username);
//封装json数据
String json="{\"isExist\":"+isExist+"}";
response.getWriter().write(json);
} protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
} }
在这里我们需要明确
- ajax如何收服务器传来的数据的，在上面的ajax中定义了一个回调函数（"success":function(data){...}）。这个回调函数中有一个有一data参数，它代表服务器传递过来的数据,可能是js对象，也可能是个文本...。但在前面已经设置data是json（"dataType":"json"）,所以这里的data已经被解析为一个js对象了。所以我们可以通过data.isExist得到对象中的数据。
- 服务器端如何传输JSON数据的，服务器端通过response.getWriter().wirte(json);即可传输数据。在服务器端的json字符串传到客户端后会自动解析为js对象。
下面是博主的其他文章，喜欢的博友们点个关注，谢谢您的支持。
JDK8之前，匿名内部类访问的局部变量为什么必须要用final修饰
Validate插件的自定义验证方法入门（结合Ajax实现用户名的数据库查重）的更多相关文章
- jquery.validate remote 和 自定义验证方法
jquery.validate remote 和 自定义验证方法 $(function(){ var validator = $("#enterRegForm").validate ...
- jquery validate.addMethod 正则表达式 (自定义验证方法)
项目中使用的jQuery添加的校验的方法 $(document).ready(function(){ 5 6/* 设置默认属性 */ 7$.vali ...
- validate插件深入学习-04自定义验证方法
自定义验证方法 jQuery.validator.addMethod(name,method,[,message]) name: 方法名 method: function(value,element, ...
- jqery validate、validate自定义验证方法 + jaery form Demo
校验规则 required:true 必输字段 remote:"check.php" 使用ajax方法调用check.php验证输入值 email:true 必须输入正确格式 ...
- jQuery.validator.addMethod自定义验证方法
在开发中用到了jQuery的validate控件,有时需要自定义验证方法.我们可以通过jQuery.validator.addMethod()来实现,下面是例子: <!DOCTYPE html ...
- Spring Security验证流程剖析及自定义验证方法
Spring Security的本质 Spring Security本质上是一连串的Filter, 然后又以一个独立的Filter的形式插入到Filter Chain里,其名为FilterChainP ...
- spring boot集成mybatis-plus插件进行自定义sql方法开发时报nested exception is org.apache.ibatis.binding.BindingException: Invalid bound statement (not found):
spring boot集成mybatis-plus插件进行自定义sql方法开发时报nested exception is org.apache.ibatis.binding.BindingExcept ...
- jquery validate 自定义验证方法
query validate有很多验证规则,但是更多的时候,需要根据特定的情况进行自定义验证规则. 这里就来聊一聊jquery validate的自定义验证. jquery validate有一个方法 ...
- jquery.validate使用 - 自定义验证方法
自定义jquery-validate的验证行为 1: 自定义表单提交 设置submitHandler来自定义表单提交动作 $(".selector").validate({ ...
- jquery validate 自定义验证方法 日期验证
jquery validate有很多验证规则,但是更多的时候,需要根据特定的情况进行自定义验证规则. 这里就来聊一聊jquery validate的自定义验证. jquery validate有一个方 ...
随机推荐
- MogDB企业应用 之 Rust驱动
引子 Rust 是一门系统编程语言,专注于安全,尤其是并发安全,支持函数式和命令式以及泛型等编程范式的多范式语言.Rust 在语法上和类似 C++,但是设计者想要在保证性能的同时提供更好的内存安全. ...
- 【直播预告】HarmonyOS极客松赋能直播第三期：一次开发多端部署与ArkTS卡片开发
- 脑洞golang embed 的使用场景
golang 的 embed 的功能真是一个很神奇的功能,它能把静态资源,直接在编译的时候,打包到最终的二进制程序中. 为什么会设计这么一个功能呢?我想和 golang 的崇尚简单的原则有关系吧.它希 ...
- 【ssm】极简的极省力的开发方式——针对简单型EasyUI的增删改查的后台管理
需要具备技能点: ssm框架搭建,mybatis generator的熟练使用 1.控制器: import java.util.HashMap; import java.util.Map; impor ...
- ImageJ软件使用教程（二）：图像测量
目录 图像比例尺 加载图像 设置比例尺 标注比例尺 测量长度面积 测量长度 测量面积 参考资料 图像比例尺 使用ImageJ软件测量图像中的长度.面积等信息时,需要先设置图像的比例尺,比例尺用于将图像 ...
- SVM简单分类的使用 sklearn机器学习
# sklearn 库中导入 svm 模块 from sklearn import svm # 定义三个点和标签 X = [[2, 0], [1, 1], [2,3]] y = [0, 0, 1] # ...
- StarRocks 集群安装
当前按照官网上的提供的安装包方式安装,版本是 3.2.2,部署模式为存算一体,安装的操作系统是 Ubuntu 22.04,JDK 版本为 OpenJDK 11,这里选择 3 个节点进行安装,节点的 h ...
- 力扣594(java&python)-最长和谐子序列（简单）
题目: 和谐数组是指一个数组里元素的最大值和最小值之间的差别 正好是 1 . 现在,给你一个整数数组 nums ,请你在所有可能的子序列中找到最长的和谐子序列的长度. 数组的子序列是一个由数组派生出来 ...
- K8s Ingress Provider 为什么选择 MSE 云原生网关？
简介:在虚拟化时期的微服务架构下,业务通常采用流量网关 + 微服务网关的两层架构,流量网关负责南北向流量调度和安全防护,微服务网关负责东西向流量调度和服务治理,而在容器和 K8s 主导的云原生时代, ...
- 3种方式自动化控制APP
自动化控制APP不管是在工作还是生活方面,都可以帮助我们高效地完成任务,节省时间和精力.本文主要介绍自动化控制APP的3种常用方式. 1.Python + adb 这种方式需要对Android有一些基 ...