javascript 高效且有效的表单验证

hzbexzde  于 2023-01-04  发布在  Java
关注(0)|答案(3)|浏览(212)

我有一个表单here的工作示例。我需要使用Jquery表单验证的Javascript来验证用户是否输入了他/她自己的数据。到目前为止,我已经尝试检查值,但显然这不起作用,因为输入和文本区域已经有了默认值,所以用户可以直接提交,而无需填写任何内容。
任何帮助都将不胜感激。
先谢了!
编辑
我正在使用这个php发送提交的数据到一个电子邮件地址:

<?php
$name = $_POST['name'];
if ($name=="") {
$name="Nothing was returned for this part of the form.";
}
$email = $_POST['email'];
if ($email=="") {
$email="Nothing was returned for this part of the form.";
}
$subject = $_POST['subject'];
if ($subject=="") {
$subject="Nothing was returned for this part of the form.";
}
$comments = $_POST['comments'];
if ($comments=="") {
$comments="Nothing was returned for this part of the form.";
}
$theMessage7="<b>Results from the form at www.site.co.uk/contact.html</b><br /><br />" . "Name:&nbsp;" . $name . "<br />" . "Email:&nbsp;" . $email . "<br />" . "Subject:&nbsp;" . $subject . "<br />" . "Message:&nbsp;" . $comments . "<br />";
$theEmail7="mail@mail.com";
$theSubject7="New form submission";
$theHeaders7="MIME-Version: 1.0
Content-type: text/html; charset=iso-8859-1
From: form@bikeinc.co.uk
Subject: New form submission";
$theErrorFile7="www.site.co.uk/12345";
$theThanxFile7="received.html";
if (!(mail($theEmail7, stripslashes($theSubject7), stripslashes($theMessage7), stripslashes($theHeaders7)))) {
    header ( "Location: $theErrorFile7" );
        }else{
    header ( "Location: $theThanxFile7" );
}
?>
jqjz2hbq

jqjz2hbq1#

用户端表单验证的有效形式是使用jQuery validation plugin,请参阅正确使用的示例。

  • 注意:用户总是可以禁用javascript或使用某种bot发送无效的未检查数据,所以你总是要写正确的服务器端验证。*

框架通常提供有效的表单验证方式,如Zend_Validator
为你的php应用准备方法是很常见的,比如:

public function validate() {
  if( !isset( $_POST['name'])){
    $this->field = 'name';
    $this->msg = 'Invalid user name';
    return false;
  }

  ...
  return true;
}

并在两个发送脚本中使用它:

if( $form->validate()){
  send();
}

在检查脚本中:

$data = array();
if( $form->validate()){
  $data['status'] = 'ok';
} else {
  $data['status'] = 'failure';
  $data['field'] = $form->field;
  $data['msg'] = $form->msg;
}
echo json_encode( $data);

最后使用jquery和javascript进行“动态”表单验证:

<input type="text" name="name" value="" onchange="ajaxValidate();" />

function ajaxValidate(){
  // Call ajax to check script and put results
}

如果你只是用一个窗体来构建小项目,你可以实现一些方法,比如:

function is_post( $key); // Shorter than write isset( $_POST[ $key])
function get_post( $key, $defaultValue); // Shorter than isset( $_POST[ $key]) ? $_POST[ $key] : $default
function is_email(...); 
...

jQuery验证:

function validateForm() {
  $('.input').removeClass( 'error');
  var status = true;
  if( $('input[name=name]').val() == '')){
     $('input[name=name]').addClass( 'error');
     setMessage( 'Name cannot be empty');
     status = false;
  }

  ...

  return status;
}

<form onsubmit='return validateForm();' ...>
guicsvcw

guicsvcw2#

表单验证是在接受和存储用户输入之前确保其完整、准确和合理的过程。它是Web开发的一个重要方面,因为它有助于防止提交无效或恶意数据。有几种方法可以实现高效和有效的表单验证:
使用客户端验证:这种类型的验证是在客户端设备(例如,网页浏览器)上使用JavaScript执行的。它速度快,可以向用户提供即时反馈,但如果用户禁用了JavaScript或使用的浏览器不支持JavaScript,则可以绕过它。
使用服务器端验证:此类型的验证在表单提交后在服务器上执行。它比客户端验证更可靠,因为它不能被绕过,但它可能会导致延迟,因为表单必须提交,服务器必须处理它,用户才能收到反馈。
同时使用客户端和服务器端验证:将这两种验证类型结合起来可以提供两个方面的最佳效果。客户端验证可以向用户提供即时反馈并减少服务器上的负载,而服务器端验证可以确保数据有效且安全。
使用正则表达式验证输入:正则表达式是验证输入的强大工具,可用于检查字符串是否与特定模式(例如,电子邮件地址、电话号码)匹配。
使用预建表单验证库:有许多预先构建的库和框架(例如,jQuery Validation Plugin、AngularJS)可以使表单验证的实现变得非常简单。
使用适当的输入类型和属性:HTML5引入了几种新的输入类型(例如,email、url、number)和属性(例如,required、min、max),可以用来提高表单验证的准确性。

hgc7kmma

hgc7kmma3#

您可以尝试使用HTML5 required属性...但这仅适用于支持它的浏览器。例如:

<label for="name">Name:</label>
<input type="text" name="name" required="required" id="name">

这将只在您使用HTML5 doctype时才起作用。
然后,对于示例中的PHP验证,由于浏览器不兼容,HTML5验证尚未运行......或者JavaScript由于被禁用/不可用/损坏而未运行。

// check input
if (empty($_POST['name']))
{
    $errors['name'] = 'Please provide your name.';
}

然后,在身份验证完成后向用户显示页面时,我会显示错误。

<label for="name">Name:</label>
<input type="text" name="name" required="required" id="name">
<?php if (!empty($errors['name'])): ?><p class="error"><?php echo $errors['name']; ?></p><?php endif; ?>

另外......如果要将其保存在数据库中或显示给其他用户,请记住保护自己免受SQL注入、XSS和恶意代码注入的影响。

相关问题