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

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

 

引入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

 

 

  • 无匹配
seo service london 说:
2024年1月16日 14:36

Interesting topic for a blog. I have been searching the Internet for fun and came upon your website. Fabulous post. Thanks a ton for sharing your knowledge! It is great to see that some people still put in an effort into managing their websites. I'll be sure to check back again real soon.

seo service london 说:
2024年1月16日 14:42

Interesting topic for a blog. I have been searching the Internet for fun and came upon your website. Fabulous post. Thanks a ton for sharing your knowledge! It is great to see that some people still put in an effort into managing their websites. I'll be sure to check back again real soon.

seo service UK 说:
2024年2月22日 20:43

Thanks for making the sincere attempt to explain this. I think very robust about it and want to learn more. If it’s OK, as you attain more extensive knowledge


登录 *


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