表单验证

第一步：加载验证插件css和js：官网：http://validform.rjboy.cn/

<link href="<?=base_url('static/css')?>/valid.css">

valid.css的详细代码如下：

.Validform_checktip{
	margin-left:8px;
	line-height:20px;
	height:20px;
	overflow:hidden;
	color:#999;
	font-size:12px;
}
.Validform_right{
	color:#71b83d;
	padding-left:20px;
	background:url(images/right.png) no-repeat left center;
}
.Validform_wrong{
	color:red;
	padding-left:20px;
	white-space:nowrap;
	background:url(images/error.png) no-repeat left center;
}
.Validform_loading{
	padding-left:20px;
	background:url(images/onLoad.gif) no-repeat left center;
}
.Validform_error{
	background-color:#ffe7e7;
}
#Validform_msg{color:#7d8289; font: 12px/1.5 tahoma, arial, 5b8b4f53, sans-serif; 280px; -webkit-box-shadow:2px 2px 3px #aaa; -moz-box-shadow:2px 2px 3px #aaa; background:#fff; position:absolute; top:0px; right:50px; z-index:99999; display:none;filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#999999'); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);}
#Validform_msg .iframe{position:absolute; left:0px; top:-1px; z-index:-1;}
#Validform_msg .Validform_title{line-height:25px; height:25px; text-align:left; font-weight:bold; padding:0 8px; color:#fff; position:relative; background-color:#999;
background: -moz-linear-gradient(top, #999, #666 100%); background: -webkit-gradient(linear, 0 0, 0 100%, from(#999), to(#666)); filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#666666');}
#Validform_msg a.Validform_close:link,#Validform_msg a.Validform_close:visited{line-height:22px; position:absolute; right:8px; top:0px; color:#fff; text-decoration:none;}
#Validform_msg a.Validform_close:hover{color:#ccc;}
#Validform_msg .Validform_info{padding:8px;border:1px solid #bbb; border-top:none; text-align:left;}


<script type="text/javascript" src="http://validform.rjboy.cn/Validform/v5.3.2/Validform_v5.3.2_min.js"></script>

第二步：初始化设置：

<script type="text/javascript">
$(function(){
    //$(".reg").Validform();  //就这一行代码！;
    //修改默认验证成功提示
    $.Tipmsg.r = '';
　　//reg_frm为表单id
    $("#reg_frm").Validform({
        tiptype:2,
        btnSubmit:"#register",
        btnReset:"#reset"

    });
})
</script>

第三步（例子）：

<form id="reg_frm" action="<?=site_url('login/reg')?>" method="post">
　　<fieldset>
   　　 <label class="block clearfix">
       　　<span class="block input-icon input-icon-right">
          　　<input id="reg_email" name="email" type="email" class="form-control inputxt" ajaxurl="<?=base_url('login/check_user')?>" datatype="*,e" errormsg="请输入正确的邮箱！" nullmsg="邮箱不能为空！" placeholder="邮箱" />
              <i class="icon-envelope"></i>
           </span>
           <span style="color:red;"></span>
        </label>

     　　<label class="block clearfix">
        　　<span class="block input-icon input-icon-right">
           　　 <input id="reg_nick" name="nick" type="text" class="form-control inputxt" datatype="*" errormsg="请输入昵称！" nullmsg="昵称不能为空！" placeholder="昵称" />
                <i class="icon-user"></i>
           </span>
           <span style="color:red;"></span>
        </label>

     　　<label class="block clearfix">
            <span class="block input-icon input-icon-right">
        　　　　<input id="reg_password" name="reg_password" type="password" class="form-control inputxt" datatype="*6-16" errormsg="密码必须为6-16位任意字符！" nullmsg="密码不能为空！"  placeholder="密码" />
                <i class="icon-lock"></i>
            </span>
            <span style="color:red;"></span>
         </label>

         <label class="block clearfix">
            <span class="block input-icon input-icon-right">
            　　 <input id="reg_repassword" name ="reg_repassword" type="password" class="form-control inputxt" datatype="*6-16" nullmsg="两次密码不一致！" recheck="reg_password" errormsg="两次密码不一致！" placeholder="再输一次" />
                 <i class="icon-retweet"></i>
             </span>
           　 <span style="color:red;"></span>
          </label>

          <label class="block">
          　　<input id="accept" name="ace" type="checkbox" checked="checked" value="1" class="ace" datatype="*" nullmsg="请接受用户协议！" errormsg="请接受用户协议！" />
          
                                                        
         </label>
                                                    
         <div class="space-24"></div>

         　　<div class="clearfix">
             　　<button id="reset" type="reset" class="width-30 pull-left btn btn-sm">
                    <i class="icon-refresh"></i>
                      重置
                 </button>

                 <button id="register" type="button" class="width-65 pull-right btn btn-sm btn-success">
                      注册
                      <i class="icon-arrow-right icon-on-right"></i>
                 </button>
              </div>
       </fieldset>
 </form>

ajax后台处理代码：

    /**
     *验证用户名是否存在
     *@see check_user()
     *@author zrp <zouruiping@infoclouds.net>
     *@version 2014年4月17日14:30:25
     */
    public function check_user(){
        $email = trim($this->input->post('param',true));
        $res = $this->user_model->check_user($email);
        if(!empty($res)){
            $data = array(
                'info'    => '该邮箱已被注册',
                'status'=> 'n'　　//状态
            );
        }else{
            $data = array(
                'info'    => '',
                'status'=> 'y'
            );
        }
        echo json_encode($data);
    }

额外功能：

（1）文件上传 - swfupload

（2）码强度检测 - passwordStrength

（3）日期控件 - datePicker

（4）表单美化 - jqtransform

相关推荐