js校验包括很多种,今天我主要说一下普通的登录页面中包含的用户名、密码和验证码的校验
以自己制作的这种网络留言簿登录页面为例:
主要包含用户名、密码、验证码三部分
验证效果图:
代码如下:
$().ready(function() {
// 在键盘按下并释放及提交后验证提交表单
//产生随机性验证码
$('#imgCode').get(0).src = $("#pageContext").val() + "/verify/code.action";
//先判断是否正确
validForm(); //调用validForm方法 点击登陆按钮前就进行校验
$('#imgCode').click(function(){//单击时更换校验码
this.src = $("#pageContext").val() + "/verify/code.action?" + new Date().getTime();
})
$("#register").click(function(){//从登陆页面跳转到注册页面
window.location.href=$("#pageContext").val() + "/user/toRegister.action";
})
});
function validForm(){
return $("#userLoginForm").validate({
rules: {
username : "required",
password: {
required: true,
rangelength:[6,20]
},
verifyCode:{
url:$("pageContext").val() + "/verify/checkVerifyCode.action?",
type:"POST",
data:{
verifyCode:function(){
return $("#verifyCode").val();
}
}
},
checkCode: "required"
},
messages: {
username: "请输入用户名",
password: {
required: "请输入密码",
minlength: "密码长度为6-20位之间"
},
verifyCode:"验证码输入错误",
checkCode: "请输入验证码",
}
})
}