jquery.validate.js和jquery.form.js结合使用

最新推荐文章于 2020-12-30 12:16:42 发布
最新推荐文章于 2020-12-30 12:16:42 发布
阅读量2.2k 收藏
点赞数
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/suwing6406029/article/details/37889389
版权 
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="../common/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
table {
	border-spacing: 0;
}
button {
	background-color: #569E3D;	/*菜单背景色*/
	line-height: 25px;	/*调整行高*/
}
</style>
</head>
<body>
	<div id="list" align="center">
		<form id="searchForm" action="list.html" method="post">
		<table>
			<tr>
				<td>菜单Id</td>
				<td><input name="menuId"></td>
				<td>菜单名字</td>
				<td><input name="menuName"></td>
				<td>父Id</td>
				<td><input name="parentId"></td>
			</tr>
			<tr>
				<td>标题</td>
				<td><input name="title"></td>
				<td>链接</td>
				<td><input name="url"></td>
				<td>是否叶子</td>
				<td><input name="leaf"></td>
			</tr>
			<tr>
				<td align="center"><button type="button" οnclick="goAdd()">新增</button></td>
				<td colspan="5" align="center"><button type="submit">查询</button></td>
			</tr>
		</table>
		</form>
		<c:if test="${!empty list}">
			<table border="1">
				<thead>
					<tr>
						<th>父Id</th>
						<th>菜单Id</th>
						<th>菜单名称</th>
						<th>链接</th>
						<th>标题</th>
						<th>是否叶子</th>
						<th>序号</th>
						<th>编辑</th>
						<th>删除</th>
					</tr>
				</thead>
			<c:forEach items="${list}" var="item">
				<tr id='<c:out value="${item.menuId}"/>' align="left">
					<td><c:out value="${item.parentId}"/></td>
					<td><c:out value="${item.menuId}"/></td>
					<td><c:out value="${item.menuName}"/></td>
					<td><c:out value="${item.url}"/></td>
					<td><c:out value="${item.title}"/></td>
					<td><c:out value="${item.leaf}"/></td>
					<td><c:out value="${item.orderSeq}"/></td>
					<td οnclick='goEdit(<c:out value="${item.menuId}"/>)'>编辑</td>
					<td οnclick='doDelete(<c:out value="${item.menuId}"/>)'>删除</td>
				</tr>
			</c:forEach>
			</table>
		</c:if>
	</div>
	
	<div id="add" align="center" style="display: none;">
		<form id="addForm" action="insert.html" method="post">
			<table border="1">
				<tr>
					<td>父Id</td>
					<td><input type="text" name="parentId"></td>
				</tr>
				<tr>
					<td>菜单Id</td>
					<td>
						<input type="text" name="menuId">
					</td>
				</tr>
				<tr>
					<td>菜单名称</td>
					<td><input type="text" name="menuName"></td>
				</tr>
				<tr>
					<td>链接</td>
					<td><input type="text" name="url"></td>
				</tr>
				<tr>
					<td>标题</td>
					<td><input type="text" name="title"/></td>
				</tr>
				<tr>
					<td>是否叶子</td>
					<td><input type="text" name="leaf"></td>
				</tr>
				<tr>
					<td>序号</td>
					<td><input type="text" name="orderSeq"></td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<button type="button" οnclick="doAdd()">添加</button>
						<button type="button" οnclick="hide('add')">返回</button>
					</td>
				</tr>
			</table>
		</form>
	</div>
	
	<div id="edit" align="center" style="display: none;">
		<form id="editForm" action="update.html" method="post">
			<table border="1">
				<tr>
					<td>父Id</td>
					<td><input type="text" id="parentId" name="parentId">
						<label for="parentId" class="error"></label>
						</td>
				</tr>
				<tr>
					<td>菜单Id</td>
					<td align="left"><span id="showMenuId"></span>
						<input type="hidden" id="menuId" name="menuId">
					</td>
				</tr>
				<tr>
					<td>菜单名称</td>
					<td><input type="text" id="menuName" name="menuName"></td>
				</tr>
				<tr>
					<td>链接</td>
					<td><input type="text" id="url" name="url"></td>
				</tr>
				<tr>
					<td>标题</td>
					<td><input type="text" id="title" name="title"/></td>
				</tr>
				<tr>
					<td>是否叶子</td>
					<td><input type="text" id="leaf" name="leaf"></td>
				</tr>
				<tr>
					<td>序号</td>
					<td><input type="text" id="orderSeq" name="orderSeq"></td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<button type="button" οnclick="doEdit()">保存</button>
						<button type="button" οnclick="hide('edit')">返回</button>
					</td>
				</tr>
			</table>
		</form>
	</div>
