堆栈内存溢出
  繁体   English   中英

使用PHP，JS和Ajax验证contactform

[英]Validating contactform using PHP, JS and Ajax

 原文  2012-03-17 17:37:38  0   1    javascript/ php/ ajax/ validation

问题描述

我对联系表中输入的内容的验证存在疑问。

形式如下： 

<script src="http://malsup.github.com/jquery.form.js"></script> 
<script>
$(document).ready(function(){ 
  $('#contact_messenbrinkeu').ajaxForm(
     function(){ 
       alert("Your message has been send!"); 
     }
    )
})
</script>
</head>

<body>

<section id="page">
<?php include("includes/header.php"); ?>

<section id="articles">                
<article id="article1">

<div id="contact-form">    

<form id="contact_messenbrinkeu" action="sendform.php" method="post">
<fieldset id="form">

    <label for="name">Name*</label><br>
    <input type="text" name="name" placeholder="Your Name"title="enter your name" class="alpha required"><br>

    <label for="email">E-mail*</label><br>
    <input type="email" name="email" placeholder="mail@example.com" title="Enter your e-mail address" class="mail required"><br>

    <label for="phone">Phone</label><br>
    <input type="text" name="phone" placeholder="00 45 12 34 56 78" class="numeric"><br>

    <label for="website">Website</label><br>
    <input type="text" name="website" placeholder="www.example.com" id="website"><br>

    <label for="message">Message*</label><br id="message">
    <textarea name="message" class="required"></textarea>

</fieldset>
<fieldset id="button">

<button type="submit">>>&nbsp;&nbsp;&nbsp;Send</button>
<button type="reset">reset&nbsp;&nbsp;&nbsp;<<</button>

</fieldset>
</form>

</div><!-- /end #contact-form -->

</article><!-- Article 1 end -->
</section>

<?php include("includes/jquery.php");?>
<script type="text/javascript">
/*<![CDATA[*/
jQuery.noConflict();
jQuery(document).ready(function($){
    // when submit button is pressed
    $("#contact_messenbrinkeu").submit(function() {

        var pass = true;

        var errors = {
            required    : 'this field is required',
            email       : 'enter a valid email address',
            numeric     : 'enter a number without spaces, dots or commas',
            alpha       : 'this field accepts only letters &amp; spaces'
        };

        var tests = {
            email       : /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/,
            numeric     : /^[0-9]+$/,
            alpha       : /^[a-zA-Z ]+$/
        };

        // clear error messages
        $(".error").removeClass();
        $(".error-message").remove();

        function displayError(el, type) {
            $(el).parent().addClass("error").find('label').append('<span class=\"error-message\"> &#8211; ' + errors[type] + '</span>');
        }

        $('.required, .email, .numeric, .alpha').each(function(){
            var value       = $(this).val();
            var valueExists = value.length === 0 ? false : true;

            var required    = $(this).hasClass('required');
            var email       = $(this).hasClass('email');
            var numeric     = $(this).hasClass('numeric');
            var alpha       = $(this).hasClass('alpha');

            if (required && value.length===0) {
                displayError(this,'required');
                pass=false;
            }

            else if (email && valueExists && !tests.email.test(value)) {
                displayError(this,'email');
                pass=false;
            }

            else if (numeric && valueExists && !tests.numeric.test(value)) {
                displayError(this,'numeric');
                pass=false;
            }

            else if (alpha && valueExists && !tests.alpha.test(value)) {
                displayError(this,'alpha');
                pass=false;
            }
        });
        return pass;
    });
});
/*]]>*/
</script>

以及提交表单时调用的sendform.php： 

<?php
    ini_set("display_errors", "0");
    $post_data = filter_input_array( INPUT_POST );

    $name = $post_data["name"];
    $email = $post_data["email"];
    $phone = $post_data["phone"];
    $website = $post_data["website"];
    $message = $post_data["message"];



    # select data that needs validation
    $validate = array(
        'required'  => array($name,$email,$message),
        'validEmail'    => array($email),
        'validNumber'   => array($phone),
        'validAlpha'    => array($name)
    );
    $formcontent = "Name: $name \nE-Mail: $email \nPhone: $phone \nWebsite: $website \nMessage: $message \n";
    //*$formcontent = wordwrap($formcontent, 70, "\n", true);

    $recipient = "mail@test.com"; 
    $subject = "Testmail"; 

    /*$mailheader = "From: $email \r\n";**/

    $mailheader .= "Reply-To: $name <$email>\r\n"; 
    $mailheader .= "Return-Path: $name <$email>\r\n"; 
    $mailheader .= "Content-Type: text/plain\r\n"; 
    $mailheader .= "Organization: Sender Organization\r\n";
    $mailheader .= "MIME-Version: 1.0\r\n";
    $mailheader .= "Content-type: text/plain; charset=UTF-8\r\n";
    $mailheader .= "X-Priority: 3\r\n";
    $mailheader .= "X-Mailer: PHP". phpversion() ."\r\n";
    $mailheader .= "From: $name <$email>\r\n";  

    function sendMail() {
        global $formcontent, $recipient, $subject, $mailheader;
        mail($recipient, $subject, $formcontent, $mailheader);
    }

    # error messages
    $errorsMsgs = array(
        'required'  => 'Please fill out all required fields.',
        'validEmail'    => 'is an invalid email address.',
        'validNumber'   => 'is an invalid number.',
        'validAlpha'    => 'contains invalid characters. This field only accepts letters and spaces.'
    );

    $errorMarkup    = "<h1>We found a few errors :-(</h1><h2>Please fix these errors and try again</h2><ol>";
    $errorMarkupEnd = "</ol>";
    $successMarkup  = "<h1>Success!</h1><h2>Your form was sent successfully.</h2>";
    $backMarkup     = "<a href=\"" . $_SERVER['HTTP_REFERER'] . "\">Back to form</a>";

    # begin state
    $valid = true;

    # loop through fields of error types
    foreach ($validate as $type => $fields) {
        # loop through values of fields to be tested
        foreach ($fields as $value) {
            # throw error if value is required and not entered
            if ($type === 'required' && strlen($value) === 0) {
                $errorMarkup .= "<li>$errorsMsgs[$type]</li>";
                $valid = false;
                break;
            }
            else if (
                $type === 'validEmail'  && !filter_var($value, FILTER_VALIDATE_EMAIL) ||
                $type === 'validNumber' && !preg_match('/^[0-9 ]+$/', $value) ||
                $type === 'validAlpha'  && !preg_match('/^[a-zA-Z ]+$/', $value)
            ) {
                if (strlen($value) === 0) {break;} # skip check if value is not entered
                $errorMarkup .= "<li>\"$value\" $errorsMsgs[$type]</li>";
                $valid = false;
                continue;
            }
        }
    }

    function isUTF8($string){
    return (utf8_encode(utf8_decode($string)) == $string);
    }

    if ($valid) {
        //*isUTF8($subject);
        //*isUTF8($formcontent);
        sendMail();
        $body = $successMarkup . $backMarkup;
        $title = "Form sent";
    } else {
        $body = $errorMarkup . $errorMarkupEnd . $backMarkup;
        $title = "Form errors";
    }

在这一点上，我要解决两个问题：

  1. 如果您在表单中输入无效字符，则不仅会为包含无效值的字段返回错误，还会为所有字符返回错误。

  2. 无论是否实际发送表单，都会弹出一个告诉您表单已成功发送的弹出窗口-因此，我显然需要将其置于验证之后。

1 个解决方案

解决方案1
 0 已采纳  2012-04-30 14:17:18

在您的contact.php表单中，您将首先具有可能与此类似的表单类型 

<form action="post.php" name="contactUs" onsubmit="return validateForm();"  method="post" >

