EasyUI之表单Form

1、实例背景

     EasyUI常用的Form表单,利用输入框直接提交值;清空按钮,将填写有误的数据进行清空


2、实例源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>EasyUI之表单Form</title>
		<link rel="stylesheet" href="../themes/black/easyui.css" />
		<link rel="stylesheet" href="../themes/icon.css" />
		<link rel="stylesheet" href="../css/demo.css" />
		<script type="text/javascript" src="../js/jquery.min.js" ></script>
		<script type="text/javascript" src="../js/jquery.easyui.min.js" ></script>
		<script>
			$(document).ready(function(){
				//提交事件
				$("#submitBtn").click(function(){
					$(this).form("submit");
				});
				
				//重置事件
				$("#resetBtn").click(function(){
					$(this).form("clear");
				});
			});
		</script>
	</head>
	<body>
		<div class="easyui-panel" title="发送邮件" style="400px">
			<div style="padding:10px 60px 20px 60px">
			    <form id="ff" method="post">
			    	<table cellpadding="5">
			    		<tr>
			    			<td>用户名:</td>
			    			<td><input class="easyui-textbox" type="text" name="name" data-options="required:true"></input></td>
			    		</tr>
			    		<tr>
			    			<td>电子邮件:</td>
			    			<td><input class="easyui-textbox" type="text" name="email" data-options="required:true,validType:'email'"></input></td>
			    		</tr>
			    		<tr>
			    			<td>主题:</td>
			    			<td><input class="easyui-textbox" type="text" name="subject" data-options="required:true"></input></td>
			    		</tr>
			    		<tr>
			    			<td>消息:</td>
			    			<td><input class="easyui-textbox" name="message" data-options="multiline:true" style="height:100px"></input></td>
			    		</tr>
			    		<tr>
			    			<td>语言:</td>
			    			<td>
			    				<select class="easyui-combobox" name="language" style=" 172px;">
			    					<option value="1">中文简体</option>
			    					<option value="2">中文繁体</option>
			    					<option value="3">英语</option>
			    			    </select>
			    			</td>
			    		</tr>
			    	</table>
			    </form>
			    <div style="text-align:center;padding:5px">
			    	<a href="javascript:void(0)" class="easyui-linkbutton" id="submitBtn" style=" 100px;">提交</a>
			    	<a href="javascript:void(0)" class="easyui-linkbutton" id="resetBtn" style=" 100px;">清空</a>
			    </div>
		    </div>
		</div>
	</body>
</html>

3、实例结果

(1)点击提交


(2)点击清空


原文地址:https://www.cnblogs.com/hzcya1995/p/13314020.html