</body>
</html>
<script type="text/javascript">
	function goAdd(){
		document.getElementById("add").style.display = "block";
		document.getElementById("list").style.display = "none";
	}
	
	function goEdit(menuId){
		var cells = document.getElementById(menuId).cells;
		document.getElementById("parentId").value = cells[0].innerHTML;
		document.getElementById("menuId").value = menuId;
		document.getElementById("menuName").value = cells[2].innerHTML;
		document.getElementById("url").value = cells[3].innerHTML;
		document.getElementById("title").value = cells[4].innerHTML;
		document.getElementById("leaf").value = cells[5].innerHTML;
		document.getElementById("orderSeq").value = cells[6].innerHTML;
		document.getElementById("showMenuId").innerHTML = menuId;
		
		document.getElementById("edit").style.display = "block";
		document.getElementById("list").style.display = "none";
	}
	
	function doDelete(menuId){
		$.ajax({
            url:'delete.html',
            type:'post',
            data:{menuId:menuId},
            success:function(data){
                if(data == "success") {
                	alert("删除成功");
                	$("#searchForm").submit();
                }else{
                	alert("删除失败");
                }
            }
         }); 
	}
	
	function doAdd(){
		if(addFormValidateor.form()){
	    	$("#addForm").ajaxSubmit({
	            url:'insert.html',
	            type:'post',
	            success:function(data){
	                if(data == "success") {
	                	alert("添加成功");
	                	window.location.href = "index.html";
	                }else{
	                	alert("添加失败");
	                }
	            }   
	         }); 
		}
	}
	
	function doEdit(){
		if(editFormValidateor.form()){
	    	$("#editForm").ajaxSubmit({
	            url:'update.html',
	            type:'post',
	            success:function(data){
	                if(data == "success") {
	                	alert("修改成功");
	                	window.location.href = "index.html";
	                }else{
	                	alert("修改失败");
	                }
	            }   
	         }); 
		}
	}
	
	function hide(hideId, showId){
		var id = showId || "list";
		document.getElementById(id).style.display = "block";
		document.getElementById(hideId).style.display = "none";
	}
	
	var addFormValidateor;
	var editFormValidateor;
	$().ready(function(){
		addFormValidateor = $("#addForm").validate({
			rules:{
				parentId:"required",
				menuId:"required",
				url:"url",
				leaf:"number",
				orderSeq:{
					required:true,
					number:true
				}
			}
		});
		editFormValidateor = $("#editForm").validate({
			rules:{
				parentId:"required",
				url:"url",
				leaf:"number",
				orderSeq:{
					required:true,
					number:true
				}
			}
		});
	});
</script>


