jQuery 表单验证插件,jQuery Validation Engine用法详解
功能强大的 jQuery 表单验证插件,适用于日常的 E-mail、电话号码、网址等验证及 Ajax 验证,除自身拥有丰富的验证规则外,还可以添加自定义的验证规则。
jQuery Validation Engine v2.6.2:兼容 IE 6+, Chrome, Firefox, Safari, Opera 10+,要求jQuery版本1.7以上。下载地址:/jquery/validation-engine/version/jQuery-Validation-Engine-2.6.2.zip。另有Ciaoca 中文增强版:下载地址,/jquery/validation-engine/version/jQuery-Validation-Engine-2.6.2-ciaoca.zip。
一、使用方法
载入 CSS 文件
<linkrel="stylesheet"href="css/validationEngine.jquery.css">
载入 JavaScript 文件
<scriptsrc="js/jquery.js"></script><scriptsrc="js/jquery.validationEngine-zh_CN.js"></script><scriptsrc="js/jquery.validationEngine.js"></script><!--jquery.validationEngine-zh_CN.js为配置文件,可根据需求自行调整或增加,也可以更换为其他语言配置文件-->
给表单加上 ID
<!--ID须设置在form标签中--><formid="form_id"...>...</form>
给控件添加验证类型
<!--验证规则默认使用class属性validate[required]表示该项必须填写--><inputtype="text"class="validate[required]"><inputtype="checkbox"class="validate[required]"><selectclass="validate[required]"></select> <!--默认的选项的value须为空--如下-->
<selectclass="validate[required]"><option value="">请选择</option></select>
<textareaclass="validate[required]"></textarea>
设置验证
//直接调用$('#form_id').validationEngine();//自定义参数调用$('#form_id').validationEngine('attach',{promptPosition:'centerRight',scroll:false});
支持链式操作
$('#form_id').validationEngine().css({border:'2pxsolid#000'});
二、验证类型
注:验证规则均写在 validate[] 中,如有多条规则,用英文逗号(,)分割。
例:validate[required,minSize[6],custom[onlyLetterNumber]]
Ciaoca 增强版增加验证规则:
三、参数说明
四、HTML5 属性
错误信息属性(实验的)
属性值与验证规则相对应
<!--自定义错误信息属性(实验支持)--><inputtype="email"name="email"id="email"data-validation-engine="validate[required,custom[email]]"data-errormessage-value-missing="E-mail不能为空"data-errormessage-custom-error="E-mail格式应为:someone@"data-errormessage="通用的错误提示信息">
五、API 接口
六、自定义事件
插件增加的自定义事件,可参考 [Demo]
七、相关信息
作者网站:http://www.position-/articles/jquery-form-validator-because-form-validation-is-a-mess/相关文档:Github中文文档授权协议:MITposted on -04-06 08:48代码养家 阅读(...) 评论(...) 编辑 收藏