今天給大家講解下ASPNET mvc的客戶端驗證通常情況下我們在頁面中對輸入的內容多要進行客戶端驗證客戶端驗證一般使用JS進行這裡咱們講解下使用jqueryvalidate插件進行客戶端驗證
首先咱們看下注冊頁面的驗證效果
以上驗證主要包括
用戶名不能為空
密碼不能為空密碼長度不能小於位數
確認密碼不能為空確認密碼長度不能小於位確認密碼必須和密碼文本框輸入的一致
郵箱格式必須正確
以下是使用jqueryvalidate插件進行驗證的代碼
<%@ Page Language=C# Inherits=SystemWebMvcViewPage<MvcLoginModelsRegisterModel> %>
<!DOCTYPE html PUBLIC //WC//DTD XHTML Transitional//EN transitionaldtd>
<html xmlns= >
<head runat=server>
<title>注冊頁面</title>
<script type=text/javascript src=//Scripts/jqueryvsdocjs></script>
<script type=text/javascript src=//Scripts/jqueryvalidatejs></script>
<script type=text/javascript>
$()ready(function () {
$(#form)validate(
{
rules:
{
UserName:
{
required: true
}
UserPwd:
{
required: true
minlength:
}
ConfirPwd:
{
required: true
minlength:
equalTo: #UserPwd
}
Email:
{
email: true
}
}
messages:
{
UserName:
{
required: <span style=color:red>用戶名不能為空! </span>
}
UserPwd:
{
required: <span style=color:red>密碼不能為空!</span>
minlength: jQueryformat(<span style=color:red>密碼長度不能小於{}個字符!</span>)
}
ConfirPwd:
{
required: <span style=color:red>確認密碼不能為空!<span>
minlength: jQueryformat(確認密碼長度不能小於{}個字符!)
equalTo: <span style=color:red>兩次輸入密碼不一致!</span>
}
Email:
{
email: <span style=color:red>郵箱輸入格式不正確!</span>
}
}
onkeyup: false
});
});
</script>
</head>
<body>
<div>
<br />
<p >
<%if (ViewData[msg] != null)
{%>
<%:ViewData[msg]%>
<%} %>
</p>
<br />
<%HtmlBeginForm(Register user FormMethodPost new { name=formid=form}) ; %>
<table>
<tr>
<td><%: HtmlLabelFor(m => mUserName) %></td>
<td> <%: HtmlTextBoxFor(m => mUserName) %></td>
</tr>
<tr>
<td> <%: HtmlLabelFor(m => mUserPwd) %></td>
<td> <%: HtmlPasswordFor(m => mUserPwd) %></td>
</tr>
<tr>
<td> <%: HtmlLabelFor(m => mConfirPwd) %></td>
<td> <%: HtmlPasswordFor(m => mConfirPwd)%></td>
</tr>
<tr>
<td> <%: HtmlLabelFor(m => mEmail) %></td>
<td> <%: HtmlTextBoxFor(m => mEmail) %></td>
</tr>
<tr>
<td> <input type=submit value=提交 /></td>
<td></td>
</tr>
</table>
<%HtmlEndForm(); %>
</div>
</body>
</html>
$(#form)validate主要包括規則rules和提示信息messages兩部分
例如
rules:
{
UserName:
{
required:true
}
}
表示ID為UserName的文本框輸入內容不能為空
messages:
{
UserName:
{
required:<span style=color:red>用??戶?ì名?不?能¨為a空?! </span>
}
表示ID為UserName的文本框內容如果為空的話給出提示信息
onkeyup: 參數表示是否在按下鍵時執行驗證
From:http://tw.wingwit.com/Article/program/net/201311/11605.html
