javascript - 阿紫's blog

阿紫

分类

存档

validationEngine — jquery强大的表单验证插件（转）

引入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属性内。比如下面：

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

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

required：值不可以为空
length[0,100] ：文字允许长度
confirm[fieldID] ：匹配其他的表单元素的值，fieldID就是其他表单元素的id，这个主要用于再次确认密码
telephone ：数据格式要求符合电话格式
email ：数据格式要求符合email 格式
onlyNumber ：只允许输入数字
noSpecialCaracters ：不允许出现特殊字符
onlyLetter ：只能是字母
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() {} 
})

这几个参数很好理解。

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

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

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

js复制到剪切板，兼容chrome，Firefox

在做短网址的过程中遇到一个问题，需要做一个按钮，点击的时候将生成的短网址复制到剪切板，开始的代码是这样写的：

var str=document.getElementById('url').value; 
if(window.clipboardData){ 
         window.clipboardData.clearData();                                                       
         window.clipboardData.setData("Text",str);                                 
         alert("复制成功！");
 }

但是这种方法只在IE下有效，试了网上说的一些方法，但是效果都不大好，甚至需要用户去设置浏览器，最后看到一个说是需要一个ZeroClipboard.js,依靠flash来中转，测试成功。这是ZeroClipboard.js的下载地址：https://code.google.com/p/zeroclipboard/ 测试代码如下：

<script type="text/javascript" src="ZeroClipboard.js"></script>
<script language="JavaScript">        
    function toClipboard(ID) {
                var str=document.getElementById('url').value;
        var clip = new ZeroClipboard.Client();
        clip.setHandCursor( true );
        clip.setText(str);      
        clip.addEventListener('complete', function (client, text) {
                alert("复制成功!!");
                      });
        clip.glue(strID);
    }
</script>
 
<input type="button" value="copy" onclick="javascript:toClipboard(this.id);"/>

但是在火狐下还是不兼容......

-------------------------------------------------------------------------------------------------------------------------------------------

好吧，今天在Firefox下测试的时候又可以了。。。