我一直在研究如何使用JavaScript进行验证的简单表格。我了解，通常单选按钮用于允许从一组选项中进行一个选择（例如，性别选择，M或F）的表单元素，并且该复选框允许从一组选项中进行多个选择（例如，页面顶部的浇头）比萨）。测试表单后，我发现该表单允许用户检查两个单选按钮的“性别”，并且仍然可以验证。经过一些研究，我注意到我需要在html文件中为每个单选按钮赋予相同的名称，但是，这样做之后，该表单将不再有效。我不确定本教程的作者为什么使用他们使用的方法，但是如果有一种方法可以挽救这个项目，我想尝试一下。我也查看了单选按钮列表和没有运气的单选组。任何建议或意见将不胜感激。我将包括一些必要的代码。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Form</title>
<link rel='stylesheet' href='css/styles.css' type='text/css' />
<script src="js/script.js"></script>
</head>
<body onload="document.registration.userid.focus();">
<!--places cursor in first field onload-->
<div class="wrapper"> <img src="images/logo.jpg" alt="Banner">
<br>
<h1>New Patient Information</h1>
<div id="left">
<!--form-->
<form name='registration' onSubmit="return formValidation();">
<ul>
<!--PatientID#-->
<li>
<label for="userid">Patient ID:</label>
</li>
<li>
<input type="text" name="userid" size="12" />
</li>
<!--Password-->
<li>
<label for="passid">Password:</label>
</li>
<li>
<input type="password" name="passid" size="12" />
</li>
<!--Full Name-->
<li>
<label for="username">Full Name:</label>
</li>
<li>
<input type="text" name="username" size="50" />
</li>
<!--Address-->
<li>
<label for="address">Delivery Address:</label>
</li>
<li>
<input type="text" name="address" size="50" />
</li>
<!--County-->
<li>
<label for="country">Select County:</label>
</li>
<li>
<select name="country">
<option selected="" value="Default">(Please select your county)</option>
<option value="AF">Orange</option>
<option value="AL">Seminole</option>
<option value="DZ">Palm Beach</option>
<option value="AS">Martin</option>
<option value="AD">Dade</option>
</select>
</li>
<!--Zip Code-->
<li>
<label for="zip">ZIP Code:</label>
</li>
<li>
<input type="text" name="zip" />
</li>
<!--Email Address-->
<li>
<label for="email">Email:</label>
</li>
<li>
<input type="text" name="email" size="50" />
</li>
<!--Patient Gender-->
<li>
<label id="gender">Gender:</label>
</li>
<li>
<input type="radio" name="msex" value="Male" /><span>Male</span></li>
<li>
<input type="radio" name="fsex" value="Female" /><span>Female</span></li>
<!--language-->
<li>
<label>Language:</label>
</li>
<li>
<input type="checkbox" name="en" value="en"/><span>English</span></li>
<li>
<input type="checkbox" name="nonen" value="noen"/><span>Non English</span></li>
<!--About *Optional*-->
<li>
<label for="desc">About:</label>
</li>
<li>
<textarea name="desc" id="desc"></textarea>
</li>
<!--Submit Button-->
<li>
<input type="submit" name="submit" value="Submit" />
</li>
</ul>
</form>
</div>
</div>
<!--JS-Call-->
<script src="js/script.js"></script>
JavaScript
//JavaScript
function formValidation() {
var uid = document.registration.userid;
var passid = document.registration.passid;
var uname = document.registration.username;
var uadd = document.registration.address;
var ucountry = document.registration.country;
var uzip = document.registration.zip;
var uemail = document.registration.email;
//GENDER
var umsex = document.registration.msex;
var ufsex = document.registration.fsex;
//END-Gender
if (userid_validation(uid, 7, 18)) {
if (passid_validation(passid, 7, 18)) {
if (allLetter(uname)) {
if (alphanumeric(uadd)) {
if (countryselect(ucountry)) {
if (allnumeric(uzip)) {
if (ValidateEmail(uemail)) {
//Gender
if (validsex(umsex, ufsex)) {
//End Gender
}
}
}
}
}
}
}
}
return false;
}
function userid_validation(uid, mx, my) {
var uid_len = uid.value.length;
if (uid_len == 0 || uid_len >= my || uid_len < mx) {
alert("User Id should not be empty / length be between " + mx + " to " + my);
uid.focus();
return false;
}
return true;
}
function passid_validation(passid, mx, my) {
var passid_len = passid.value.length;
if (passid_len == 0 || passid_len >= my || passid_len < mx) {
alert("Password should not be empty / length be between " + mx + " to " + my);
passid.focus();
return false;
}
return true;
}
function allLetter(uname) {
var letters = /^[a-zA-Z\s]*$/;
if (uname.value.match(letters)) {
return true;
} else {
alert('Username must have alphabet characters only');
uname.focus();
return false;
}
}
function alphanumeric(uadd) {
var letters = /^[a-z\d\-_\s]+$/i;
if (uadd.value.match(letters)) {
return true;
} else {
alert('User address must have alphanumeric characters only');
uadd.focus();
return false;
}
}
function countryselect(ucountry) {
if (ucountry.value == "Default") {
alert('Select your county from the list');
ucountry.focus();
return false;
} else {
return true;
}
}
function allnumeric(uzip) {
var numbers = /^[0-9]+$/;
if (uzip.value.match(numbers)) {
return true;
} else {
alert('ZIP code must have numeric characters only');
uzip.focus();
return false;
}
}
function ValidateEmail(uemail) {
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if (uemail.value.match(mailformat)) {
return true;
} else {
alert("You have entered an invalid email address!");
uemail.focus();
return false;
}
}
//Gender Function
function validsex(umsex, ufsex) {
x = 0;
if (umsex.checked) {
x++;
}
if (ufsex.checked) {
x++;
}
if (x == 0) {
alert('Select Male/Female');
umsex.focus();
return false;
}
//Form Submit
else {
alert('Form Succesfully Submitted');
window.location.reload()
return true;
}
}
对每个单选按钮使用相同的名称。您使用fsex和msex