validationEngine中文版-jquery强大的表单验证插件

感谢热心的小杰童鞋,这个中文版是由小杰童鞋童鞋翻译的,同时根据中国国情修改了部分验证规则。这个插件支持大部分的浏览器,但由于有使用到了css3的阴影和圆角样式,所以在IE浏览器下无法看到圆角和阴影效果(万恶的IE)。
普通验证的例子:http://www.position-relative.net/creation/formValidator/
ajax 验证的例子:http://www.position-relative.net/creation/formValidator/demoSubmit.html
中文版下载:http://www.36ria.com/wp-content/uploads/2010/03/validationEngine.zip


简单说明下使用教程:
引入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


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值