说点啥吧

    嗯...搬家了,以后不来这了,告下别

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

 

<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

 

 

nginx+ci

    话说在/application/controllers下写了个hello.php,然后呢,在hello.php里写了个test方法欲输出hello world,可是呢,当我通过http://localhost/ci/index.php/hello/test访问时,却出现404。原因呢,nginx配置。好吧,废话就不多说了(其实也不会说),直接上正确的配置。

    

server
{
        listen       80;
        server_name  localhost;
        index index.php index.htm index.html;
        root  /www/php_example/;

        #limit_conn   crawler  20;   

        location / {
             index index.php index.html; 
       
             if (!-e $request_filename) {
                 rewrite ^/(.*)$ /index.php/$1 last;
             }   
        }

        location ~ .*\\.(php|php5)?$
        {       
              #fastcgi_pass  unix:/tmp/php-cgi.sock;
              fastcgi_pass  127.0.0.1:9000;
              fastcgi_index index.php;     
              include /etc/nginx/fastcgi_params;
              fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        }

        location ~ .*\\.(php|php5)?($|/) {
               set $script $uri;
               set $path_info "";

               if ($uri ~ "^(.+.php)(/.+)") {
                     set $script $1;
                     set $path_info $2;
               }

              fastcgi_pass 127.0.0.1:9000;
              fastcgi_index index.php;
              fastcgi_param SCRIPT_FILENAME $document_root$script;
              fastcgi_param SCRIPT_NAME $script;
              fastcgi_param PATH_INFO $path_info;

       }

 }

ci

 

ci:CodeIgniter
 
M:Model,数据模型。代表你的数据结构。通常来说你的模型类将包含取出、插入、更新你的数据库资料这些功能。
V:View,是展示给用户的信息。一个视图通常是一个网页。
C:Controller,是模型、视图以及其他任何处理HTTP请求说必须的资源之间的中介,并生成网页。
 
ci是一款轻量级单入口框架。即所有的控制器的访问都从index.php开始并且在index.php中结束。
 
一、安装:
     1、将CodeIgniter文件夹拷贝到网站根目录下
     2、配置目录。/application/config/config.php,修改为你的网站域名,如果本地测试localhost即可。
          $config['base_url']= 'http://localhost;
    3、配置数据库。/application/config/database.php
 
      为了安全起见,application与system可以放在别的地方,只需要在index.php中重新指定路径即可。  
         $system_path = '/CodeIgniter/system';
         $application_folder = '/CodeIgniter/application';
 
二、CodeIgniter目录结构:
    system:框架程序目录
          core:           核心程序:框架的基类、初始化
          database:   数据库操作相关的程序
          fonts:          字库
          helpers:      辅助函数
          language:   语言包
          libraries:     通用类库,比如验证、缓存、图像处理
    application:项目目录
          cache:       存放数据或模板缓存文件
          config:       与项目相关的配置
          controllers:MVC的控制器,继承CI_Controller
          core:         项目的核心程序
          errors:      错误提示模板
          helpers:    项目的辅助函数
          hooks:      在不修改系统核心文件的基础上扩展系统功能
          language:语言包
          libraries:  通用类库
          logs:        日志
          models:    MVC模型,一般继承CI_Model
          thride_party:第三方库
          views:      MVC视图,主要是模板
 
三、业务流程
        
  1. index.php 作为前端控制器,初始化运行 CodeIgniter 所需要的基本资源。
  2. Router 检查 HTTP 请求,以确定谁来处理请求。
  3. 如果缓存(Cache)文件存在,它将绕过通常的系统执行顺序,被直接发送给浏览器。
  4. 安全(Security)。应用程序控制器(Application Controller)装载之前,HTTP 请求和任何用户提交的数据将被过滤。
  5. 控制器(Controller)装载模型、核心库、辅助函数,以及任何处理特定请求所需的其它资源。
  6. 最终视图(View)渲染发送到 Web 浏览器中的内容。如果开启缓存(Caching),视图首先被缓存,所以将可用于以后的请求。
 
   url  组成:       入口---->控制器---->方法------>参数
            
  例:   localhost/index.php/welcome/index
 
        localhost:域名
        index.php:  主入口文件
        welcome:    控制器名
        index:          welcome中的一个方法
 
        如果方法名空缺,默认访问当前控制器下的index方法;
 
四、控制器
     1、控制器:
           一个控制器就是一个类文件,用户通过URL访问的就是某个控制器类中的具体成员方法,并由这个方法中的代码去做某些操作
    2、创建控制器:
         a、创建文件夹/application/controllers;
         b、类名必须以大写字母开头
         c、集成核心的控制器类CI_Controller
    3、创建方法:
           a、就是创建一个成员方法function()
           b、默认访问的是index方法
    4、URL如何传递参数给方法
            方法段后的按次序传入方法中的形式参数
 
 

 

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下测试的时候又可以了。。。