第一步:加载验证插件js:官网:http://validform.rjboy.cn/
<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); }
原文:http://www.cnblogs.com/zrp2013/p/3726066.html