解决使用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">
普通   
<input type="radio" name="typeradio" value="新书">
新书  
<input type="radio" name="typeradio" value="精品">
精品   </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");
}
});
成功改掉问题
测试: