调试 Validform 的辛酸，添加ajax验证机制！（ajax校验）

25-03-01 10

本文的目的是介绍调试Validform的辛酸，添加ajax验证机制！的详细情况，特别关注ajax校验的相关信息。我们将通过专业的研究、有关数据的分析等多种方式，为您呈现一个全面的了解调试Validfo

本文的目的是介绍调试 Validform 的辛酸，添加ajax验证机制！的详细情况，特别关注ajax校验的相关信息。我们将通过专业的研究、有关数据的分析等多种方式，为您呈现一个全面的了解调试 Validform 的辛酸，添加ajax验证机制！的机会，同时也不会遗漏关于ajax form数据封装,ajax提交整个form表单,ajax 自动获取当前form数据、ajax图片验证码: PHP生成各种验证码和Ajax验证、Ajax实例（二）Validform表单验证插件的应用、ajax验证用户名和密码，ajax验证用户名的知识。

本文目录一览：

调试 Validform 的辛酸，添加ajax验证机制！（ajax校验）
ajax form数据封装,ajax提交整个form表单,ajax 自动获取当前form数据
ajax图片验证码: PHP生成各种验证码和Ajax验证
Ajax实例（二）Validform表单验证插件的应用
ajax验证用户名和密码，ajax验证用户名

调试 Validform 的辛酸，添加ajax验证机制！（ajax校验）

注：项目中用到了这个Validform 验证机制，配合ajax所出现的问题~

其实,自己也能写出来这个种验证,感觉这个现成的插件~既然何不研究下呢! 大牛忽喷噢~~~~~

情景：

判断用户名是否存在~

俩种思路

--- 在表单所有验证通过后，去ajax判断！好处是--节省服务器的消耗

二在文本框的值变化时，去ajax ，这个相对于 Vali 来说简单多了！可以在验证之初就能改变，表单的提交！

本文案例采用的是第一种！

遇到的几个问题~

1. 本想写到tiptype:function(msg,o,cssctl){} 中~但是没有办法来阻断提交！ .submit('false');之后再进行提交就需要 .unbind();

出现的问题是,第一次验证成功,之后再进行修改!

2.最终的方法.最闹心的调试!血的教训

查看手册发一个.callback:function(from){} 可以在验证成功之后~来判断是否提交哦!

我把ajax写到这个函数的里面~但总是ajax 还没有返回结果~就已经提交了! 感觉不科学,单说不出原因!

后来在细看手册,发现 reuan false,必须在最后! 说明~他不可以控制是否取消,只能控制在什么时候提交!

如图代码~

ajax form数据封装,ajax提交整个form表单,ajax 自动获取当前form数据

//form数据封装
	function formToString(formObj){
	    var allStr="";
		if(formObj){
		   var elementsObj=formObj.elements;
		   var obj;
		   if(elementsObj){
			for(var i=0; i<elementsObj.length;i+=1){
			 obj=elementsObj[i];
			 if(obj.name!=undefined&&obj.name!=""){
			  allStr+="&"+obj.name+"="+encodeURIComponent(obj.value);
			 }
			}
		   }else{
			alert("没有elements对象!");
			return ;
		   }
		}else{
		   alert("form不存在!");
		   return ;
		}
		return allStr;
	}

			$.ajax({
			   type: "POST",url: "/Mall/ajax_cart.html",data: formToString($("#orderform").get(0)),success: function(msg){
				   $("#allmoney").html("¥"+msg);
			   }
			});

以上方法有个bug就是radio及checkBox数据得到的结果不正确。

下面使用jquery自带方法serializeArray

			$.ajax({
			   type: "POST",data: $(form).serializeArray(),dataType: 'json',success: function(msg){
				   $("#allmoney").html("¥"+msg);
			   }
			});

终于找到最实用的方法。

ajax图片验证码: PHP生成各种验证码和Ajax验证

