validationEngine — jquery强大的表单验证插件(转)

阿紫 posted @ 2013年1月11日 17:20 in javascript , 1806 阅读

 

引入jquery和插件js、css

 

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

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

初始化插件

 

$(document).ready(function() {
     $("#formID").validationEngine();
})
 

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

 

<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

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

 

$("#formID").validationEngine({ 
      inlineValidation: false,
      success :  false,
      failure : function() { callFailFunction()  } 
})
 

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

 

 

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

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

修改提示层的位置

 

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

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

ajax验证模式

 

 

$("#formID").validationEngine({ 
     ajaxSubmit: true,
     ajaxSubmitFile: "ajaxSubmit.php",
     ajaxSubmitMessage: "Thank you, we received your inscription!",
     ajaxSubmitExtraData: "securityCode=38709238423&name=john",
     success :  false,
     failure : function() {} 
})

这几个参数很好理解。

  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

 

 

  • 无匹配

登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter