jquery 插件 validate 的实例

最新推荐文章于 2022-11-13 11:34:52 发布

xubing66

最新推荐文章于 2022-11-13 11:34:52 发布

阅读量169

点赞数

分类专栏： jquery ajax

本文链接：https://blog.csdn.net/xubing66/article/details/8213237

版权

jquery ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jsp 页面代码：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>验证插件</title>

<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="../js/jquery-1.7.1.js"></script>
<!-- <script type="text/javascript" src="../js/jquery.metadata.js"></script> -->
<script type="text/javascript" src="../js/jquery.validate.js"></script>
<script type="text/javascript" src="../js/messages_cn.js"></script>
<script type="text/javascript" src="../js/validate.js"></script>

</head>

<body>
<form id="checkInfo" action="#" method="get">
<hr>
<div>
用户 名：<input id="userName" name="userName" type="text" /><font color="red">*</font>
<span></span><br>
<br>
</div>
<div>
密 码：<input id="passWd" name="passWd" type="password" /><font color="red">*</font>
<span></span><br>
<br>
</div>
<div>
确认密码：<input id="passWd2" name="passWd2" type="password" /><font color="red">*</font>
<span></span><br>
<br>
</div>
<div>
email ：<input id="email" name="email" type="text" />
<span></span><br>
<br>
</div>
<div>
权 级：<input id="level" name="level" type="text" />
<span></span><br>
<br/>
</div>
<div>
真实姓名：<input id="trueName" name="trueName" type="text" />
<span></span><br>
<br>
</div>
<div>
<input id="submit" type="submit" value="提交" />
</div>
<hr>
</form>
</body>

</html>

validate.js 页面代码：

$(function(){
	$("#checkInfo").validate({
		/**
		 * 定义检测规则
		 */
		rules:{
			userName : {
				required : true,
				minlength : 3,
				remote : {
					type : "POST",
					url : "../myservlet",
					dataType : "json",
					data : {
						userName : function() {
							return $("#userName").val();
						}

					}
				}
			/*	remote :"../myservlet",*///这种方法同样可能实现
			},
			passWd:{required:true,minlength:6},
			passWd2:{required:true,equalTo:"#passWd"},
			email:{email:true},
			//为整数并且介于一三之间
			level:{digits:true,range:[1,3]},
			trueName:{remote:{
				type:"post",
				url:"../myservlet",
				dataType:"josn",
				data:{
					trueName:function(){
						return $("#trueName").val();
					}
				}
				
			}
				
			}
		},
			
		
		messages:{
			//自定义错误信息显示
			userName:{
				required: "请填写用户名",
				remote:"该名称不存在！",
			},
			passWd:{required:"请输入密码",minlength:"密码的长度至少为6"},
			
		},
			//错误提示位置
		errorPlacement:function(error,element){
			error.appendTo(element.siblings("span"));
		}
	
	
	});
});

servlet 代码：

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class myservlet extends HttpServlet {

	private static final long serialVersionUID = 1L;

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		response.setContentType("text/html");
		PrintWriter out = response.getWriter();
		String trueName = request.getParameter("trueName");
		String userName = request.getParameter("userName");
		// System.out.println(userName);

		if (trueName.equals("caolihua")) {
			out.print(true);
			out.write("true");
		} else {
			out.print(false);
			out.write("false");
		}

		if (userName.equals("caolihua")) {
			out.print("true");
			// out.write("true");
		} else {
			out.print("false");
			// out.write("false");
		}
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);
	}

}

xubing66

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 插件 validate 的实例

jsp 页面代码：验证插件 -->用户名：*密码：*确认密码：*email ：权级：真实姓名：validate.js 页面代码：$(function(){ $("#checkInfo").validate({ /** * 定义
复制链接

扫一扫