tyt叮当tyt
关注
专栏目录
jQuery From 结合jQuery validate 进行表单的验证与提交
m0_38111385的博客
11-14 1962
jQuery From 结合jQuery validate 进行表单的验证与提交1、使用的插件2、校验规则及方法 参考文章：http://www.runoob.com/jquery/jquery-plugin-validate.html 1、使用的插件 &lt;script src="${ctx}/theme/js/jquery.min.js?v=2.1.4"&gt;&lt;/script&gt...
jquery validate表单校验_Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
weixin_39607798的博客
11-25 341
vee-validate 是为 Vue.js 量身打造的表单校验框架，允许您校验输入的内容并显示对应的错误提示信息。它内置了很多常见的校验规则，可以组合使用多种校验规则，大部分场景只需要配置就能实现开箱即用，还支持自定义正则表达式。而且支持 40 多种语言，对本地化、多语言支持非常友好。国内饿了么团队开源项目 Element UI 就用到了 vee-validate。vee-validate官网：...
jquery.validate 版本大全
03-04
jquery.validate.1.9.0.min.js jquery.validate.1.12.0.min.js jquery.validate.1.13.1.min.js jquery.validate.1.16.0.min.js jquery.validate.1.14.0.min.js jquery.validate.1.15.1.min.js jquery.validate....
jQuery.validate.js
05-08
jQuery.validate.js是一款强大的JavaScript插件，专为jQuery框架设计，用于实现前端表单验证，提供了丰富的验证规则和自定义选项，使得开发者能够轻松地构建具有高效验证功能的网页。 一、jQuery.validate.js的核心...
jquery.validate表单验证插件使用详解
10-19
在本文中，我们将深入探讨jQuery Validate插件的使用方法，这是一个强大的JavaScript库，用于实现高效且用户友好的表单验证。jQuery Validate插件简化了在HTML表单中添加验证规则的过程，无需编写复杂的正则表达式，...
jquery.validate.js 多个相同name的处理方式
10-19
在使用jQuery Validate插件进行表单验证时，可能会遇到一个问题：当表单中有多个具有相同`name`属性的输入元素时，插件默认只会对第一个元素进行验证。这是因为jQuery Validate插件的机制是针对每个`name`属性唯一的...
form上传文件的两种方式
热门推荐
shuke_zheng的博客
11-14 2万+
示例1：表单里有图片/文件的上传<form enctype="multipart/form-data" method="post"><input type="file" name="uploadfile"/></form>multipart/form-data 是上传二进制数据 form里面的input的值以2进制的方式传过去，所以这里要明白，使用这种格式以后，后台request就获取不到数据了。
表单实时校验插件——jquery.validateForm.js(v.2.0)
vuturn的专栏
12-31 3533
插件名：jquery.validateForm.js 依赖：  jquery ,  jquery.validateForm.css 参数： 暂无参数(有一个默认的msg提示) 说明： 实现了input =text , select ，textArea 的实时必填校验 实现了input = number 的必填 数字类型 参数范围的校验 使用方法： 1.引入jquery，jquer
validate 表单验证 添加图片(image)
WoBenZiYou的专栏
08-28 1545
从外文网站找到的给error设置能显示背景图片的代码: label.error{        display:inline-block;        width: 88px;        height: 66px;       background: url( //image);      text-indent:-500em; }
jquery.form 异步校验_使用jquery.form异步提交注意jquery.validate需要手动添加验证
weixin_35917193的博客
12-30 541
使用jquery.form.js异步提时，即使jquery.validate验证失败也会提交的所以加个$("form").valid()来判断是否通过验证；$("#form1").submit(function () {if ($("form").valid()) {$(this).ajaxSubmit(function (data) {if (data == "ok") {$("#errorTi...
jquery.validate.js对 form表单的验证
Lisunlight的博客
10-05 803
1、引入jquery.validate.js；引入文件要在jQuery文件之后 2、直接在js中验证，直接上实例： //内容验证 $().ready(function() { //图片拓展名 jQuery.validator.addMethod("subImg",function(value,element){ var ...
jquery.validate+jquery.form提交的三种方式
weixin_33881140的博客
09-27 74
原文：http://www.cnblogs.com/datoubaba/archive/2012/06/06/2538873.html jquery.validate+jquery.form提交的三种方式 概述：本篇主要讨论jquery.validate结合jquery.form实现对表单的验证和提交方案。 方式一：是通过jquery.validate的submitHan...
jquery validate 校验 文件上传类型
x734400146的专栏
03-02 4917
jqueryValidate 校验文件上传类型 ，以及可能用到的MINI类型汇总
jquery.validate.js 和 layer实现漂亮的表单验证特效
qq_28917403的博客
02-11 2191
/** * Created by 周前梅 主要用于用户表单校验逻辑 显示on 2017/12/9. */ $(function(){ // 手机号码验证 jQuery.validator.addMethod("isMobile", function(value, element) { var length = value.length; var...
jQuery.validate.js API中文指南
本文档主要介绍了jQuery.validate.js的核心API及其使用方式。" jQuery.validate.js 是一个强大的JavaScript库，专门用于处理HTML表单的验证。这个插件基于jQuery框架，简化了在网页中创建复杂和自定义验证规则的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值