【EasyUI表单提交】解决使用EasyUI的表单验证和提交的问题

解决使用EasyUI的表单验证和提交的问题;
图书添加页面完整代码;
用EasyUI表单验证提交,发现问题的是,当开始验证的时候,就不能跳转,跳转失效,而实现跳转就不能验证;
整体效果
在这里插入图片描述

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ page isELIgnored="false" %> 
<!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=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="js/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="js/demo.css">
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body>
<form method="post" action="./info" id="ff">
<table >
	<tr>
		<td align="left"> <img  src="./more.png"></td>
		<td> <b>基本信息</b></td>
	</tr>
	<tr>
		<td> 书号:</td>
		<td><input class="easyui-validatebox textbox" type="text" name="textbooknum" data-options="prompt:'Enter textbooknum.',required:true,validType:'length[3,10]'"></td>
	</tr>
	<tr>
		<td> 书名:</td>
		<td> <input class="easyui-validatebox textbox" type="text" name="textitle" data-options="prompt:'Enter textitle.',required:true,validType:'length[3,10]'"></td>
	</tr>
	<tr>
		<td>作者: </td>
		<td><input class="easyui-validatebox textbox" type="text" name="textwriter" data-options="prompt:'Enter textwriter',required:true,validType:'length[3,5]'"></td>
	</tr>
	<tr>
		<td> 出版社:</td>
		<td> <select class="easyui-validatebox textbox" name="published_id">
					<option value="未知">--请选择--
					<option value="清华大学出版社">清华大学出版社
					<option value="杭州电子科技大学出版社">杭州电子科技大学出版社
				</select>
		</td>
	</tr>
	<tr>
		<td>出版日期: </td>
		<td><input class="easyui-datebox" type="text" name="pubdate" size="12" maxlength="6"> </td>
	</tr>
	<tr>
		<td>价格: </td>
		<td><input class="easyui-validatebox textbox" type="text" name="price" size="12" maxlength="6"> </td>
	</tr>
	<tr>
		<td>库存位置: </td>
		<td><input class="easyui-validatebox textbox" type="text" name="inventoryloc" size="12" maxlength="6"> </td>
	</tr>
	<tr>
		<td> 类别:</td>
		<td>
		<input type="radio" name="typeradio" value="普通" checked="checked">
		普通 &nbsp&nbsp
		<input type="radio" name="typeradio" value="新书">
		新书&nbsp&nbsp
		<input type="radio" name="typeradio" value="精品">
		精品&nbsp&nbsp </td>
	</tr>
	<tr>
		<td>内容简介: </td>
		<td> <textarea class="easyui-validatebox textbox" name="jianjie" cols="50" rows="4" ></textarea></td>
	</tr>
	<tr>
		<td></td>
		<td align="center">
		 <input  class="easyui-validatebox textbox"  type="submit" name="submit" value="提交" onclick="submitForm()"> 
		<input  class="easyui-validatebox textbox" type="reset" name="reset" value="重置"></td>
	</tr>
</table>
</form>
<script>
		$(function(){
			$('input.easyui-validatebox').validatebox({
				tipOptions: {	// the options to create tooltip
					showEvent: 'mouseenter',
					hideEvent: 'mouseleave',
					showDelay: 0,
					hideDelay: 0,
					zIndex: '',
					onShow: function(){
						if (!$(this).hasClass('validatebox-invalid')){
							if ($(this).tooltip('options').prompt){
								$(this).tooltip('update', $(this).tooltip('options').prompt);
							} else {
								$(this).tooltip('tip').hide();
							}
						} else {
							$(this).tooltip('tip').css({
								color: '#000',
								borderColor: '#CC9933',
								backgroundColor: '#FFFFCC'
							});
						}
					},
					onHide: function(){
						if (!$(this).tooltip('options').prompt){
							$(this).tooltip('destroy');
						}
					}
				}
			}).tooltip({
				position: 'right',
				content: function(){
					var opts = $(this).validatebox('options');
					return opts.prompt;
				},
				onShow: function(){
					$(this).tooltip('tip').css({
						color: '#000',
						borderColor: '#CC9933',
						backgroundColor: '#FFFFCC'
					});
				}
			});
		});
	这里就是最开始的时候写的表单验证提交,发现问题的是,当开始验证的时候,就不能跳转,实现跳转就不能验证,一直找不到问题所在原因。
		/* $('#ff').form({
			url:'',
			onSubmit:function(){
				return $(this).form('validate');
			},
			success:function(data){
				$.messager.alert('Info',"提交成功!", 'info');
				
				/* $('#ff').form.action("./info"); */
			}
		});  */
	</script>
</body>
</html>

后来百度了一下, 很多人说在url中写入正确的路径或者页面就可以,但是我这个失效,原因没有深究,所以写了另外一个可以实现的方法,就当试水,反正效果能实现。有任何细节问题都可以留言或者私信。
修改的代码如下:

//添加的代码段,提交按钮改成普通按钮
		<input style="background-color: #fff;border: 1px solid #95B8E7;" type="button" class="easyui-linkbutton" id="addButton" value="添加"  ">
//添加JQ
$("#addButton").click(function(){
			 //ff为表单id。所有数据符合校验要求时,isValid 返回true。
			     //var isValid = $("#this").form('validate');
			     var isValid = $("#ff").form('validate');
			 		//alert(isValid);
			     if(isValid){
			          $("#addButton").attr("type","submit");
			     }
			});

成功改掉问题
测试:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/OrangeChenZ/article/details/83154910