优雅的使用 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">


标签
Validation Engine
表单验证
参考资料
1jQuery Validation Engine Github
2jQuery Validation Engine 中文文档
  1. 游客
    楼主加油,你的博文都写的不错
    2013-11-13 10:27:43
  2. 游客
    不错,加油!
    2013-11-29 21:57:23
  3. 游客
    全站ajax虽然操作比较爽,但是不利于网站seo,建议采用pjax!另外,颜色选择器插件使用:http://www.atool.org/colorpicker.php
    2013-12-15 21:11:40
  4. 游客
    jQuery Validation Engine 有一个BUG 在使用ajax验证或自定义验证方法的时候等等把 $("#from").validationEngine("validate");就会出错,永远都是false

    <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]]">
    2014-01-10 17:33:19
  5. 小叉
    validate 接口会进行一次验证过程,再返回验证结果,而 ajax 是异步的行为,所以没有等待完成。

    默认表单提交验证 ajax 是没有问题的,如果你要通过别的元素事件触发验证,建议单独写验证。
    或者是给 form 绑定 jqv.field.result 的自定义事件,可以参考例子:
    http://code.ciaoca.com/jquery/validation_engine/demo/demoAjaxSubmitPHP.html
    2014-01-11 09:40:26
  6. 游客
    我试过 在验证单独一个字段的时候 这个好像也不行。。。
    2014-01-11 10:20:23
  7. 小叉
    评论字数有限,不适合贴代码,最好能有线上DEMO,这样说不清呀
    2014-01-11 15:05:04
  8. 游客
    在ie8下 Validation 会出现不验证直接提交的问题,楼主遇到过吗?
    2014-11-04 17:36:56
  9. 小叉
    IE8 不支持 Array.isArray,做个兼容就好
    2014-11-05 17:21:37

这里是小叉试验场的简版,请到正式版参与评论

下一篇:教你怎么把图标字体(IconFont)转为 PNG

上一篇:《编写可维护的 JavaScript》笔记三

返回列表