Javascript 表单验证（编码新手）

Posted

技术标签:

【中文标题】Javascript 表单验证（编码新手）【英文标题】：Javascript Form Validation (new to coding) 【发布时间】：2020-10-11 12:54:30 【问题描述】：

我正在尝试使用 javascript 完成一些 html 表单验证，在我添加正则表达式匹配部分之前，一切正常。从那时起，只要点击提交按钮，就会刷新页面，并且不会在其下方进行任何表单验证。

   // ISSUE HERE
   if(refNum.value.match(/^((?!S[0-9]).)*$/))
     text = "Please enter a valid reference number"
     error_message.innerHTML=text;
     return false;

上面是我遇到问题的区域，它当前检查与该模式不匹配的任何内容并输出一条错误消息，这是我希望它执行的操作，但当它与我想要的模式匹配时，它只会刷新页面表格上的所有进度都会丢失。如果没有此区域，验证工作正常，但我需要将其保留为量规的一部分并且无法找到修复程序。以下是完整的表单验证代码，希望对您有所帮助，感谢您的宝贵时间。

"use strict";
//Validate Form
function validate()
   var refNum = document.getElementById('refNum').value;
   var error_message = document.getElementById('error_message');
   var text;
//Reference Number validation
   if(refNum.length == 0)
     text = "Please enter a reference number"
     error_message.innerHTML=text;
     return false;
   
   else if(refNum.length < 6|| refNum.length >6)
     text = "Please enter a valid reference number"
     error_message.innerHTML=text;
     return false;
   
   // ISSUE HERE
   if(refNum.value.match(/^((?!S[0-9]).)*$/))
     text = "Please enter a valid reference number"
     error_message.innerHTML=text;
     return false;
    
//Username Validation
var userName = document.getElementById('userName').value;
   if(userName.length <2 || userName.length > 20)
     text = "Username must be between 2 and 20 characters"
     error_message.innerHTML=text;
     return false;
   
//Phone Number Validation
var phoneNum = document.getElementById('phoneNum').value;
  if(phoneNum.length !=10)
      text = "Please Enter a valid phone number"
      error_message.innerHTML=text;
      return false;


   else 
     alert(refNum)
   
return false

受影响的 HTML 代码

            <!--  Seminar ref num -->
            <p>
                <div class=input_field>
                <label for="refNum">Seminar ref number:</label>
                <input type="text" name="refNum" placeholder="S00000"  id="refNum"  >
                </div>
            </p>

整个 HTML 代码

<?php session_start(); ?>
<!-- write header comments here  -->
<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="description" content="A registration page" >
    <meta name="keywords" content="Register, form, input">
    <meta name="author" content="Ethan Franks"  >
    <title>Seminar registration</title>
    <link href="styles/style.css" rel="stylesheet" >
    <script src="scripts/validate.js"></script>
</head>
<body>
<?php

require_once ("settings.php");
$conn = @mysqli_connect($host,$user,$pwd,$sql_db);
if (!$conn) 
  echo "<p>Failed to connect to database</p>";

    $page="register_page";
    include_once "header.inc";
    include_once "nav.inc";
?>


<div class="wrapper">
    <h2>Register For Seminar</h2>
    <div id= "error_message"></div>
    <fieldset>
    <form id="registerForm" method="post"  onsubmit="return validate()" action="process.php">
        <!--  Seminar ref num -->
        <p>
            <div class=input_field>
            <label for="refNum">Seminar ref number:</label>
            <input type="text" name="refNum" placeholder="S00000"  id="refNum"  >
            </div>
        </p>
<!-- username -->
        <div class="input_field"
        <p>
            <label for="userName">Username:</label>
            <input type="text" name="userName" placeholder="Username"  id="userName"  >
        </p>
        </div>

        <hr>
        <!-- Qualification level -->
    <input type="radio" id="underGraduate" name="qualLevel" value="underGraduate">
    <label for="underGraduate">Undergraduate</label><br>

    <input type="radio" id="postGraduate" name="qualLevel" value="postGraduate">
    <label for="postGraduate">Postgraduate</label><br>
        <!-- Email -->
        <div class="input_field">
        <label for="email">Enter your email:</label>
        <input type="email" id="email" placeholder="johnsmith@gmail.com"  name="email">
        </div>
        <!-- Phone Number -->
        <div class="input_field">
        <p>
            <label for="phoneNum">Phone number:</label>
            <input type="text" name="phoneNum" placeholder="0000000000"  id="phoneNum"  >
        </p>
        </div>
        <!--  submit and reset -->
        <p>
            <div class="btn">
            <input type="submit" value="Register" >
            <input type="reset" value="Reset" >
            </div>
        </p>
    </form>
    </div>
<?php
    include_once "footer.inc";
?>

</body>
</html>

【问题讨论】：

也分享html代码 控制台日志中的错误在这里很有用 右击页面，进入检查元素并参考控制台日志（错误选项） 【参考方案1】：

这是你的错误：

Uncaught TypeError: Cannot read property 'match' of undefined

那是因为你设置了

var refNum = document.getElementById('refNum').value;

现在你又在做 refNum.value 了

document.getElementById('refNum').value.value

您需要像这样从变量初始化中删除.value：

var refNum = document.getElementById('refNum');

【讨论】：

以上是关于Javascript 表单验证（编码新手）的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript 表单验证：理解函数调用

7.2 Javascript:表单验证-提交表单

使用 Javascript /jQuery 的 Bootstrap 4 表单验证

使用Javascript / jQuery进行Bootstrap 4表单验证

JavaScript form表单提交与验证

Jquery表单验证和提交