当前位置: 代码迷 >> Web前端 >> validationEngine中文版 ― jquery强大的表单印证插件
  详细解决方案

validationEngine中文版 ― jquery强大的表单印证插件

热度:590   发布时间:2012-11-05 09:35:12.0
validationEngine中文版 ― jquery强大的表单验证插件

普通验证的例子:http://www.position-relative.net/creation/formValidator/

ajax验证的例子:http://www.position-relative.net/creation/formValidator/demoSubmit.html

感谢热心的小杰童鞋,这个中文版是由小杰童鞋童鞋翻译的,同时根据中国国情修改了部分验证规则。

这个插件支持大部分的浏览器,但由于有使用到了css3的阴影和圆角样式,所以在IE浏览器下无法看到圆角和阴影效果(万恶的IE)。

简单说明下使用教程:

引入jquery和插件js、css

  1. <link?rel="stylesheet"?href="css/validationEngine.jquery.css"?type="text/css"media="screen"?charset="utf-8"?/>?
  2. <script?src="js/jquery.js"?type="text/javascript"></script>?
  3. <script?src="js/jquery.validationEngine-en.js"?type="text/javascript"></script>?
  4. <script?src="js/jquery.validationEngine.js"?type="text/javascript"></script>

jquery.validationEngine-en.js是语言文件,所有的提示都在这个文件找的到,可以很方便的转成其他语言,同时你也可以在这个文件内定制属于自己的验证规则。

初始化插件

  1. $(document).ready(function()?{?
  2. $("#formID").validationEngine()?
  3. })

验证规则是写在表单元素的class属性内。比如下面:

  1. <input?value=""class="validate[required,custom[noSpecialCaracters],length[0,20],ajax[ajaxUser]]"type="text"?name="user"?id="user"?/>

验证规则非常多样,基本上包含了所有的数据类型的验证。
所有的验证规则写在validate[]内,有多种验证,用逗号隔开,这里简要说明下常用的验证规则。

  1. required:值不可以为空
  2. length[0,100] :文字允许长度
  3. confirm[fieldID] :匹配其他的表单元素的值,fieldID就是其他表单元素的id,这个主要用于再次确认密码
  4. telephone :数据格式要求符合电话格式
  5. email : 数据格式要求符合email 格式
  6. onlyNumber :只允许输入数字
  7. noSpecialCaracters :不允许出现特殊字符
  8. onlyLetter : 只能是字母
  9. date :必须符合日期格式YYYY-MM-DD

你还可以在点击提交按钮后才触发验证。

  1. $("#formID").validationEngine({?
  2. inlineValidation:?false,
  3. success?:??false,
  4. failure?:?function()?{?callFailFunction()??}?
  5. })

默认的是在鼠标失去焦点后才开始验证,也就是绑定的是blur事件,那如何改变呢?看下面的配置。

  1. $("#formID").validationEngine({?
  2. validationEventTriggers:"keyup blur",??//will validate on keyup and blur??
  3. success?:??false,
  4. failure?:?function()?{?callFailFunction()??}?
  5. })

validationEventTriggers属性就是修改绑定事件,上面是增加了个keyup,也就是键盘按键起来就触发验证。

修改提示层的位置

  1. $("#formID").validationEngine({?
  2. promptPosition:?"topRight",?// OPENNING BOX POSITION, IMPLEMENTED: topLeft, topRight, bottomLeft,? centerRight, bottomRight
  3. success?:??false,
  4. failure?:?function()?{?
  5. })

promptPosition就是控制位置,有5种模式:topLeft, topRight, bottomLeft, centerRight, bottomRight

ajax验证模式

  1. $("#formID").validationEngine({?
  2. ?ajaxSubmit:?true,
  3. ??ajaxSubmitFile:?"ajaxSubmit.php",
  4. ??ajaxSubmitMessage:?"Thank you, we received your inscription!",
  5. ?ajaxSubmitExtraData:?"securityCode=38709238423&name=john",
  6. ?success?:??false,
  7. ?failure?:?function()?{}?
  8. })

这几个参数很好理解。

  1. ajaxSubmit: true, 提交表单使用ajax提交
  2. ajaxSubmitFile: “ajaxSubmit.php”, 后台脚本
  3. ajaxSubmitMessage 成功后显示的信息
  4. ajaxSubmitExtraData 参数

这里需要对后台脚本返回的数据进行下说明:
返回的数据格式是json。
出现一个错误,产生一个数组,如下:

  1. $arrayError[0][0]?=?"#email";? ? ? ? ? ??// FIELDID
  2. $arrayError[0][1]?=?"Your email do not match.. whatever it need to match";? ???// TEXT ERROR? ?
  3. $arrayError[0][2]?=?"error";? ? ? ? ? ??// BOX COLOR

  相关解决方案