Asp.Mvc 2.0用户客户端验证实例讲解（3）

今天给大家讲解下ASP.NET mvc的客户端验证.通常情况下，我们在页面中对输入的内容多要进行客户端验证，客户端验证一般使用JS进行，这里咱们讲解下使用jquery.validate插件进行客户端验证。
首先咱们看下注册页面的验证效果

以上验证主要包括
1.用户名不能为空
2.密码不能为空，密码长度不能小于5位数
3.确认密码不能为空，确认密码长度不能小于5位，确认密码必须和密码文本框输入的一致
4.邮箱格式必须正确。

以下是使用jquery.validate插件进行验证的代码

[html]
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<MvcLogin.Models.RegisterModel>" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
 <title>注册页面</title>
 <script type="text/javascript" src="../../Scripts/jquery-1.4.1-vsdoc.js"></script>
 <script type="text/javascript" src="../../Scripts/jquery.validate.js"></script>
 <script type="text/javascript">
 $().ready(function () {
 $("#form1").validate(
 {
 rules:
 {
 UserName:
 {
  required: true
 },
 UserPwd:
 {
  required: true,
  minlength: 6
 },
 ConfirPwd:
 {
  required: true,
  minlength: 6,
  equalTo: "#UserPwd" 

 },
 Email:
 {
  email: true
 } 

 },
 messages:
 {
 UserName:
 {
  required: "<span style='color:red'>用户名不能为空! </span>"
 }, 

 UserPwd:
 {
  required: "<span style='color:red'>密码不能为空!</span>",
  minlength: jQuery.format("<span style='color:red'>密码长度不能小于{0}个字符!</span>")
 },
 ConfirPwd:
 {
  required: "<span style='color:red'>确认密码不能为空!<span>",
  minlength: jQuery.format("确认密码长度不能小于{0}个字符!"),
  equalTo: "<span style='color:red'>两次输入密码不一致!</span>" 

 },
 Email:
 {
  email: "<span style='color:red'>邮箱输入格式不正确!</span>"
 }
 },
 onkeyup: false
 }); 

 });
 </script>
</head>
<body>
 <div>
 <br /> 

 <p style="font-size:12px;color:red"> 

 <%if (ViewData["msg"] != null)
 {%>
 <%:ViewData["msg"]%>
 <%} %>
 </p>
 <br />
 <%Html.BeginForm("Register", "user", FormMethod.Post, new { name="form1",id="form1"}) ; %> 

 <table>
 <tr>
 <td><%: Html.LabelFor(m => m.UserName) %></td>
 <td> <%: Html.TextBoxFor(m => m.UserName) %></td>
 </tr> 

 <tr>
 <td> <%: Html.LabelFor(m => m.UserPwd) %></td>
 <td> <%: Html.PasswordFor(m => m.UserPwd) %></td>
 </tr> 

 <tr>
 <td> <%: Html.LabelFor(m => m.ConfirPwd) %></td>
 <td> <%: Html.PasswordFor(m => m.ConfirPwd)%></td>
 </tr> 

 <tr>
 <td> <%: Html.LabelFor(m => m.Email) %></td>
 <td> <%: Html.TextBoxFor(m => m.Email) %></td>
 </tr> 

 <tr>
 <td> <input type=submit value="提交" /></td>
 <td></td>
 </tr> 

 </table> 

 <%Html.EndForm(); %> 

 </div>
</body>
</html>

$("#form1").validate主要包括规则rules和提示信息messages两部分.
例如

rules:
 {
 UserName:
 {
  required:true
 },
}

表示ID为UserName的文本框输入内容不能为空.

