1、引入JQuery库和插件:
<script src="scripts/jquery-1.11.1.js" type="text/javascript"></script><span style="white-space:pre"> </span>
<script src="scripts/Login.js" type="text/javascript"></script>
<script src="scripts/input.js" type="text/javascript"></script>
<script src="scripts/jquery.validate.js" type="text/javascript"></script><span style="white-space:pre"> </span>
<script src="scripts/jquery.validate.messages_cn.js" type="text/javascript"></script>
2、需要验证的表单
<span style="white-space:pre"> </span><form id="form2" action="LoginForm.aspx" method="post">
<div class="ad-box">
<h2 class="title">最新特权活动</h2>
<a href="#" target="_blank"><img src="images/闪瞎狗眼的广告.gif" height="150" width="240" alt="提前3天续费送时间"></a>
</div>
<div class="ipt-box">
<input id="login_user" type="text" value="请输入登录帐号" runat="server" name="login_user" />
</div>
<div class="ipt-box">
<input id="login_pwd" type="text" value="请输入密码" runat="server"/>
<input id="login_pwd1" type="password" style=" display:none;" runat="server" name="login_pwd1" />
</div>
<div class="auto-login">
<p id="Error" class="label"></p>
<a class="find-password" href="Password.aspx">找回密码</a>
</div>
<input id="login-btn" type="submit" value="登录">
<p class="to-reg">还没有贼速账号?<a id="to-reg" href="javascript:;" >立即免费注册</a></p>
</form>
3、格式控制和报错信息
$(document).ready(function(){
$("#form2").validate({
rules: {
login_user: {
required:true,
email: true
},
login_pwd1: {
required:true
}
},//rules
messages:{
login_user: {
required:'用户名错误',
email: '用户名错误'
},
login_pwd1: {
required:'密码错误'
}
},
success: function(label) {
//label指向上面那个错误提示信息标签em
label.text("").addClass("success"); //清空错误提示消息
//加上自定义的success类
}
});
});