JS-Jquery validate表单验证

项目需求是修改登录验证提示，之前的变动验证是用的 formvalidator ，打开页面有onshow，onfocus，oncorrect，inputValidator，ajaxvalidator等等参数， 每次输入，都会有提示，输入正确了提示也不消失，需求是要改成 只有错误的时候才有提示，校验功能不变。

没动手之前，觉得还是挺简单的，只要把相应的提示信息去掉就好了，但是动手测试的时候，如果把提示信息都去掉，插件的校验就失效了，既然提示信息不能去掉，那就隐藏提示信息吧，结果又悲剧了，该插件通过更改class 来控制是否隐藏，自己通过jquery移除class，没有作用，应该我写的要在插件更改class之前，所以最终没有效果。

因为，这个不是个大功能，理应一会会就该改好的，心想着自己写也需要半天，毕竟我这么菜，但是迫于时间紧张，修改插件，还不如去找插件了。

然后就有了这边文章，个人用起来感觉还是不错的。

首先还是引入必要的js

<script type="text/javascript" src="/statics/js/jquery-1.11.3.min.js"></script>
<script src="{JS_PATH}dist/jquery.validate.min.js" charset="utf-8"></script>

validate有自定义校验函数的功能，介个比较好

自定义手机号校验函数

$(function(){

jQuery.validator.addMethod('isMobile', function(value, element) { //isMobile 是方法名，后面是方法体
var length = value.length;
var mobile = /^1[34578]\d{9}$/;
return this.optional(element) || (length == 11 && mobile.test(value));  //当验证的对象值为空的时候， this.optional(element) ==true 也就是为空的时候不进行验证，如果为空的时候也需要验证，去掉 this.optional(element)即可。
}, '请填写正确的手机号码');

});

表单验证：

function check_mobile(){
var mb = $('#mobile').val();

$("#mobile_form").validate({
rules: {
mobile:{
required: true,
maxlength:11,
minlength:11,
isMobile:mb   //这里调用自定函数
},

},
messages: {
mobile:{
required:'请输入手机号',
maxlength:'请输入11位手机号',
minlength:'请输入11位手机号'
},
}
});
}

表单就简单的放一下

<form id="mobile_form" name="mobile_form" action="" method="post" class="mobile-frame" >
<input id="mobile" name="mobile" onkeydown="check_mobile()" type="text" class="default" placeholder="请输入手机号" />
</form>

下面的链接有很多自定义的验证函数

http://huqiji.iteye.com/blog/2166986

http://www.cnblogs.com/linjiqin/p/3433635.html