jQuery Validation Engine来处理表单验证

浏览数：23 / 时间：2015年06月09日

个人觉得jQuery Validation Engine来处理表单验证，是jquery中很友好的一个插件，它的功能和自定义都很友好。在前几天发现它升级了，在新的升级版本中增加了好多对用户体验很好的东西，为此在小熊个人博客给大家分享一下。

jquery12

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">
编码格式：使用UTF-8

请确保您的编辑器使用的字符编码??为UTF-8，没有字节顺序标记。在html模板或文档中通过来

定义编码格式。关于编码格式参考 Character Sets & Encodings in XHTML, HTML and CSS

6.注释

根据需要解释代码，这个就不多说了，团队开发这个非常重要，尽管很多时候大家不愿意遵守，但确实重要!!!

7.TODO待定项

尚未实现的或待定的内容一定要标识强调出来，利用TODO辨识，而非其他诸如@@来强调。

在todo项中如果有必要列明联系人，比如负责人

在TODO后追加一个冒号作为行动内容，例如 TODO：为美瑞网增加html5http://www.sc.hrss.gov.cn/模板

8.文档类型：使用HTML5

使用.HTML(text/html)类型文件相对XHTML(alication/xhtml+xml)文件，在浏览器及框架支持上和优化空间上都要好很多。

9.HTML 合法性验证

合法的使用HTML，并利用w3c的工具(W3C HTML validator)进行检查。唯一例外就是因为性能原因需要压缩文件大小。

原文如下：Use valid HTML code unless that is not possible due to otherwise unattainable performance goals regarding file size. 但这个确实很难想象，省略标签节省的文件大小能有多少字节？但带来的问题可是风险居高哦