微信公众号：程序yuan
关注可获得更多资源。问题或建议，请公众号留言;
查看--> 全套EasyUI示例目录
27.Form表单组件
Controller文件
@RequestMapping(value = "/validateUser")
@ResponseBody
public String validateUser(String name, String email,String code){
System.out.println(name);
System.out.println(email);
System.out.println(code);
//简单拼成json格式的字符串
return "{\"name\":\""+name+"\",\"email\":\""+email+"\",\"code\":\""+code+"\"}";
}
@RequestMapping(value = "/getUserInfo")
@ResponseBody
public String validateUser(){
String name = "ooyhao";
String email = "ooyhao1996@163.com";
String code = "123456789";
//简单拼成json格式的字符串
return "{\"name\":\""+name+"\",\"email\":\""+email+"\",\"code\":\""+code+"\"}";
}
JSP文件
<%--
Created by IntelliJ IDEA.
User: ooyhao
Date: 2018/7/29 0029
Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Datebox</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/Form.js"></script>
<style rel="stylesheet" type="text/css">
</style>
<script>
</script>
</head>
<body style="padding: 100px;">
<%--只有JS加载方式--%>
<form id="box" method="post" style="border: 1px solid #ccc; width: 300px; height: 200px; text-align: center; margin-top: 10px;">
<br>
<div>
<label for="name">Name:</label>
<input class="easyui-validatebox" type="text" name="name" data-options="required:true">
</div>
<br>
<div>
<label for="email">Email:</label>
<input class="easyui-validatebox" type="text" name="email" data-options="validType:'email',required:true">
</div>
<br>
<input type="submit">
</form>
<br><br>
<button id="btn">按钮</button>
</body>
</html>
JS文件
$(function () {
//使用submit方法提交
$('#box').form(/*'submit',*/{
url:'http://localhost:8081/easyui/validateUser.action',
onSubmit:function (param) {
// param.name = 'yanghao';
// param.email = '625194996@qq.com';
param.code = '1234567';
//返回false停止提交
//通过验证的结果来判断是否需要进行表单提交
return $('#box').form('validate');
},
success:function (data) {
//将字符串转换为json串
var v = eval（'('+data+")");
if(v.name)
alert(v.name);
if(v.email)
alert(v.email);
if(v.code)
alert(v.code);
},
onLoadSuccess:function (data) {
alert(data);
},
onLoadError:function () {
alert("cuowu");
}
});
$('#box').form('disableValidation');
$('#btn').click(function () {
//验证表单
// alert($('#box').form('validate'));
//禁用表单验证
// $('#box').form('disableValidation');
//启用表单验证
$('#box').form('enableValidation');
});
/* $('#box').form({
onBeforeLoad:function (param) {
alert("before Load");
},
onLoadSuccess:function (data) {
console.log(data);
},
onLoadError:function () {
alert("load 失败");
}
});*/
// $('#box').form('load', 'http://localhost:8081/easyui/getUserInfo.action');
});效果图
------------------------------------------------
关注小编微信公众号获取更多资源
