Question

我确实有一个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
}
?>

Answer 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."
        }
    }
});

Answer 2

这是一个简单的 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/

Answer 3

最好在服务器端和客户端进行验证。客户端验证然后向用户显示错误。在服务器端，您需要再次验证，因为您的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.
}

Answer 4

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

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

和电子邮件：

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

即使您选择的解决方案，您也必须在Php的服务器端对您的案例进行控制。

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

更多信息：http://www.w3schools.com/html/html5_form_input_types.asp

使用ajax验证表单字段

4 个答案: