织梦自定义表单留言加验证码功能

利用织梦的自定义表单(http://doc.ydqic.com/3635.html)实现网站留言功能之前有做过，最近有需要加验证码的需求，验证码也有防止被灌水的危险。百度相关教程，发现很严重的问题，一篇教程有错误，其他都是一样错的，都是一帮采集，一人写的教程全部采集，没有点分辨能力，真的不知道分明按照教程一步一步来，还是各种错误。下面这篇是经过实际验证，也改进了之前教程的一些问题。

第一步：

首先需要在后台-频道模型-自定义表单里新建一个表单，增加好表单所需要的字段，后增加一个验证码字段，在自定义表单HTML里填写如下：

<input name="validate" type="text" id="vdcode" style="text-transform:uppercase;" size="8"/>
<img id="vdimgck" align="absmiddle" onClick="this.src=this.src+'?'" style="cursor: pointer;" alt="看不清？点击更换" src="/include/vdimgck.php"/>
<a href="javascript:;" onClick="changeAuthCode();">看不清？ </a>

第二步：

再在模板htm文件,需要的地方增加：

<input name="validate" type="text" id="vdcode" size="8" placeholder="Please enter the verification code"/>
<img id="vdimgck" align="absmiddle" onClick="this.src=this.src+'?'" style="cursor: pointer;" alt="看不清？点击更换" src="/include/vdimgck.php"/>
<a href="javascript:;" onClick="changeAuthCode();">看不清？ </a>

还需要一个切换验证码刷新功能的js函数，另外为了表单的完整通常需要做内容的判断，如用户名是否填写，邮箱格式是否正确，下面的js基于jquery，可以写作模板htm文件的最后面

//验证码生成  绑定到"看不清按钮"点击事件上
function changeAuthCode() {
	let num = new Date().getTime();
	let rand = Math.round(Math.random() * 10000);
	num = num + rand;
	//$('#ver_code').css('visibility','visible');  这个没用的，不知道其他教程为啥有根本没有#ver_code这个元素
	if($("#vdimgck")[0]){
		$("#vdimgck")[0].src = "/include/vdimgck.php?tag=" + num;
	}
	return false;
}
//提交按钮 前判断数据 form元素需要绑定 onsubmit="return formcheck()"
function formcheck(){  
	let content = $(".content textarea").val();
	let name = $(".name input").val();
	let email = $(".email input").val();
	let re_email = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
	
	if(content == ''){
		alert("Please input the content");
		return false;
	}
	if(name == ''){
		alert("Please input the name");
		return false;
	}
	if(!re_email.test(email)){
		alert("Please input the mailbox");
		return false;
	}
}  

第三步：

修改/plus/diy.php，使之判断是否验证码正确，在$fieldarr = explode(‘;’, $dede_fields);前，大概61行，增加函数：

//验证码
if(!empty($dede_fields)){
	$validate = empty($validate) ? '' : strtolower(trim($validate));            
	$svali = strtolower(GetCkVdValue());
	if(($validate=='' || $validate != $svali) && preg_match("/6/",$safe_gdopen)){
		ResetVdValue(); 
		ShowMsg('验证码不正确!','-1',$dede_add,0,1000);exit;
	} 
}
//end

修改后的效果：

最后贴上表单完整的HTML结构和CSS样式，最终呈现的自定义表单效果如下图：

织梦自定义表单HTML结构：

<div id="liuyanban">
	<div>
		<form action="/plus/diy.php" enctype="multipart/form-data" method="post" onsubmit="return formcheck()">
			<input type="hidden" name="action" value="post" />
			<input type="hidden" name="diyid" value="1" />
			<input type="hidden" name="do" value="2" />
			<div class="content">
				<span>*</span>
				<textarea name='ly_content' id='ly_content' placeholder="Please input message content."></textarea>
			</div>
			<div class="name">
				<input type='text' name='ly_name' id='ly_name' class='intxt' value='' placeholder="Please input your name."/>
			</div>
			
			<div class="email">
				<input type='text' name='ly_email' id='ly_email' class='intxt' value='' placeholder="Please input the mailbox." />
			</div>
			<div class="vdcode">
				<input name="validate" type="text" id="vdcode" size="8" placeholder="Please enter the verification code"/>
				<img id="vdimgck" align="absmiddle" onClick="this.src=this.src+'?'" style="cursor: pointer;" alt="看不清？点击更换" src="/include/vdimgck.php"/>
				<a href="javascript:;" onClick="changeAuthCode();">看不清？ </a>
			</div>
			
			<div class="subbtn">
				<input type="submit" name="submit" value="Submission" class='coolbg' />
			</div>
			<input type="hidden" name="dede_fields" value="ly_content,multitext;ly_name,text;ly_email,text" />
			<input type="hidden" name="dede_fieldshash" value="88a381fdd6c488365b9cd67812e6643e" />
		</form>
	</div>
</div>

自定义表单CSS样式代码

#liuyanban{
	height: 590px;
	width: 664px;
	margin: 0 auto;
	text-align:center;
}
#liuyanban .content{
	height: 150px;
	width: 640px;
	color: #666;
	border-color: #000;
	margin-top: 0;
	line-height: 19px;
	font-size: 14px;
	text-align:center;
	display: inline-block;
	margin-top: 15px;
	margin-bottom: 15px;
}
#liuyanban .content span{
	display: inline-block;
	width: 5px;
	color:red;
	vertical-align: top;
	font-size: 16px;
	font-weight: 600;
}
#liuyanban .content textarea{
	width: 630px;
	display: inline-block;
	height: inherit;
	padding-left: 5px;
	padding-right: 5px;
	border: 1px solid rgba(240, 240, 240, 1);
	resize: none;
	padding-top: 5px;
}
#liuyanban .name{
	width: 630px;
	color: #666;
	border-color: rgba(228, 228, 228, 1);
	height: 40px;
	display: inline-block;
	vertical-align: middle;
	color: inherit;
	position: relative;
	font-size: 14px;
	margin-left:5px;
	margin-top: 15px;
	margin-bottom: 15px;
}
#liuyanban .name input{
	width: 100%;
	height: 100%;
	background: #F7F7F7;
	border: 1px solid #f0f0f0;
	padding-left: 5px;
}
#liuyanban .email{
	width: 630px;
	color: #666;
	border-color: rgba(228, 228, 228, 1);
	height: 40px;
	display: inline-block;
	vertical-align: middle;
	color: inherit;
	position: relative;
	font-size: 14px;
	margin-left:5px;
	margin-top: 15px;
	margin-bottom: 15px;
}
#liuyanban .email input{
	width: 100%;
	height: 100%;
	background: #F7F7F7;
	border: 1px solid #f0f0f0;
	padding-left: 5px;
}
#liuyanban .vdcode{
	width: 630px;
	color: #666;
	border-color: rgba(228, 228, 228, 1);
	height: 40px;
	display: inline-block;
	vertical-align: middle;
	color: inherit;
	position: relative;
	font-size: 14px;
	margin-left:5px;
	margin-top: 15px;
	margin-bottom: 15px;
	text-align: left;
}
#liuyanban .vdcode input{
	width: 40%;
	height: 100%;
	background: #F7F7F7;
	border: 1px solid #f0f0f0;
	padding-left: 5px;
}
#liuyanban .subbtn{
	width: 630px;
	color: #666;
	border-color: rgba(228, 228, 228, 1);
	height: 40px;
	display: inline-block;
	vertical-align: middle;
	color: inherit;
	position: relative;
	font-size: 14px;
	margin-left:5px;
	margin-top: 15px;
	margin-bottom: 15px;
}
#liuyanban .subbtn input{
	width: 100%;
	height: 100%;
	background: #0A91FA;
	border: 1px solid #0A91FA;
	padding-left: 5px;
	color:#fff;
	font-weight:600;
	font-size:16px
}