1,juery 验证表单代码部分
复制代码 代码示例:
<script type="text/
javascript">
$().ready(function() {
$("#frmReg").validate(
{
/* 插件会自动在
文本框后生成一个label,取标记名为'reg'
这样可以用 reg.success{}来控制样式
reg.success之间不要留空格
*/
errorElement: "reg",
success: function(label) {
label.text(" ").addClass("success");
},
rules: {
username: {
required: true,
minlength: 2,
maxlength:16
},
email:{required:true,email:true},
password: {
required: true,
minlength: 6,
maxlength:16
},
confirmPassword:{required:true, equalTo: "#password"},
validate:{required:true}
}
}
);
});
</script>
2,html代码部分
复制代码 代码示例:
<form action="/Account/Register" method="post" id="frmReg">
<div class="left">
<div class="leadInfo">请填写以下信息,全部为必填:</div>
<div class="userInput">
<ul class="userInfo">
<li><span class="label">帐号:</span><input name="username" id="username" title="中英文均可不超过8个汉字或16个字符"/></li>
<li><span class="label">Email帐号:</span><input name="email" id="email" title="请输入Email"/></li>
<li><span class="label">登录密码:</span><input type="password" name="password" id="password" title="请输入6至16位数字或字母"/></li>
<li><span class="label">重填密码:</span><input type="password" name="confirmPassword" id="confirmPassword" title="请重复上面的密码"/></li>
<li>
<div><span class="label">验证码:</span><input name="validate" id="validate" title="请输入下面图片上的数字"/></div>
<br /><span class="moreInfo">看不清<a href="javascript:refresh_captcha()">点此刷新</a> </span>
<img id="captchaImage" name="captchaImage" src="/validate/VerifyCodeImage.aspx" align="absmiddle" />
</li>
</ul>
</div>
<div class="c_gray" align="center">Email帐号及昵称,注册后不能修改,请仔细核对。</div><br />
<div class="userAction">
<input name="Submit" id="submit" type="submit" value="完成注册" tabindex="7" class="btnNormal" />
<input type="reset" id="reset" value="重填" tabindex="8" class="btnNormal" />
</div>
<div class="leadInfo">已经注册,<%= Html.ActionLink("请登陆","LogOn") %></div>
<input type='hidden' name="gender" value="-1" />
<input type='hidden' name="city" value="35" />
<input type='hidden' name="cburl" value="" />
</div>
</form>
有兴趣的朋友,可以亲自动手测试下,看看效果如何吧。