messages:
 {
 UserName:
 {
  required:"<span style='color:red'>用®?户¡ì名?不?能¨¹为a空?! </span>"
 },

表示ID为UserName的文本框内容如果为空的话，给出提示信息.

以上就是使用jquery.validate插件进行客户端验证的全部过程，希望对大家的学习有所帮助。

赞 (0)

相关推荐

  • ASP.NET实现用户注册和验证功能（第4节）

    ASP.NET实现用户注册和验证功能（第4节）

    在前几篇文章中小编已经为大家分享几篇关于验证控件实现的文章,今天我们再具体为用户登录页面添加输入数据验证功能和验证码功能. 学习内容 1.创建ASP.NET应用程序. 在E:\Solution1目录下双击文件,运行Visual Studio 2008.在"解决方案资源管理器"面板中,右击"解决方案,在弹出的快捷菜单中选择"添加"--"新建网站"命令,新建Chap4站点. 2.在站点Default.aspx页面上先添加一个6行2列的表格,

  • 详解ASP.NET七大身份验证方式以及解决方案

    详解ASP.NET七大身份验证方式以及解决方案

    在B/S系统开发中,经常需要使用"身份验证".因为web应用程序非常特殊,和传统的C/S程序不同,默认情况下(不采用任何身份验证方式和权限控制手段),当你的程序在互联网/局域网上公开后,任何人都能够访问你的web应用程序的资源,这样很难保障应用程序安全性.通俗点来说:对于大多数的内部系统.业务支撑平台等而言,用户必须登录,否则无法访问和操作任何页面.而对于互联网(网站)而言,又有些差异,因为通常网站的大部分页面和信息都是对外公开的,只有涉及到注册用户个人信息的操作,或者网站的后台管理等

  • Asp.Mvc 2.0用户服务器验证实例讲解(4)

    Asp.Mvc 2.0用户服务器验证实例讲解(4)

    这一节给大家讲解下ASP.NET MVC 2.0的服务器端验证的用法.大家知道,一个项目只用JS客户端验证是不安全的,用户可以禁用JS来绕过客户端验证,所以必须有服务器端验证. 关于服务器端验证,主要调用System.ComponentModel.DataAnnotations命名空间里面的类库. 咱们这次还是以注册页面为例来讲解服务器端验证,主要对注册页面完成以下验证 1.用户名不能为空 2.密码不能为空,密码长度不能小于5位数, 3.密码和确认密码输入必须一样 4.邮件格式必须正确 咱们先看

  • ASP.NET MVC4之js css文件合并功能(3)

    ASP.NET MVC4之js css文件合并功能(3)

    MVC4增加了一些新功能,接下来,我们来研究下MVC4中的新增功能,我们在新建一个MVC4项目的时候,会发现在项目下多出了一个App_Start文件夹,文件夹下面有4个文件,BundleConfig.cs,FilterConfig.cs,RouteConfig.cs,WebApiConfig.cs,其中BundleConfig.cs文件就是我们这一节要讲的的文件. 众所周知,浏览器在向服务器发送请求的时候,请求的文件连接数量是有限制的.使用BundleConfig可以将多个文件请求和并成一个请求

  • ASP.NET网站模板的实现(第2节)

    ASP.NET网站模板的实现(第2节)

    我们的主要学习任务是掌握站点地图文件和站点导航控件的使用以及熟练掌握创建母版页和生成内容页的方法,开始学习吧 学习内容: 第一步,网站的面包屑导航 1.创建ASP.NET应用程序,运行Visual Studio2008,在菜单栏中选择"文件"→"新建"→"项目"命令,进行操作. 2.在"解决方案资源管理器"面板中,右击"解决方案'0931'",在弹出的快捷菜单中选择"添加"→"

  • ASP.NET MVC5添加验证（4）

    ASP.NET MVC5添加验证（4）

    有时候我们网站需要添加验证,这一节我们演示下怎样使用ASP.NET MVC5添加验证. 1.在Model类里面添加验证,代码如下: public class Movie { public int ID { get; set; } [StringLength(60,MinimumLength=3,ErrorMessage="主题的长度必须在3到60个字符")] public string Title { get; set; } [Display(Name="Release Da

  • ASP.NET MVC3模板页的使用（2）

    ASP.NET MVC3模板页的使用（2）

    本文为大家演示下MVC3中怎样使用模板页,在传统的webform设计模式中,我们使用masterpage作为模板页,在MVC3 razor视图设计中,我们使用另一种方式作为模板页. 新建一个MVC3项目,在解决方案资源管理中,我们可以看到VIEWS文件夹下面有一个Shared文件夹.在Shared文件夹里面有一个_Layout.cshtml页面.这个就是项目中默认的模板页面.如下图所示 : 1.新建内容页         内容页在MVC3中也叫做视图布局页,可以右键选中视图文件夹,通过添加视图来

  • ASP.NET在线文本编辑控件的使用（第6节）

    ASP.NET在线文本编辑控件的使用（第6节）

    首先了解在线文本编辑环境FCKeditor的使用方法,然后使用FCKeditor实现设计一个发表日志文章的页面. 学习内容 1.将FCKeditorV2.dll文件添加到工具箱.       右击工具箱中的任一控件组,在弹出的快捷菜单中选择"选择项",弹出"选择工具箱项"对话框,选择".NET Framework组件"选项卡,单击"浏览"按钮,在弹出的对话框中选择添加Bin文件夹下的FCKeditorV2.dll文件,添加控件

  • ASP.NET网站聊天室的设计与实现(第3节)

    ASP.NET网站聊天室的设计与实现(第3节)

    大家都玩过网站聊天室吧,那知道它是怎么实现的吗? 今天我们就来设计一个网站聊天室,用户输入用户名登陆聊天室,采用框架结构实现. 学习内容: 第一步,聊天室首页与简单计数器设计 1.打开VS2008.在"解决方案'101'下新建网站,命名为Chatroom.默认首页文件为Default.aspx. 2.为Default.aspx添加窗体控件,切换到"设计"视图,从左侧工具箱标准组中拖出2个Lable控件,1个Textbox控件,一个Button控件,最后给输入昵称的Textbo

  • Asp.Mvc 2.0实现用户注册实例讲解（1）

    Asp.Mvc 2.0实现用户注册实例讲解（1）

    最近一直在研究ASP.NET MVC,看了一些教程,总觉得印象不是太深刻,于是决定动手写一个系列的MVC教程,一方面是为了加深自己的印象,另一方面也给学习MVC的同学提供一些帮助,作为一个参考资料.本系列的教程将通过一个实例来由浅入深讲解MVC,相关知识点将在我们的实例中为大家讲解. Asp.mvc模式改变了传统的asp.net webform方式,我们在使用MVC开发WEB程序时,要摒弃传统的WEBFORM方式的思想,传统的WEBFORM方式用户拖拉一个按钮,然后双击按钮,就可以在后台写相应的

  • ASP.NET用户注册实战（第11节）

    ASP.NET用户注册实战（第11节）

    在我们第四小节---ASP.NET实现用户注册和验证功能当中,已经学习了ASP.NET验证控件的作用和使用方法,所以相对来说这节就比较轻松. 学习内容: 步骤一 添加新项,创建Web窗体并将其命名为"zhuce.aspx" 步骤二 布局页面,创建6行2列的表格 步骤三  在zhucechuli.cs页面中编写代码如下: public class zhucechuli { public zhucechuli() { } private SqlConnection conn; public

  • ASP.NET实现数据的添加(第10节)

    ASP.NET实现数据的添加(第10节)

    这节以新闻网站为例实现新闻的添加,并把附件和图片上传至服务器. 学习内容 步骤一 添加新项,创建Web窗体并将其命名为"newsadd.aspx" 步骤二 布局页面,创建6行2列的表格 步骤三  数据源控件定义数据的方法,在newschuli.cs页面中编写代码如下: public static void addnews(newsclass news1) { using (SqlConnection cn = dbconn.GetConnection()) { cn.Open(); S

  • Asp.Mvc 2.0用户的编辑与删除实例讲解(5)

    Asp.Mvc 2.0用户的编辑与删除实例讲解(5)

    这一节来给大家演示下怎么对用户信息进行修改和删除用户,主要包括以下内容 1.显示所有用户 2.编辑用户 3.删除用户 1.显示所有用户   我们把所有用户信息查询出来,以表格形式在页面上显示,效果图如下: 首先把所有用户信息显示在index页面上.找到index页面对应的controller,然后查找出所有用户信息,把查找出的用户集合放在viewdata里面  Controller代码: public ActionResult Index() { //查询出所有用户 DataSet ds = n

  • Asp.Mvc 2.0实现用户登录与注销功能实例讲解（2）

    Asp.Mvc 2.0实现用户登录与注销功能实例讲解（2）

    这一节讲解下ASP.MVC 2.0的用户登录与注销功能,先讲登录,后说注销.我们这个系列讲的用户登录方式都是FORM表单验证方式.在讲之前先给大家说下<%:%>的功能,<%:%>与<%=%>功能一样,用来动态输出内容. 一.登录 1. 建立MODEL 登录的时候,我们一般只要验证用户名和密码,还有是否保存登录COOKIE,所以我们建立一个MODEL登录类,只需包括3个字段就可以. /// <summary> /// 用户登录MODEL /// </su

  • ASP.NET对大文件上传的解决方案

    首先,我们需要下载这个名为 RanUpLoad 的组件. 下载完成之后,两个 dll 文件添加到项目的引用中区,xml 文件也要复制在项目中的 bin 文件夹下,也就是最后三个文件都要存在于 bin 文件夹中. 接着,上传控件还是用 ASP.NET 中自带的 FileUpload 控件,需要添加的就是在 FileUpload 控件旁边加入标签: <radU:RadProgressManager ID="Radprogressmanager1" Width="100%&q

  • 创建第一个ASP.NET应用程序（第1节）

    创建第一个ASP.NET应用程序（第1节）

    这一节我们一起学习创建一个根据用户输入来显示相应的欢迎信息的页面,希望小伙伴们可以和我一起动手操作 学习内容: 第一步,创建ASP.NET程序 1.运行 Visual Studio 2008.在菜单栏中选择"文件" →"新建" →"项目"命令,在弹出的"新建项目"的对话框中,选择左侧的"其他项目类型"树形目录中的"Visual Studio 解决方案"选项,在右边"Visual

  • ASP.NET MVC3网站创建与发布（1）

    ASP.NET MVC3网站创建与发布（1）

    有时候我们有了网站但是却不知道怎么进行发布,这一节我们演示下怎样使用VS2010创建与发布MVC3建立的网站.使用VS2010创建MVC3.0网站,需要下载MVC3.0的安装包,这个大家可以去网络上下载. 1.项目创建 打开VS2010,选择 文件--新建项目---ASP.NET MVC3 web应用程序,如下图  接着选择Razor视图,如下图,点击确定,这样一个MVC3项目就创建完成了  2.网站发布    右键选择刚创建的项目,弹出一个下拉菜单,选择 "发布"菜单,弹出 &quo

  • ASP.NET中验证控件的使用方法

    ASP.NET中验证控件的使用方法

    对于这些常用的控件有效性验证,在Asp.Net中有单独的验证控件可供使用.他们可以满足一般的,诸如非空,范围.比较等的验证,为用户登录页面添加输入数据验证功能和验证码功能. 验证控件: Asp.Net中内置的验证控件有:RequiredFieldValidation.RangeValidation.RegularExpressValidation.CompareValidation.CustomValidation和ValidationSummary等六种.其中用户自定义验证控件,由于并不非常常

  • Asp.Net上传图片同时生成高清晰缩略图

    在asp.net中,上传图片功能或者是常用的,生成缩略图也是常用的.baidu或者google,c#的方法也是很多的,但是一用却发现缩略图不清晰啊,缩略图片太大之类的事情,下面是我在处理图片上的代码,效果不错,所以拿出来分享,(效果能达到一些绘图软件的效果) 代码如下: /// <summary> /// asp.net上传图片并生成缩略图 /// </summary> /// <param name="upImage">HtmlInputFile控

  • asp.net之生成验证码的方法集锦（一）

    现在很多网站都有注册登录的页面,为了更好的满足用户体验和网站的安全性,很多网站都采用动态生成的图形码或者是附加码进行验证,下面把生成验证码的方法给大家整理如下. 实现验证技术就是在服务器端生成一个随机数,并将其保存在内存中,发送给浏览器,并以图片的形式提交给用户.之前在做项目过程中,完成了一个利用script进行用户注册及登录的验证码时,发现有各种生成验证码的方式,下面主要是几种不同的生成验证码的方式: 1.绘制纯数字的网站验证码 本实例实现的是数字验证码技术,即随机生成4位数字作为验证码.在开

随机推荐