天天看點

html5 html5Validate實作表單驗證

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; }
    }
}
           

繼續閱讀