使用 ajax 验证表单字段答案

【问题标题】：Validate form fields using ajax使用 ajax 验证表单字段
【发布时间】：2014-07-01 09:41:59
【问题描述】：

我确实有一个 jquery 代码来验证我的表单，但不幸的是它并不那么准确。我想彻底验证这些字段，例如只接受电话字段上的数字和电子邮件字段上的有效电子邮件地址。

我还想在用户键入/输入值而不单击提交按钮时立即显示错误（或者只是在一个字段中添加一个红色边框），因此它看起来像一个实时检查器。

谁能推导出我的剧本，我对此真的没有信心。如果你认为它是错误的，也可以推导出我的 php 代码。也很想学习如何使用会话，因此用户每个会话只能提交一次。

代码：

<head>

    <script>
      $(function () {

        $('.cbf').on('submit', function (e) {

          e.preventDefault();

          var name = $('#name').val();
          var phone = $('#phone').val();
          var email = $('#email').val();

          if ( name == "" ) {
             alert('Please provide valid name');
             $('#name').addClass('error');
          }

          else if ( phone == "" ) {
             alert('Please provide a valid phone number');
             $('#phone').addClass('error');
             $('#name').removeClass('error');
          }

          else if ( email == "" ) {
             alert('Please provide a valid email');
             $('#email').addClass('error');
             $('#phone').removeClass('error');
          }

          else {
              $.ajax({
                type: 'post',
                url: 'index.php',
                data: $('.cbf').serialize(),
                data: "name="+ name +"& phone="+ phone +"& email="+ email,
                success: function () {
                  alert('We will contact you shortly! Thanks!');
                },
                complete:function(){
                        $('.cbf').each(function(){
                            this.reset();   //Here form fields will be cleared.
                        });
                   }
              });

              $('#email').removeClass('error');

          }

        });

      });
    </script>

</head>

<form method="post" action="<?php echo $_SERVER["PHP_SELF"];?>" class="cbf">

<fieldset>

    <input type="text" id="name" name="name" value="" placeholder="Name">
    <input type="text" id="phone" name="phone" value="" placeholder="Phone">
    <input type="email" id="email" name="email" value="" placeholder="Email Address">
    <input type="submit" id="submit" name="submit" value="Get Call Back">

</fieldset>

</form>

    <?php

    session_start();

if ('POST' === $_SERVER['REQUEST_METHOD']) {

$_SESSION['posted'] = true;

$to = "myemail@gmail.com";
$subject = "Someone wants a Call Back!";

// data the visitor provided

//$name_field = $_POST['name'];
//$phone_field = $_POST['phone'];
//$email_field = $_POST['email'];

$name_field = filter_var($_POST['name'], FILTER_SANITIZE_STRING);
$email_field = filter_var($_POST['email'], FILTER_VALIDATE_EMAIL);
$phone = filter_var($_POST['phone'], FILTER_SANITIZE_INT);

  //constructing the message
  $body = " From: $name_field\n\n Phone: $phone_field\n\n E-mail: $email_field\n\n";

  // ...and away we go!
  mail($to, $subject, $body);

} else {
// handle the error somehow
}
?>

【问题讨论】：

标签： javascript php jquery html validation

【解决方案1】：

试试这个代码：

$("#signupform").validate({
    rules: {
        email: {
            required: true,
            email: true
        },
        mobile: {
            required: true,
            number: true,
            minlength: 10,
            maxlength: 10
        }
    },
    messages: {
        email: {
            required: "Please enter a valid email address.",
            email: "Invalid Email Address."
        },
        mobile: {
            required: "Please provide a mobile number.",
            minlength: "Your mobile number must be 10 characters long.",
            maxlength: "Your mobile number must be 10 characters long.",
            number: "Please Enter number only."
        }
    }
});

【讨论】：

【解决方案2】：

最好在服务器端和客户端都进行验证。客户端验证然后向用户显示错误。在服务器端，你需要再次验证，因为你的 JS 代码可以被恶意用户更改。

phone 的简单示例。

//client side
var phone = $('#phone').val();

//validate
if(/^\d+$/.test(phone) === false){ //not number
    alert('Your phone number is not valid');
}

//on server side

$phone = $_POST['phone'];
if(is_numeric($phone)){
    insert $phone into database.
}

【讨论】：

【解决方案3】：

另一种方法是使用 HTML5 和新标签，例如：“email”和“tel”（暂时不支持 tel）：

<input type="tel" name="phone" required>

对于电子邮件：

<input type="email" name="email" required>

即使您选择的解决方案，您也必须根据您的情况在 Php 中的服务器端进行控制。

这不是解决方案，但在未来，我认为我们应该使用这些标签。

【讨论】：

【解决方案4】：

这是一个简单的 jQuery 验证：形式：

<form id="myform">
    email<input type="text" name="field1" />
    <br/>
    password<input type="text" name="field2" />
    <br/>
    <input type="submit" />
</form>

验证部分

$(document).ready(function () {
        $('#myform').validate({ // initialize the plugin
            rules: {
                field1: {
                    required: true,
                    email: true
                },
                field2: {
                    required: true,
                    minlength: 5
                }
            },
            submitHandler: function (form) { // for demo
                alert('valid form submitted'); // for demo
                return false; // for demo
            }
        });

    });

http://jsfiddle.net/VuPPy/

【讨论】：