jQuery Validation Engine来处理表单验证

个人觉得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. 但这个确实很难想象,省略标签节省的文件大小能有多少字节?但带来的问题可是风险居高哦

jQuery Validation Engine来处理表单验证,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。