我正在尝试使用 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>整个网页代码
<?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>这是你的错误：
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');