优雅的使用 jQuery Validation Engine 表单验证插件
代码日记 | 小叉 | 2013年10月16日
一直都是使用 jQuery Validation Engine 来处理表单验证，其功能及自定义很友好，这次再去看时，发现竟然升级了！
新版本 2.6.1 中，新增了很多对用户体验很好的东西，下面开摆。
maxErrorsPerField
在老版本中，如果我们设置验证规则为：validate[required,minSize[6],maxSize[20]]，如果什么都没有填，就会出现 3 个提示有木有！如果多个输入框之间的间隔不是很多，会遮住下面的输入框或者提示信息有木有！
这个参数是我觉得这次更新最有用的参数，设置为 1 时，就不会出现 3 个提示，而只会出现 1 个提示。
$("#formId")..validationEngine({
maxErrorsPerField: 1 // 参数值为数值
});showOneMessage
该参数的功能是，在提交验证时，只会显示第一个输入框的错误，后面的都不会显示，和 maxErrorsPerField 结合使用，超级赞！
$("#formId").validationEngine({
showOneMessage: true
});focusFirstField
使用该参数，在提交验证时，如果没有通过验证规则，那么会让第一个输入框自动获取焦点，用户体验很好，这个参数默认是开启的，所以不需要再次设置。
$("#formId").validationEngine({
focusFirstField: true
});autoHidePrompt
autoHideDelay
自动隐藏提示信息，以及设置延时多久自动隐藏。
$("#formId").validationEngine({
autoHidePrompt: true
autoHideDelay: 5000 // 单位毫秒（ms）
});autoPositionUpdate
自动调整提示信息。使用后，当窗口大小变化时，会自动调整提示信息的位置，对于不是固定布局的页面很有用。
$("#formId").validationEngine({
autoPositionUpdate: true
});addPromptClass
给提示信息的元素增加样式。在没有这个参数之前，都是直接修改 Validation Engine 自身的样式，或者在表单上手动增加一个样式，再通过后辈选择器来覆盖，有了这个参数，将能更灵活的控制样式。
$("#formId").validationEngine({
addPromptClass: ""
});custom_error_messages
自定义错误信息的内容。当同一个验证方式，在不同的页面要求显示不同的提示信息时，这个参数就能大显身手，例如：注册的同意协议勾选框，要求必选，默认只会提示为必填，而我们需要更准确的提示“请先阅读并同意服务协议”。具体可以参考这个例子。
$("#formId").validationEngine({
custom_error_messages: {
"#id":{ // 元素的选择器
"ruleName":{ // 该元素的验证规则名称，如：required、minSize、custom[url]
"message":"" // 自定义提示的内容
}
}
}
});addSuccessCssClassToField
addFailureCssClassToField
当验证通过或不通过时，给元素增加的样式。通过增加样式来让元素更醒目的提示，也是不错的体验。
$("#formId").validationEngine({
addSuccessCssClassToField: "success"
addFailureCssClassToField: "failure"
});data-prompt-positio
这个参数，可以给提示信息的位置进行细调，当元素周围有内容，不希望被提示信息遮挡时，可以通过该参数来调整，例如：验证码的图片通常都是在输入框的右边，那么可以将提示信息调到验证码图片的右边。
这个参数不是调用时使用的，是直接写在元素上，
<input class="validate[required]" type="text" data-prompt-position="centerRight:100,0">- 楼主加油，你的博文都写的不错2013-11-13 10:28:08
游客
不错，加油！2013-11-29 21:57:48-
游客
全站ajax虽然操作比较爽，但是不利于网站seo，建议采用pjax！另外，颜色选择器插件使用：http://www.atool.org/colorpicker.php2013-12-15 21:12:05 -
游客
jQuery Validation Engine 有一个BUG 在使用ajax验证或自定义验证方法的时候等等把 $("#from").validationEngine("validate");就会出错，永远都是false2014-01-10 17:33:44
<script type="text/javascript">
$.validationEngineLanguage.allRules.mobile={
"regex":/^(?:13\d|14\d|15\d|18[0123456789])-?\d{5}(\d{3}|\*{3})$/,
"alertText":"* 无效的手机号码"
};
//ajax 验证返回信息
$.validationEngineLanguage.allRules.ajaxMobile={
"url": "/Ajax/getMobile",
"alertTextOk": "* 手机号可以使用",
"alertText": "* 手机号已存在",
"alertTextLoad": "* 系统正在确认手机，请稍等。"
};
$().ready(function() {
$("#form").validationEngine();
$("#aaaaa").click(function(){
if( $("#from").validationEngine("validate")){
alert(1111);//BUG 永远都是这个不管验证过不还是过不去
} else {
alert(2222);
}
});
});
</script>
<input type="text" name="mobile" id="mobile" class="qy_sjh_srk validate[required,custom[mobile],ajax[ajaxMobile]]"> 
小叉
validate 接口会进行一次验证过程，再返回验证结果，而 ajax 是异步的行为，所以没有等待完成。2014-01-11 09:40:51
默认表单提交验证 ajax 是没有问题的，如果你要通过别的元素事件触发验证，建议单独写验证。
或者是给 form 绑定 jqv.field.result 的自定义事件，可以参考例子：
http://code.ciaoca.com/jquery/validation_engine/demo/demoAjaxSubmitPHP.html-
游客
我试过 在验证单独一个字段的时候 这个好像也不行。。。2014-01-11 10:20:48 -
小叉
评论字数有限，不适合贴代码，最好能有线上DEMO，这样说不清呀2014-01-11 15:05:29 -
游客
在ie8下 Validation 会出现不验证直接提交的问题，楼主遇到过吗？2014-11-04 17:37:21 -
小叉
IE8 不支持 Array.isArray，做个兼容就好2014-11-05 17:22:02
这里是小叉试验场的简版，请到正式版参与评论
游客