[ASP.NET 技术点滴] Jquery 前端验证-优快云博客

本文介绍了一个简单的ASP.NET MVC4登录表单实现案例，使用HTML和JQuery进行表单元素的布局和验证规则设置。展示了如何通过JQuery的validate插件对表单输入项进行必填项验证，并提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上HTML代码：

 1 <form id="login" name="login" action="~/f_login/Login" method="post">
 2     用户名：<input name="cuName" type="text" value="用户名/手机号"
 3                onfocus="if (value == '用户名/手机号') { value = '' }"
 4                onblur="if (value == '') { value = '用户名/手机号' }" /><br />
 5     密码：<input name="cPwd" type="password"><br />
 6 
 7     验证码：<input type="text" id="valText" name="code" />
 8     <img alt="验证码" id="validimg" src="@Url.Action("CreateImage","ValidationCode")" />
 9 
10     <br />
11     <input type="submit" id="flogin" value="登录" />&nbsp;&nbsp;&nbsp;&nbsp;
12     <input type="reset" id="flogin" value="取消" />
13 </form>

再上Jquery代码：

 1 <script type="text/javascript" src="~/Scripts/jquery-1.8.2.min.js"></script>
 2 <script type="text/javascript" src="~/Scripts/jquery.validate.min.js"></script>
 3 <script type="text/javascript">
 4     $(document).ready(function () {
 5         $("form").validate({
 6             rules   :{
 7                 cuNmae  : { required: true },
 8                 cPwd: { required: true },
 9                 code: {required:true}
10                 //birhthDate  :{required: true, date: true},
11                 //blogAddress :{url: true},
12                 //emailAddress:{required: true, email: true}
13             },
14             messages: {
15                 cuName: { required: "请输入姓名" },
16                 cPwd: { required: "请输入密码" },
17                 code: {required:"请输入验证码"}
18                 //birhthDate  :{ required: "请输入出生日期", date: "请输入一个合法的日期"},
19                 //blogAddress :{ url: "请输入一个合法的URL" },
20                 //emailAddress:{ required: "请输入Email地址", email: "请输入一个合法的Email地址"}
21             }
22         });
23     });
24 </script>