ASP.NET MVC提交表单的几种方式(验证+提交+后台接收)
原生提交方式
也就是在form标签上添加action属性
验证
- 验证非空直接在input标签上添加
required属性（h5），这个属性必须和type="submit"的按钮搭配起来用，如果button的type不是submit，那这个required是没有意义的。 - 验证其他（使用正则表达式或者长度限制时）使用onsubmit属性。onsubmit返回false不提交表单，返回true表示提交表单。
原生提交方式的验证有两种
在form标签下添加onsubmit="return functionName()
<form id="teamForm" action="getTeam" onsubmit="return demo()"><div class="form-group row"><label class="col-md-2" for="customer">label><div class="col-md-10"><input name="customer" type="text" class="form-control" id="customer" placeholder="请输入客户名称" required>div>div><div class="form-group row"><label class="col-md-2" for="description">产品描述label><div class="col-md-10"><input name="description" type="text" class="form-control" id="description" placeholder="请输入产品描述" required>div>div><button type="submit" class="btn btn-primary">开单button>form><script>function demo() {//写验证}script>
在js里为form绑定submit事件
$("#teamForm").bind("submit", function () {//写验证})
验证失败后的提醒
因为很多时候用的都是alert，但其实它的用户体验不是很好，每次都需要点击，所以不建议使用
h5的required属性（表示必填项），此验证几秒之后自动消失，required 属性适用于以下 类型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。上面提过的required只能与type='submit'的button一起使用
如果想要修改默认提示信息，在input里添加oninvalid="setCustomValidity('请填写客户名称');" oninput="setCustomValidity('')"
<input name="customer" type="text" class="form-control" id="customer" placeholder="请输入客户名称" required oninvalid="setCustomValidity('请填写客户名称');" oninput="setCustomValidity('');">
限制输入字符数（有依赖bootstrap）
oninput这个事件是实时监听用户输入，它的使用可以大大提高效率。
$(function () {checkLen("#customer", 10);//限定输入10字符checkLen("#description", 10);//10个字符})function checkLen(element, length) {$(element).on("input propertychange", function (event) {var len = $.trim($(element).val()).length;if (len > length) {$(element).val($.trim($(element).val()).substring(0, length));showPopover($(element), "限定输入" + length + "个字");return;}})}function showPopover(target, msg) {target.attr("data-original-title", msg);$('[data-toggle="tooltip"]').tooltip();target.tooltip('show');target.focus();//2秒后消失提示框var id = setTimeout(function () {target.attr("data-original-title", "");target.tooltip('hide');}, 2000);}
正则表达式限制只能输入数字
value = value.replace(/[^\d]/g, '');
表示不符合括号内正则表达式的替换为空格，g表示全局查找，将value里不是数字的字符全部替换为空格。
在上面的oninput事件后面添加
var reg = /^\d$/g;if (!reg.test($.trim($(element).val()))) {var value = $.trim($(element).val());value = value.replace(/[^\d]/g, '');$(element).val(value);showPopover($(element), "只能输入数字");}
后台获取
取决于method
get方式提交，url参数以name组成键值对，拼接在url（http://www.example.com/example/program?x=28&y=66
）后面，获取时使用Request.QueryString["name"]
post方式提交表单，因为get方式不安全，所以大部分时候用post的情况较多。
后台接收使用 Request.Form["name"]
post方式提交不要忘记HttpPost的头，表示这是个post请求
[HttpPost]public ActionResult getTeam(){var customer = Request.Form["customer"];var pwd = Request.Form["description"];}
ajaxSubmit提交
需要下载jquery的form插件，下面贴了宝藏地址
插件下载地址
$("#teamForm").ajaxSubmit({url: "Home/getTeam",type: "post",dataType: "json",data:{"id":"3"},//在getTeam方法里定义参数获取beforeSubmit: function () {//返回false的话表单不会提交 可用于表单验证和处理提交前的数据console.log("before");},success: function (responseText, statusText, xhr, $form) {console.log(eval(responseText));if (eval(responseText)) {alert("开单成功");} else {alert("开单失败");}},error: function (xhr, status, err) {alert("error");},clearForm: true, // 成功提交后，清除表单填写内容resetForm: true // 成功提交后，重置表单填写内容})
[HttpPost]public JsonResult getTeam(string id){var customer = Request.Form["customer"];var pwd = Request.Form["description"];var paraid = id;return Json(true);}
这么看来ajaxSubmit比原生提交更方便一些，毕竟还有回调处理。
如有错误，烦请指正。
表单内容还有上传文件，在下一篇中列出。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！