进来用validate来做表单的验证,但是如果使用默认方式出来的效果确实不够赞……

于是想着能修改点什么,折腾了一下open tip 使用提示的方式来展示,效果确实有点不错了:)

opentip

首先使用validate除了表单的问题:你需要引入jquery 和 jquery.validate 的JS文件

然后就是提示的问题,因为想用提示框来展示,所以看了看open tip不错,于是集成进去,需要引入

opentip-jquery.min.js 和opentip.css 两个文件,因为验证依赖了jquery,所以导入的是open tip的jquery js文件

处理代码:

<script>
$(function() {
$("#login").validate({
onkeyup: false,
errorClass: 'error',
validClass: 'valid',
highlight: function(element) {
$(element).closest('div').addClass("f_error");
},
unhighlight: function(element) {
$(element).closest('div').removeClass("f_error");
},
rules : {
'm_name' : {
required : true,
},
'm_password' : {
required : true,
},
},
messages : {
m_name : "用户名不能为空",
m_password : "密码不能为空",
},
errorPlacement: function(error, element) {
var msgbox = $(element);
new Opentip(msgbox, $(error).text(), { style: "alert", target: true, tipJoint: "left", targetJoint: "right", containInViewport: false });
}
});
});
</script>