easyUI中的form表单

Posted 2020-08-21 琢磨先生

首先创建form表单，并在form表单上创建id便于执行表单验证

<form id="form1"action="" method="post"
>
用户名：<input class="easyui-textbox" style="width:200px"
data-options="
required:true,validType:\'length[2,10]\'
"><br><br>

密码：  <input class="easyui-textbox" style="width:200px" 
data-options="type:\'password\',
required:true,validType:\'length[6,10]\'"><br><br>

年龄：  <input class="easyui-numberbox"style="width:200px"
data-options="min:18,max:99">
<br><br>
<a id="lb1" style="width:80px" class="easyui-linkbutton" href="#">提交</a>
</form>

　　2.通过URL接受参数

 

 

3.通过表单的回调函数进行验证（触发前验证onSubmit和触发成功后验证success）

 

<script type="text/javascript">

$(function(){
	
	//提交按钮
	$("#lb1").click(function(){
		
		$("#form1").form(\'submit\',{
			url:\'SaveUserServlet\',
			//提交前验证
			onSubmit:function(){   //提交触发前的回调函数
				
				//检查组件验证是否通过
				var isValid = $(this).form(\'validate\');
				
				if (!isValid){
					$.messager.show({
						
						title:\'消息\',
						msg:\'数据验证未通过\'
					});
				}
				return isValid;	// 返回false终止表单提交

			},
		success:function(data)
		{
			//alert("返回结果="+data);
			//js方式解析JSON
			var msg = eval("("+ data +")");//eval是js的方法
			if(msg.success)
				{
				alert(msg.message);
				}
			
		}
		});
	});
})



</script>