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比原生提交更方便一些，毕竟还有回调处理。
如有错误，烦请指正。
表单内容还有上传文件，在下一篇中列出。