今天给大家讲解下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: 参数表示是否在按下键时执行验证
