<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="/Scripts/loading.js" type="text/javascript"></script>
<link href="/EasyUI/themes/icon.css" rel="stylesheet" type="text/css" />
<link href="/EasyUI/themes/gray/easyui.css" rel="stylesheet" type="text/css" />
<script src="/EasyUI/jquery.min.js" type="text/javascript"></script>
<script src="/EasyUI/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/Scripts/distinguishBrowser.js" type="text/javascript"></script>
</head>
<body>
<form id="fm" method="Post" onsubmit="return validateForm();">
<div style="margin-bottom: 20px; width: 300px;">
<input id="uid" class="easyui-textbox" name="Id" type="text" style="width: 100%"
data-options="label:'用户编号:',required:true">
</div>
<div style="margin-bottom: 20px; width: 300px;">
<input id="uname" class="easyui-textbox" name="Name" style="width: 100%" data-options="label:'用户名:',required:true">
</div>
<div style="margin-bottom: 20px; width: 300px;">
<input id="upassword" class="easyui-textbox" name="Password" style="width: 100%"
data-options="label:'密码:',required:true">
</div>
<div style="margin-bottom: 20px; width: 300px;">
<input id="email" class="easyui-textbox" name="Email" style="width: 100%" data-options="label:'电子邮箱:',required:true,validType:'email'">
</div>
<div style="margin-bottom: 20px; width: 300px;">
<input id="phonenumber" class="easyui-textbox" name="Phonenumber" style="width: 100%"
data-options="label:'电话号码:',required:true">
</div>
<div style="margin-bottom: 20px; width: 300px;">
<input id="cc1" class="easyui-combobox" name="Role" label="角色" style="width: 100%"
data-options="valueField:'id',textField:'text',url:'/Role/RoleHandler.ashx?action=GetAll',required:true">
</div>
<div style="margin-bottom: 20px; width: 300px;">
<input id="cc2" class="easyui-combobox" name="JT" label="所属集团" style="width: 100%"
data-options="valueField: 'id', textField: 'text', url: '/JT/JTHandler.ashx?action=GetAll',
onSelect: function(rec){
var url = '/GC/GCHandler.ashx?action=GetGC&jt=' + rec.id;
$('#cc3').combobox('reload', url);
},required:true" />
</div>
<div style="margin-bottom: 20px; width: 300px;">
<input id="cc3" class="easyui-combobox" name="GC" label="所属工厂" style="width: 100%"
data-options="valueField:'id',textField:'text', url: '/GC/GCHandler.ashx?action=GetAll',required:true">
</div>
</form>
<div id="dlg-buttons">
<a href="#" class="easyui-linkbutton" iconcls="icon-ok" onclick="saveUser()">保存</a>
<a href="#" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">
取消</a>
</div>
<script type="text/javascript">
function saveUser() {
if (getBrowserType() == "Chrome") {
//ajax提交表单验证方式
var validate = $("#fm").form('validate');
if (!validate) {
$.messager.alert("提示", '请正确填写表单!', "", function () {
$("#fm").find(".validatebox-invalid:first").focus();
});
return false;
}
$.ajax({
url: '/User/UserHandler.ashx?action=Add',
type: "Post",
data: $("#fm").serialize(), //将表单序列化
success: function (data) {
data = eval('(' + data + ')'); //将一个json字符串解析成js对象
//ajax方式直接将后台的json字符串转换为json对象,即这里的data已经是json对象,不需要转换
$.messager.alert("提示", data.Message, 'info'); //显示后台信息
if (data.Success) {
location.href = '/User/Show.html';
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}
});
} else {
$('#fm').form('submit', {
url: '/User/UserHandler.ashx?action=Add',
onSubmit: function () {
//验证表单是否合法
return $(this).form('validate');
},
success: function (data) {
data = eval('(' + data + ')'); //将一个json字符串解析成js对象
$.messager.alert("操作提示", data.Message, 'info'); //提示后台错误信息
if (data.Success) {
location.href = '/User/Show.html';
}
}
});
}
}
</script>
</body>
</html>
[asp.net] 利用ajax与easyui验证并提交表单
猜你喜欢
转载自blog.csdn.net/zyxhangiian123456789/article/details/80878311
今日推荐
周排行