Asp.Mvc?2.0用戶客戶端驗(yàn)證實(shí)例講解(3)
更新時(shí)間：2022年04月26日 09:18:55 作者：游響云停
這篇文章主要介紹了Asp.Mvc?2.0實(shí)現(xiàn)客戶端驗(yàn)證功能，本文使用jquery.validate插件進(jìn)行驗(yàn)證，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
今天給大家講解下ASP.NET mvc的客戶端驗(yàn)證.通常情況下，我們在頁面中對(duì)輸入的內(nèi)容多要進(jìn)行客戶端驗(yàn)證，客戶端驗(yàn)證一般使用JS進(jìn)行，這里咱們講解下使用jquery.validate插件進(jìn)行客戶端驗(yàn)證。
首先咱們看下注冊頁面的驗(yàn)證效果
以上驗(yàn)證主要包括
1.用戶名不能為空
2.密碼不能為空，密碼長度不能小于5位數(shù)
3.確認(rèn)密碼不能為空，確認(rèn)密碼長度不能小于5位，確認(rèn)密碼必須和密碼文本框輸入的一致
4.郵箱格式必須正確。
以下是使用jquery.validate插件進(jìn)行驗(yàn)證的代碼
<%@ 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}個(gè)字符!</span>")
},
ConfirPwd:
{
required: "<span style='color:red'>確認(rèn)密碼不能為空!<span>",
minlength: jQuery.format("確認(rèn)密碼長度不能小于{0}個(gè)字符!"),
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主要包括規(guī)則rules和提示信息messages兩部分.
例如
rules:
{
UserName:
{
required:true
},
}
表示ID為UserName的文本框輸入內(nèi)容不能為空.
messages:
{
UserName:
{
required:"<span style='color:red'>用??戶?ì名?不?能¨1為a空?! </span>"
},
表示ID為UserName的文本框內(nèi)容如果為空的話，給出提示信息.
以上就是使用jquery.validate插件進(jìn)行客戶端驗(yàn)證的全部過程，希望對(duì)大家的學(xué)習(xí)有所幫助。
相關(guān)文章
asp.net Web Service 接口大量數(shù)據(jù)傳輸解決方案
就管他叫“使用多線程分段獲取大量數(shù)據(jù)方法”吧。假定我們的需求是，通過Web Service獲取10W條訂單，我的解決方案是 分成10個(gè)線程每個(gè)線程傳輸1W條訂單分段獲取2010-04-04
ASP.NET Core中間件初始化的實(shí)現(xiàn)
在日常使用ASP.NET Core開發(fā)的過程中我們多多少少會(huì)設(shè)計(jì)到使用中間件的場景，本文探究了ASP.NET Core中間件是如何初始化的，感興趣的可以了解一下2021-05-05
這篇文章主要為大家詳細(xì)介紹了微信公眾號(hào)支付，提供MVC版本，感興趣的小伙伴們可以參考一下2016-08-08
WPF實(shí)現(xiàn)左右移動(dòng)（晃動(dòng)）動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了WPF實(shí)現(xiàn)左右移動(dòng)或晃動(dòng)動(dòng)畫效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
ASP.NET搭配Ajax實(shí)現(xiàn)搜索提示功能
為了更好的用戶體驗(yàn)，不論是桌面軟件還是網(wǎng)站，在搜索查詢的輸入中都會(huì)加入提示功能，就像百度搜索一樣！今天筆者就ASP.NET編程介紹一下如何利用Ajax來實(shí)現(xiàn)搜索信息提示功能。2015-09-09
這篇文章主要為大家詳細(xì)介紹了mvc實(shí)現(xiàn)圖片驗(yàn)證碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
asp.net 程序性能優(yōu)化的七個(gè)方面 (c#（或vb.net）程序改進(jìn))
在我們開發(fā)asp.net過程中，需要注意的一些細(xì)節(jié)，以達(dá)到我們優(yōu)化程序執(zhí)行效率。2009-03-03
在 .NET 項(xiàng)目中復(fù)制資源文件夾到生成目錄的方法
本文主要介紹在使用 Visual Studio 進(jìn)行調(diào)試和發(fā)布時(shí),如何在 .NET 項(xiàng)目中復(fù)制資源文件夾到生成目錄,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
gojs是一個(gè)非常強(qiáng)大的可視化關(guān)系的js庫。本文介紹的是在使用gojs制作圖的過程中，你可能會(huì)碰到的問題的一些解決方案。對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-01-01![Asp.net 通用萬級(jí)數(shù)據(jù)分頁代碼[修正下載地址]](http://img.jbzj.com/images/xgimg/bcimg9.png)
Asp.net 通用萬級(jí)數(shù)據(jù)分頁代碼[修正下載地址]
在萬級(jí)數(shù)據(jù)量下的分頁代碼2008-10-10