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文件，否则不会提交该表单。这个在其他博客中没有写到，是自己发现的。