详细信息请看：http://www.runoob.com/jquery/jquery-plugin-validate.html
C# cshtml
@{ ViewBag.Title = "登陆"; Layout = null; } <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>@ViewBag.Title</title> <link rel="stylesheet" href="~/Content/styles.css"> <script src="~/Scripts/jquery-1.10.2.min.js"></script> <!--背景图片自动更换--> <script src="~/Scripts/supersized.3.2.7.min.js"></script> <script src="~/Scripts/supersized-init.js"></script> <!--表单验证--> <script src="~/Scripts/jquery.validate.min.js"></script> <script src="~/Scripts/common.js"></script> </head> <body> <div class="login-container"> <h1>登陆</h1> <div class="connect"> <p>11111111</p> </div> <p class="text-danger" style="text-align: center ;font-size:20px;margin:5px;color:red">@ViewData["loginerr"]</p> <form action="/hpuAccount/Login" method="post" id="loginForm"> <div> <input type="text" name="username" class="username" placeholder="用户名" autocomplete="off" /> </div> <div> <input type="password" name="password" class="password" placeholder="密码" oncontextmenu="return false" onpaste="return false" /> </div> <button id="submit" type="submit">登 陆</button> </form> </div> </body> </html>
common.js
//打开字滑入效果 window.onload = function(){ $(".connect p").eq(0).animate({"left":"0%"}, 600); $(".connect p").eq(1).animate({"left":"0%"}, 400); }; //jquery.validate表单验证 $(document).ready(function(){ //登陆表单验证 $("#loginForm").validate({ rules:{ username:{ required:true,//必填 minlength:4, //最少4个字符 maxlength:20,//最多20个字符 }, password:{ required:true, minlength:4, maxlength:20, }, }, //错误信息提示 messages:{ username:{ required:"必须填写用户名", minlength:"用户名至少为4个字符", maxlength:"用户名至多为20个字符", remote: "用户名已存在", }, password:{ required:"必须填写密码", minlength:"密码至少为4个字符", maxlength:"密码至多为20个字符", }, }, }); });
[jQuery]前台表单验证 使用jquery.validate.min.js插件
原文：http://www.cnblogs.com/yihy/p/4958120.html
