dedeeims 在线反馈修改之表单验证（验证码异步验证）

蓝忧无泪

dedeeims自带的在线反馈，也就是guestbook.html，这个模板给人的感觉更博客一点。

在做项目的时候，阿头要求把原来的在线反馈改一改，改成直接向客服邮箱发送邮件。现在大部分的注册等表单，在用户体验方面都做了改进，最为明显的就是必填提示和验证码异步验证，今天先说说表单验证。dedeeims自带的表单，检验必填项和验证码是在点击提交按钮之后，在php页面进行验证，如果错误的话再返回重填表单。项目小组里的美女们说，这简直要了她们的命。好的动手改。
先上一张效果图：如下图所示，点击提交按钮，所有必填项会在表单页面进行检测。没有填写的，相应标签元素会变为黄色，同时有红色的错误提示，submit按钮下面还有一个总的错误提示。





上面这个效果主要是用jquery和jquery验证表单插件完成。
首先，要下载jquery.min.js和jquery.validate.js，这两个文件在网上很容易搜索到，就不具体给出下载地址了，下载回来后，可以放到对应template 包下的js文件夹里面。然后在dedecms系统template文件夹下面，找到plus文件夹，再找到guestbook.htm,打开，在头部加载两个js文件。如果在官网下载到jquery.validate.js文件的话，会发现里面有很多demo，我根据我项目的具体要求，把里面的内容进行了整合，得到下面的js


<script type="text/javascript">
<!--
//定义错误提示时元素的class
$.validator.setDefaults({
highlight: function(input) {
$(input).addClass("ui-state-highlight");
},
unhighlight: function(input) {
$(input).removeClass("ui-state-highlight");
}
});


$().ready(function() {
$.fn.themeswitcher && $('<div/>').css({
position: "absolute",
right: 10,
top: 10
}).appendTo(document.body).themeswitcher();


//下面为增加一个validate 的自定义也就是扩展规则，通过Jquery的ajax 异步扩张来实现验证码的异步验证
jQuery.validator.addMethod('checkvalidate', function(value, element) {
//异步检验验证码
function ajax(){
var result =false; $.ajax({ url: 'checkval.php',
type: "POST",
data: "validate="+$("#vdcode").val(),
async: false,
success:function(msg){
if(msg){
result = true;
}else
{
result = false;
} } });
return result;
}
return ajax()==true; //当验证码正确的时候，返回，也就是验证正确
}, 'Please fiil out the right validate code!');


// validate signup form on keyup and submit
var validator = $("#signupForm").bind("invalid-form.validate", function() {
$("#summary").html("Your form contains <span>" + validator.numberOfInvalids() + "</span> errors, see details above.");
}).validate({//.validate前面的代码是submit下面那句的总错误提示
rules: {//定义表单的规则，哪些是必填，如何验证，其中邮件验证规则为validate自带
enquiry: "required",
uname: "required",
email: {
required: true,
email: true
},
phone: "required",
msg: "required",
validate: {
required: true,
checkvalidate:true//验证码的验证，自定义
}
},
messages: {
enquiry: "Please select one of the enquiry!",
uname: "Please fill out your full name!",
email: "Please fill out a valid e-mail address! ",
phone: "Please fill out your phone number!",
msg: "Please fill out the message!",
validate: "Please fill out the right validate code!"
}
});
$("#signupForm input:not(:submit)").addClass("ui-widget-content");
$(":submit").button();
});
-->
</script>
错误提示的表单样式，可以通过下面几个标签来进行设置
.ui-state-highlight, .ui-widget-content .ui-state-highlight， #summary， #signupForm .validate label.error


异步验证的那步具体说明可以去找到 jquer ajax 异步验证，这些文章网上很多，就不具体说明了，在dedeeims里面获得系统的验证码，可以通过抄根目录plus文件夹里面的guestbook.php里面验证的部分，直接贴代码，也不具体解释了。
<? php
require_once(dirname(__FILE__).'/guestbook/guestbook.inc.php');
require_once(DEDEINC.'/userlang.inc.php');
require_once(DEDEINC.'/datalistcp.class.php');


if(!empty($_COOKIE['GUEST_BOOK_POS'])) $GUEST_BOOK_POS = $_COOKIE['GUEST_BOOK_POS'];
else $GUEST_BOOK_POS = 'enguestbook.php';
$svali = GetCkVdValue();
$validate = strtolower($_POST['validate']);
if($validate == strtolower($svali )){
echo  1;
}
? >


这次较懒，没有一个个都进行说明。有什么想具体了解的可以留言交流哈。


－－本文转载http://blog.sina.com.cn/xufeng513