jquery.validate.js表单验证
引用jquery封装好的js文件进行表单验证,提高了Web开发的效率。我写了一个验证的实例给大家展示一下。
实例中包含的验证方法还不全面,如果没有大家想要的可以通过
百度搜索关键:jquery.validate.js表单验证帮助文档来进行查阅。
引入的js文件:
<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/usercenter.js"></script>
登录界面的form表单:
<form class="form-horizontal" method="post" id="LoginForm">
<div id="iyoutingche-formgroup">
<label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="user_email" value="${cookie.email.value }" id="email" placeholder="Email">
</div>
</div>
<div id="iyoutingche-formgroup">
<label for="inputPassword3" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" value="${cookie.password.value }" name="user_password" id="password" placeholder="Password">
</div>
</div>
<div id="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox" name="isAuto" value="1" checked="checked"> 记住密码
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<span id="info"></span>
<button type="submit" class="btn btn-default btn-lg" id="Loginbtn">登录</button>
<a href="">没有注册?</a>
</div>
</div>
</form>
usercenter.js文件:
$("#LoginForm").validate({
rules:{
user_email: {
required: true,
email:true
},
user_password:{
required:true,
minlength: 5,
},
},
messages:{
user_email:{
required:"请输入邮箱",
email: "请输入正确的email地址"
},
user_password:{
required:"请输入密码",
minlength: jQuery.validator.format("输入不小于5位数的字符"),
},
},
submitHandler:function(form){
$(form).ajaxSubmit({
url:‘UserCheckLoginSer‘,
type:‘POST‘,
success:function(data){
if(data=="true"){
var email = $("#email").val();
//设置cookie
// $.cookie(‘cookieName‘,email,{expires: 7,path:‘/‘,secure: false,raw:false});
$.cookie(‘cookieName‘,email,{expires: 7});
// cookieSave = $.cookie(‘cookieName‘,email);
location.reload();
}else{
$("#info").append("<b>错误的用户名或密码</b><br/>");
}
}
});
}
});
注意 当使用ajaxSubmit将form表单提交到后台是,一定要引入jquery.form.js文件,否则不会提交该表单。这个在其他博客中没有写到,是自己发现的。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。