html代碼
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta id="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-html5Validate-min.js"></script>
<script type="text/javascript">
$(function () {
$('#TestForm').html5Validate(function () {
var model = { UserName: $('#UserName').val(), Password: $('#Password').val(), ConfirmPassword: $('#ConfirmPassword').val() };
$.post('@Url.Action("DoSubmit", "Home")', model, function (result) {
if (result != undefined && result != null) {
alert(result.UserName);
}
});
}, {
validate: function () {
var Password = $('#Password').val();
var ConfirmPassword = $('#ConfirmPassword').val();
if (Password != ConfirmPassword) {
$('#ConfirmPassword').testRemind('前後密碼不一緻');
return false;
}
return true;
}
});
});
</script>
</head>
<body>
<form action="" method="post" id="TestForm">
<table>
<tr>
<td>text</td>
<td><input type="text" id="UserName" required /></td>
</tr>
<tr>
<td>password</td>
<td><input type="password" id="Password" required /></td>
</tr>
<tr>
<td>password</td>
<td><input type="password" id="ConfirmPassword" required /></td>
</tr>
<tr>
<td>radio</td>
<td>
<input type="radio" id="Male" name="sexy" required />
<input type="radio" id="Female" name="sexy" required />
</td>
</tr>
<tr>
<td>email</td>
<td><input type="email" id="Email" /></td>
</tr>
<tr>
<td>multiple email</td>
<td><input type="email" id="MultiEmail" multiple /></td>
</tr>
<tr>
<td>url</td>
<td><input type="url" id="Url" /></td>
</tr>
<tr>
<td>number</td>
<td><input type="number" id="Number" min="0" max="10" step="2" value="4" /></td>
</tr>
<tr>
<td>range</td>
<td><input type="range" id="Range" min="0" max="10" step="2" value="4" /></td>
</tr>
<tr>
<td>date</td>
<td><input type="date" id="Date" /></td>
</tr>
<tr>
<td>time</td>
<td><input type="time" id="Time" /></td>
</tr>
<tr>
<td>month</td>
<td><input type="month" id="Month" /></td>
</tr>
<tr>
<td>week</td>
<td><input type="week" id="Week" /></td>
</tr>
<tr>
<td>datetime-local</td>
<td><input type="datetime-local" id="DateTimeLocal" /></td>
</tr>
<tr>
<td><input type="reset" value="重置"/></td>
<td><input type="submit" value="送出" /></td>
</tr>
</table>
</form>
</body>
</html>
controller代碼
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace WebApplication2.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
public JsonResult DoSubmit(StudentModel model)
{
return Json(model);
}
}
public class StudentModel
{
public string UserName { get; set; }
public string Password { get; set; }
public string ConfirmPassword { get; set; }
}
}