easyUI中的form表单

时间:2021-10-26 18:23:23

首先创建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接受参数

easyUI中的form表单

easyUI中的form表单

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>