Fork me on GitHub

表单验证(ajax+jQuery Validate+PHPgd2)

一般在我们浏览器端负责输入数据格式的验证,在服务器端利用ajax技术查询验证输入数据是否重复 一、浏览器端的验证我们可以用jQuery Validate这个插件 1.首先引入插件: [js] //jquery插件 //jQuery validate插件 //中文提示信息插件 [/js] 2.具体使用看如下例子: html部分 [html]

; ;
[/html] js部分 [js] $(function(){ //指定要验证的表单 $(‘#myform’).validate({ //这里是验证通过要书写回调函数 submitHandler:function(form){ //提交表单方式之一 form.submit(); } //这里定义规则 rules:{ username:{ requried:true, minlength:2 } } //这里写提示信息,如果不写,就会使用默认 messages:{ username:{ required:"请输入用户名!", minlength:"长度不少于2位!" } } }) }) [/js] 3.更多的其他的指令规则: 规则 描述 1 required:true 必须输入的字段。 2 remote:”check.php” 使用 ajax 方法调用 check.php 验证输入值。 3 email:true 必须输入正确格式的电子邮件。 4 url:true 必须输入正确格式的网址。 5 date:true 必须输入正确格式的日期。日期校验 ie6 出错,慎用。

6 dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22。只验证格式,不验证有效性。 7 number:true 必须输入合法的数字(负数,小数)。 8 digits:true 必须输入整数。 9 creditcard: 必须输入合法的信用卡号。 10 equalTo:”#field” 输入值必须和 #field 相同。 11 accept: 输入拥有合法后缀名的字符串(上传文件的后缀)。 12 maxlength:5 输入长度最多是 5 的字符串(汉字算一个字符)。 13 minlength:10 输入长度最小是 10 的字符串(汉字算一个字符)。 14 rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)。 15 range:[5,10] 输入值必须介于 5 和 10 之间。 16 max:5 输入值不能大于 5。 17 min:10 输入值不能小于 10。 4.小提示:可以使用label.error自定义错误信息提示样式; 5.用户名我们一般都要验证是否重复 我们可以在PHP中准备一个数据,模拟已注册的用户 php中代码如下: [php] <?php header(‘content-type:text/html;charset= utf-8’); //准备一个数组,来保存多个用户名 $userNameArr=array("陈晓拉尼","陈晓","蝙蝠侠","超人"); //获取提交过来的用户名 $userName=$_POST[‘name’]; //判断是否存在于数组中,用in_arry(), //参数一查询的内容,参数二数组,返回的是TRUE或者是FALSE $isin=in_array($userName,$userNameArr); if($isin){ echo’1’; } ?> [/php] 效果图如下: 二、关于验证码 要用到PHPgd库里面提供的一些api,使用前注意开启PHPgd2 具体示例: [php] // 创建画布 $img=imagecreate(100, 35); // 给画布分配背景颜色,mt_rand()就是返回随机整数 $bgcolor=imagecolorallocate($img, mt_rand(0,255), mt_rand(0,255), mt_rand(0,255)); // 添加干扰线,用for循环,随机画三条 for ($i=0; $i < 3; $i++) { // 为干扰线添加随机颜色 $linecolor=imagecolorallocate($img,mt_rand(0,255), mt_rand(0,255),mt_rand(0,255)); // 开始画干扰线 imageline($img,mt_rand(0,100),mt_rand(0,35),mt_rand(0,100),mt_rand(0,35),$linecolor); } // 添加干扰点,for循环,随机添加25个点 for ($i=0; $i <25 ; $i++) { //为点添加随机颜色 $diancolor=imagecolorallocate($img,mt_rand(0,255), mt_rand(0,255),mt_rand(0,255)); // 开始画点 imagesetpixel($img,mt_rand(0,100),mt_rand(0,35),$diancolor); } // 准备一个字符串 $rand_str=’qwertyuiopasdfghjklzxcvbnm1234567890’; // 准备一个空数组 $str_arr=array(); // 循环四次返回4个随机字母或数字 for ($i=0; $i <4 ; $i++) { // 随机取从0到字符串长度的下标 $pos=mt_rand(0,strlen($rand_str)-1); // 一一放到数组里 $str_arr[]=$rand_str[$pos]; } // 开启sesson,把这四个数据放进session里 session_start(); $_SESSION[‘info’]=$str_arr; // 准备绘制,可以用imagestring(不支持中文)或者imagettftext(支持中文但需要下载字体) //用imagesttftext绘制 $x_start=100/5; // foreach用于遍历输出数组,不知道循环次数 foreach ($str_arr as $key) { $fontcolor = imagecolorallocate($img, mt_rand(0,255), mt_rand(0,255), mt_rand(0,255)); imagettftext($img, 20, mt_rand(-15,15), $x_start, 50/2, $fontcolor, “C:/Windows/Fonts/Verdana.TTF”, $key); $x_start +=20;//遍历后单个字符沿X轴 +20 } // 填充 imagefill($img,0,0,$imgcolor); ob_clean(); // 输出图像格式 header(‘content-type:image/jpeg’); // 输出图像 imagejpeg($img); // 摧毁图像 imagedestroy($img); [/php] 我们在HTML中创建一个img,src属性指向这个PHP页面即可显示出来,如:src=data.php 点击图片刷新属性: [js] $(‘img’).on(‘click’,function(){ // 点击时刷新 $(this).attr(‘src’,’data.php’); }) [/js] 验证验证码是否正确,利用ajax传送到后端,后端如下判断: [php] <?php header(‘content-type:text/html;charset= utf-8’); // 接受验证码 $yzm=$_POST[‘num’]; session_start(); // 把数组里的数据都取出来 $data=implode(‘’,$_SESSION[‘info’]); if($yzm==$data){ echo’1’; } ?> [/php] 注意:我也不知道为什么,一开始老是验证不了,最后是需要再单独建一个PHP,再在里面写上验证代码就好了。

-------------本文结束感谢您的阅读-------------

本文标题:表单验证(ajax+jQuery Validate+PHPgd2)

文章作者:陈晓拉尼

发布时间:2017年08月25日 - 14:08

最后更新:2018年09月13日 - 23:09

原始链接:http://yoursite.com/archives/42096.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。