【发布时间】：2022-02-01 15:53:31
【问题描述】：
您好，当我按下验证时，我必须制作一个验证表单，它应该在控制台中显示为真或假。我可以使用 Jquery 2.1。
给你一个带有表单的 HTML 文档，你的任务是用 JavaScript 验证它。
该表格用于输入个人或公司的联系数据。名为“类型”的单选按钮控制此选择。将检查一个这样的按钮（值为“person”或“company”）。
如果“人”选项被选中，您应该验证以下字段（并且仅这些）：
first_name 和 last_name 不应为空。例如，“John”和“”（空格）是有效的，但“”不是。 email 应该是非空的，并且根据一个简单的方案进行验证：它应该只包含一个 @ 字符。此外，两个部分（@ 之前和之后）都应由至少一个且最多 64 个字符组成，仅包含字母、数字和/或点（a-z、A-Z、0-9、.）。例如，“john@example.com”和“.@”。是有效的，但“@example.com”不是。 如果选中“公司”选项，您应该验证以下字段（并且仅这些字段）：
company_name 不能为空； phone 应该是非空的，并且只包含数字、破折号 (-) 和空格。它应该至少有六位数字。例如，“234-567-890”有效，但“12-3”无效。 写一个函数
function solution();
给定一个表示 HTML 文档的 DOM 树，返回一个布尔值，指示该文档中的表单是否有效。
这是我的代码
function solution() {
var person = $("#type_person").is(":checked");
var company = $("#type_company").is(":checked");
var fName = $("#first_name").val();
var lName = $("#last_name").val();
var email = $("#email").val();
var companyName = $("#company_name").val();
var phone = $("#phone").val();
var result = true;
$("input").removeClass("validateFail");
if (person) {
if (fName.match(/[a-zA-Z ]+/) == null){
$("#first_name").addClass("validateFail");
result = false;
}
if(lName.match(/[a-zA-Z ]+/) == null){
$("#last_name").addClass("validateFail");
result = false;
}
if(email.match(/^[a-zAZ.]{1,64}@[a-zA-Z.]{1,64}$/) == null ){
$("#email").addClass("validateFail");
result = false;
}
} else if (company) {
if(companyName.match(/(.)+/) == null){
$("#company_name").addClass("validateFail");
result = false;
}
if(phone.match(/^[\d]{3}-[\d]{3}-[\d]{4}$/) == null){
$("#phone").addClass("validateFail");
result = false;
}
} else {
return false; // Possible when a DOM Element isn't found
}
return result;
}
$("#validateMe").on("click", function(){
if(solution() == true){
console.log("EVERYTHING OK!");
} else {
console.log("Validation FAILED!");
}
});
和html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="js.js"></script>
<style>
input {
float: left;
}
input[type=text],
input[type=button] {
clear: left;
}
</style>
</head>
<body>
<form>
PERSON: <input type="radio" id="type_person" name="type" value="person" /> <br>
COMPANY:<input type="radio" id="type_company" name="type" value="company" checked/> <br>
<input type="text" id="first_name" name="first_name" value="John" />
<input type="text" id="last_name" name="last_name" value="Doe" />
<input type="text" id="email" name="email" value="john@example.com" />
<input type="text" id="company_name" name="company_name" value="ACME" />
<input type="text" id="phone" name="phone" value="12-3" />
<input type="button" value="Validate" id="validateMe" />
</form>
</body>
我应该在那里改变什么才能工作？它实际上在控制台中没有做任何事情。
【问题讨论】：
标签： javascript html jquery