概述

本文介绍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对象。

下面是博主的其他文章，喜欢的博友们点个关注，谢谢您的支持。

Java8 Lambda表达式入门

JDK8之前，匿名内部类访问的局部变量为什么必须要用final修饰

EL表达式与JSTL简单入门

JSON转换工具的使用

                           

Validate插件的自定义验证方法入门（结合Ajax实现用户名的数据库查重）的更多相关文章

  1. jquery.validate remote 和 自定义验证方法

    jquery.validate remote 和 自定义验证方法 $(function(){ var validator = $("#enterRegForm").validate ...

  2. jquery validate.addMethod 正则表达式 (自定义验证方法)

    项目中使用的jQuery添加的校验的方法 $(document).ready(function(){         5           6/* 设置默认属性 */         7$.vali ...

  3. validate插件深入学习-04自定义验证方法

    自定义验证方法 jQuery.validator.addMethod(name,method,[,message]) name: 方法名 method: function(value,element, ...

  4. jqery validate、validate自定义验证方法 + jaery form Demo

    校验规则 required:true  必输字段 remote:"check.php"  使用ajax方法调用check.php验证输入值 email:true  必须输入正确格式 ...

  5. jQuery.validator.addMethod自定义验证方法

    在开发中用到了jQuery的validate控件,有时需要自定义验证方法.我们可以通过jQuery.validator.addMethod()来实现,下面是例子: <!DOCTYPE html ...

  6. Spring Security验证流程剖析及自定义验证方法

    Spring Security的本质 Spring Security本质上是一连串的Filter, 然后又以一个独立的Filter的形式插入到Filter Chain里,其名为FilterChainP ...

  7. 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 ...

  8. jquery validate 自定义验证方法

    query validate有很多验证规则,但是更多的时候,需要根据特定的情况进行自定义验证规则. 这里就来聊一聊jquery validate的自定义验证. jquery validate有一个方法 ...

  9. jquery.validate使用 - 自定义验证方法

    自定义jquery-validate的验证行为 1: 自定义表单提交 设置submitHandler来自定义表单提交动作 $(".selector").validate({    ...

  10. jquery validate 自定义验证方法 日期验证

    jquery validate有很多验证规则,但是更多的时候,需要根据特定的情况进行自定义验证规则. 这里就来聊一聊jquery validate的自定义验证. jquery validate有一个方 ...

随机推荐

  1. 安装HTMLTestRunner库

    安装 HTMLTestRunner 库的方法非常简单,直接 pip 就可以了 pip install html-testRunner 在 https://pypi.org/  中可以直接搜索到,并且官 ...

  2. 比nestjs更优雅的ts控制反转策略-依赖查找

    一.Cabloy5.0内测预告 Cabloy5.0采用TS对整个全栈框架进行了脱胎换骨般的大重构,并且提供了更加优雅的ts控制反转策略,让我们的业务开发更加快捷顺畅 1. 新旧技术栈对比: 后端 前端 ...

  3. UE4下实现HTC Vive手柄拾取物品蓝图编程

    UE4下实现Vive手柄拾取物品 标签: UE4Vive游戏引擎 目录(?) [-] 创建拾取接口 实现接口 定义拾取 简单说下思路,首先定义拾取接口,然后在需要拾取的物品的蓝图类中实现该接口,最后在 ...

  4. Unable to determine application id: com.android.tools.idea.run.ApkProvisionException: No outputs for the main artifact of variant: debug

    前言 遇到这种情况极大可能属于gradle 与 android studio版本不匹配的情况. 因为我是在升级android studio遇到的这个问题. 方法 一个方法是:降低android stu ...

  5. 重学c#系列——缓存[盛派源码分析cache](九)

    前言 以前整理过缓存的东西在: https://www.cnblogs.com/aoximin/p/12727659.html 只是粗略的例子,因为真的要去介绍缓存这个东西,要从内存开始,是一个有时间 ...

  6. 实战指南：使用 xUnit 和 ASP.NET Core 进行集成测试【完整教程】

    引言 集成测试可在包含应用支持基础结构(如数据库.文件系统和网络)的级别上确保应用组件功能正常. ASP.NET Core 通过将单元测试框架与测试 Web 主机和内存中测试服务器结合使用来支持集成测 ...

  7. 【Oracle】力扣简单的练习题

    Oracle力扣简单的练习题 请你编写一个 SQL 查询来交换所有的 'f' 和 'm' /* Write your PL/SQL query statement below */ /******** ...

  8. DataWorks 如何撑起阿里99%的数据开发？

    阿里妹导读: DataWorks是阿里巴巴自主研发,支撑阿里巴巴经济体99%数据业务建设和治理,每天数万名数据开发和算法开发工程师在使用.从2010年起步到目前的版本,经历了多次技术变革和架构升级,也 ...

  9. Linux系统诊断-内存基础

    简介: Linux系统诊断-内存基础 1. 背景 谈及linux内存,很多时候,我们会关注free,top等基础命令.当系统遇到异常情况时,内存问题的根因追溯,现场诊断时,缺乏深层次的debug能力. ...

  10. 重回铁王座！时隔5年！Quill 2.0 终于发布啦🎉

    你好,我是 Kagol. 2024年4月17日,Quill 2.0 正式发布 最后一个 1.0 版本 1.3.7 发布于 2019年9月9日,时隔4年零7个月. 富文本编辑器拥有非常丰富的使用场景,我 ...