验证码在WEB应用中非常重要，通常用来防止用户恶意提交表单，如恶意注册和登录、论坛恶意灌水等。本文将通过实例讲解使用PHP生成各种常见的验证码包括数字验证码、数字+字母验证码、中文验证码、算术验证码等等以及其Ajax验证过程。
PHP生成验证码图片
PHP生成验证码的原理：使用PHP的GD库，生成一张带验证码的图片，并将验证码保存在Session中。PHP生成验证码的大致流程有：
1、产生一张png的图片；
2、为图片设置背景色；
3、设置字体颜色和样式；
4、产生4位数的随机的验证码；
5、把产生的每个字符调整旋转角度和位置画到png图片上；
6、加入噪点和干扰线防止注册机器分析原图片来恶意破解验证码；
7、输出图片；
8、释放图片所占内存。
应某位同学的要求，下面我们以php100.com的文章评论所用的验证码为例，讲解验证码的生成过程，直接上代码。

session_start();
getCode(4,60,20);

function getCode($num,$w,$h) {
    $code = "";
    for ($i = 0; $i         $code .= rand(0, 9);
    }
    //4位验证码也可以用rand(1000,9999)直接生成
    //将生成的验证码写入session，备验证时用
    $_SESSION["helloweba_num"] = $code;
    //创建图片，定义颜色值
    header("Content-type: image/PNG");
    $im = imagecreate($w, $h);
    $black = imagecolorallocate($im, 0, 0, 0);
    $gray = imagecolorallocate($im, 200, 200, 200);
    $bgcolor = imagecolorallocate($im, 255, 255, 255);
    //填充背景
    imagefill($im, 0, 0, $gray);

    //画边框
    imagerectangle($im, 0, 0, $w-1, $h-1, $black);

    //随机绘制两条虚线，起干扰作用
    $style = array ($black,$black,$black,$black,$black,
        $gray,$gray,$gray,$gray,$gray
    );
    imagesetstyle($im, $style);
    $y1 = rand(0, $h);
    $y2 = rand(0, $h);
    $y3 = rand(0, $h);
    $y4 = rand(0, $h);
    imageline($im, 0, $y1, $w, $y3, IMG_COLOR_STYLED);
    imageline($im, 0, $y2, $w, $y4, IMG_COLOR_STYLED); 本文链接http://www.cxybl.com/html/wlbc/Php/20130729/39382.html

Ajax实例（二）Validform表单验证插件的应用

一、nanjinonline项目,newborrow.html产品发布页。应用了Validform表单验证插件

Validform插件官网地址 http://validform.rjboy.cn/document.html

<script>
    $(function() {
        var demo = $("#borrow_application").Validform({
            tiptype: 4, //侧边提示,在当前元素的父级的next对象下查找显示提示信息的对象
            showAllError: true, //所有的出错都会提示
            //传入自定义datatype类型，可以是正则，也可以是函数。
            datatype: {
                "jknll": /^(8|9|10|11|12|13|14|15|16|17|18)(\.\d{0,2})?$/,
                //checkbox的datatype="need2" <input type="checkbox" datatype="need2"
                "need2": function(gets, obj, curform, regxp) {
                    var need = 1,
                            numselected = curform.find("input[name=''" + obj.attr("name") + "'']:checked").length;
                    return  numselected >= need ? true : "请勾选同意该协议！";
                },
                //借款手续费的datatype="chkfee";<input type="text"  datatype="chkfee"/>（介于0.0000-1.0000之间）
                //起投金额的datatype="chknum"(起投金额必须是100的倍数!)
                "chknum": /^[1-9][0-9]*00$/,
                "chkfee": /^(0|1|0\.[0-9][0-9][0-9][0-9]{0,1}|1\.0|1\.00|1\.000|1\.0000)$/
            },
            ajaxPost: true, //使用ajax方式提交表单数据
            callback: function(data) {
                if (data.status == "y") {
                    alert(''产品发布成功，请等待核准！'');
                    location.href = "http://www.nanjinsuo.com.cn/?user";
                }
                else {
                    alert(''产品发布失败，请稍后再试！'');
                }
                //location.href="index.php?borrowcollect&borrowtype=1";
                location.href = "http://www.nanjinsuo.com.cn/?user";
            }
        });
        //通过$.Tipmsg扩展默认提示信息;
        $.Tipmsg.w["jknll"] = "请输入8.00-18.00之间的数字！";
//给id=borrow_apr绑定规则。他的datatype=jknull
        demo.addRule([{
                ele: "#borrow_apr",
                datatype: "jknll"
            }]);
        //用dialog打开一个弹框，显示协议
        $("#borrow-readneed").dialog({
            title: "产品协议",
            width: 900,
            height: 800,
            content: ''url:/?user&q=code/borrow/borrowapptender'',
            max: false,
            min: false,
            lock: true
        });
    })
</script>

问题：

1.在validform.js中有 “ s:"请填入信息！" ”，但我没找到这个js在哪里调用他们来验证每一个框。。

参数说明：【所有参数均为可选项】

tiptype

可用的值有：1、2、3、4和function函数，默认tiptype为1。 3、4是5.2.1版本新增
1=> 自定义弹出框提示；
2=> 侧边提示(会在当前元素的父级的next对象的子级查找显示提示信息的对象，表单以ajax提交时会弹出自定义提示框显示表单提交状态)；
3=> 侧边提示(会在当前元素的siblings对象中查找显示提示信息的对象，表单以ajax提交时会弹出自定义提示框显示表单提交状态)；
4=> 侧边提示(会在当前元素的父级的next对象下查找显示提示信息的对象，表单以ajax提交时不显示表单的提交状态)；
如果上面的4种提示方式不是你需要的，你可以给tiptype传入自定义函数。通过自定义函数，可以实现你想要的任何提示效果：
```
tiptype:function(msg,o,cssctl){
    //msg：提示信息;
    //o:{obj:*,type:*,curform:*},
    //obj指向的是当前验证的表单元素（或表单对象，验证全部验证通过，提交表单时o.obj为该表单对象），
    //type指示提示的状态，值为1、2、3、4， 1：正在检测/提交数据，2：通过验证，3：验证失败，4：提示ignore状态, 
    //curform为当前form对象;
    //cssctl:内置的提示信息样式控制函数，该函数需传入两个参数：显示提示信息的对象 和 当前提示的状态（既形参o中的type）;
}
具体参见demo页。
```
tiptype不为1时，Validform会查找class为"Validform_checktip"的标签显示提示信息。tiptype=1时，会自动创建弹出框显示提示信息。
Validform_checktip和表单元素之间的位置关系，会根据tiptype的值有对应的结构，上面已经做了说明。
5.3版本开始，如果页面里没有显示出错信息的标签，会根据tiptype值自动创建Validform_checktip对象。
showAllError

可用值： true | false。
默认为false，true：提交表单时所有错误提示信息都会显示；false：一碰到验证不通过的对象就会停止检测后面的元素，只显示该元素的错误信息；

datatype

传入自定义datatype类型，可以是正则，也可以是函数。

datatyp:{
    "zh2-4":/^[\u4E00-\u9FA5\uf900-\ufa2d]{2,4}$/,
    "phone":function(gets,obj,curform,regxp){
        //参数gets是获取到的表单元素值，
        //obj为当前表单元素，
        //curform为当前验证的表单，
        //regxp为内置的一些正则表达式的引用。
        
        //return false表示验证出错，没有return或者return true表示验证通过。
    }
}

ajaxPost
可用值： true | false。
默认为false。。。
使用ajax方式提交表单数据，将会把数据POST到config方法或表单action属性里设定的地址；

callback

在使用ajax提交表单数据时，数据提交后的回调函数。返回数据data是Json对象：
{"info":"demo info","status":"y"}
info: 输出提示信息，
status: 返回提交数据的状态,是否提交成功，"y"表示提交成功，"n"表示提交失败，在ajax_post.php文件返回数据里自定字符，主要用在callback函数里根据该值执行相应的回调操作。你也可以在ajax_post.php文件返回更多信息在这里获取，进行相应操作；
如果不是ajax方式提交表单，传入callback，这时data参数是当前表单对象，回调函数会在表单验证全部通过后执行，然后判断是否提交表单，如果callback里return false，则表单不会提交，如果return true或没有return，则会提交表单。

location.href的详细解答见：http://www.360doc.com/content/14/0406/18/16488544_366820872.shtml

addRule(rule)【返回值：Validform】

可以通过Validform对象的这个方法来给表单元素绑定验证规则，绑定验证类型中列出的附加属性都可以通过这个方法绑定。

demo.addRule([
    {
        ele:"#name",
        datatype:"s6-18",
        ajaxurl:"valid.php",
        nullmsg:"请输入昵称！",
        errormsg:"昵称至少6个字符,最多18个字符！"
    },
    {
        ele:"#userpassword",
        datatype:"*6-16",
        nullmsg:"请设置密码！",
        errormsg:"密码范围在6~16位之间！"
    },
    {
        ele:"#userpassword2",
        datatype:"*",
        recheck:"userpassword",
        nullmsg:"请再输入一次密码！",
        errormsg:"您两次输入的账号密码不一致！"
    }
]);

其中ele是指定要绑定规则的对象，会在Validform对象下查找这些对象。

$.Tipmsg详细见validform官网

可以通过$.Tipmsg对象来修改默认提示文字。具体可修改的提示文字请查看Validform对象的tipmsg属性。

如果Validform对象的tipmsg属性没有找到相关的提示信息，那么就会到$.Tipmsg中查找对应提示文字。

如$.Tipmsg.tit="msg box"; //设置默认弹出框的标题文字。

ajax验证用户名和密码，ajax验证用户名

<span><span> 1</span>     <span>var</span> user = form.name.<span>value;
</span><span> 2</span>     <span>var</span> password = form.password.<span>value;
</span><span> 3</span>     <span>var</span> url = "chkname.php?user="+user+"&password="+password;<span>//</span><span>以前只知道ajax用于对用户名的检测，原来还可以对密码进行检测。</span>
<span> 4</span>     xmlhttp.open("GET",url,<span>true</span><span>);
</span><span> 5</span>     xmlhttp.onreadystatechange = <span>function</span><span>(){
</span><span> 6</span>     <span>if</span>(xmlhttp.readyState == 4<span>){
</span><span> 7</span>             <span>var</span> msg = xmlhttp.<span>responseText;
</span><span> 8</span>             <span>if</span>(msg == ''1''<span>){
</span><span> 9</span>                 alert(''用户名或密码错误!!''<span>);
</span><span>10</span>                 form.password.<span>select();
</span><span>11</span>                 form.check.value = ''''<span>;
</span><span>12</span> <span>                code(form);
</span><span>13</span>                 <span>return</span> <span>false</span><span>;
</span><span>14</span>             }<span>if</span>(msg == "3"<span>){
</span><span>15</span>                 alert("用户名被占用，请重新输入！"<span>);
</span><span>16</span>                 <span>return</span> <span>false</span><span>;
</span><span>17</span>             }<span>else</span><span>{
</span><span>18</span>                 alert(''欢迎光临''<span>);
</span><span>19</span>                 location.<span>reload();
</span><span>20</span> <span>            }
</span><span>21</span> <span>        }
</span><span>22</span> <span>    }
</span><span>23</span>     xmlhttp.send(<span>null</span><span>);
</span><span>24</span>     <span>return</span> <span>false</span>;</span>

登录后复制

php通过ajax实现用户名与数据库中用户验证

第一步需要一个 jq的js文件
#47;/W3C//DTD HTML 4.01 Transitional//EN" "www.w3.org/TR/html4/loose.dtd">

Login<br><script type="text/javascript" src="<?php%20echo%20%24this->baseUrl%20?>/public/js/jq1.7.js"></script><br /><script language="javascript"><br />$(document).ready(function(){<br />$("#submit").click(function(){<br />if( $("#uname").val() == "" || $("#upas").val() == "" ){<br />alert("用户名或者密码不能为空");<br />return false;<br />}else{<br />$("#showerrormessage").load(<br />''<?php echo $this->baseUrl ?>/index/login'',<br />{uname:$("#uname").val(),upas:$("#upas").val()},<br />function(data){<br />if(data == 1){<br />$("#showerrormessage").html(''login success!!!'');<br />}else{<br />$("#showerrormessage").html(''login error~~~'');<br />}<br />}<br />);<br />}<br />});<br />});<br /></script><br /></head><br /><body><br /><form id="form1" name="form1" method="post" action=""><br />用户名：<input type="te......余下全文>><br/> <p><span><h3>我想用jsp+ajax技术实现登录的用户名与密码验证，主要是用javascript来做<p> <p>Ajax我会.但JSP我只是个半吊子<br/> </script>

我们今天的关于调试 Validform 的辛酸，添加ajax验证机制！和ajax校验的分享就到这里，谢谢您的阅读，如果想了解更多关于ajax form数据封装,ajax提交整个form表单,ajax 自动获取当前form数据、ajax图片验证码: PHP生成各种验证码和Ajax验证、Ajax实例（二）Validform表单验证插件的应用、ajax验证用户名和密码，ajax验证用户名的相关信息，可以在本站进行搜索。

本文标签：