这会告诉您联系表单在哪里获取post.php表单，因为我的文件夹在同一个文件夹中，只需要名称，您就可以设置表单的名称（对我来说就是contactUs），稍后将对此进行说明，然后您单击onsubmit，这是您联系表格底部的“提交”按钮，因此当有人单击“提交”时，它将返回validateForm（）。 

<script type="text/javascript">

function validateForm()
{
    if (false == validate_required(
    document.forms["contactUs"]["name"], "Name must be supplied")) 
    {
        return false;
    }
    if (false == validate_email(
    document.forms["contactUs"]["email"], "Valid email must be supplied")) 
    {
        return false;
    }
    if (false == validate_product(
    document.forms["contactUs"]["product"], "Please tell us your product type")) 
    {
        return false;
    }
    if (false == validate_support(
    document.forms["contactUs"]["support"], "Type of support must be supplied")) 
    {
        return false;
    }
    if (false == validate_message(
    document.forms["contactUs"]["message"], "A message must be supplied")) 
    {
        return false;
    }
    return true;
}


function validate_required(field, alerttxt) 
{
    if (field.value == null || field.value == "") 
    {
    alert(alerttxt);
        return false;
    }
    else 
    {
        return true;
    }
}

function validate_email(field, alerttxt) 
{
    apos = field.value.indexOf("@");dotpos = field.value.lastIndexOf(".");
    if (apos < 1 || dotpos - apos < 2) {
        alert(alerttxt);
        return false;
    } 
    else 
    {
        return true;
    }
}

function validate_product(field, alerttxt) 
{
    if (field.value == null || field.value == "" || field.value == "What is Your Product?") 
    {
    alert(alerttxt);
        return false;
    }
    else 
    {
        return true;
    }
}

function validate_support(field, alerttxt) 
{
    if (field.value == null || field.value == "" || field.value == "Type of Support?") 
    {
    alert(alerttxt);
        return false;
    }
    else 
    {
        return true;
    }
}

function validate_message(field, alerttxt) 
{
    if (field.value == null || field.value == "" || field.value == "Please enter Message here:") 
    {
    alert(alerttxt);
        return false;
    }
    else 
    {
        return true;
    }
}

</script>

它以您的形式出现，因此更容易找到脚本，我将以此为例，希望可以教您了解所需的知识 

if (false == validate_required(
    document.forms["contactUs"]["email"], "Valid email must be supplied")) 
    {
return false;

这是它的功能 

function validate_required(field, alerttxt) 
{
    if (field.value == null || field.value == "") 
    {
    alert(alerttxt);
        return false;
    }
    else 
    {
        return true;
    }
}

在您的if语句中，键入您对我来说是contactUs的表单的名称，我的联系表单的值的名称是name，因此这将检查名称是否有效。

在我的函数中，它检查是否为null（空）或“”（与空值相同），如果为空，则给他们Alerttxt（在我的validate_required中定义为“必须提供有效电子邮件”），这是在函数validate_required（field，alerttxt）中设置，field是我的表单的名称，我要验证的字段的名称，alerttxt是上面显示的名称，如果为空，则返回false，如果不是，则返回false真正。

if语句是 

if (false == validate_required)

您已经从表单中获得了结果， if false == validate_required ，如果validate_required为false，则它们相等，并且给出了警告消息，如果validate_required为true，则它们不匹配，并且语句不false，因此不需要验证，希望这会有所帮助，通读javascript，您将明白它的意思

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 jQuery Ajax PHP验证注册 使用js验证电子邮件 使用JS Regex验证数据 无法使用AJAX将JS变量获取到PHP 使用ajax将字符串从php连接到js 根据使用ajax php mysql选择的选项来验证问卷中的相应文本区域 使用javascript和php验证可用性 无法使用AJAX将JS变量传递给PHP 使用ajax将JS变量传递给PHP PHP（SQL）数组使用ajax传递给JS
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM