HTML文档验证表单用户输入JavaScript

  • Z时代
  • 2024-01-10
  • 分类：问答

我参加了一个在线编码测试，必须对表单输入进行数据验证（请参阅下面的问题描述）。根据问题描述，有人可以告诉我我的方法可能有什么问题。HTML文档验证表单用户输入JavaScript

这是我的代码

function solution() {  
    try {  
     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;  
     if (person) {  
      result = result && fName.match("[a-zA-Z ]+");  
      result = result && lName.match("[a-zA-Z ]+");  
      result = result && email.match("^[a-zAZ.]{1,64}@[a-zA-Z.]{1,64}$");  
     } else if (company) {  
      result = result && companyName.match("(.)+");  
      result = result && phone.match("^[\d]{3}-[\d]{3}-[\d]{4}$");  
     } else {  
      result = false;  
     }  
    } catch (ex) {  
     // Possible when a DOM Element isn't found  
     return false;  
    }  
    return result;  
}

input {  
    float: left;  
}  
input[type=text],  
input[type=button] {  
    clear: left;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
<input type="radio" id="type_person" name="type" value="person" />  
<input type="radio" id="type_company" name="type" value="company" checked/>  
<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="[email protected]" />  
<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" />

问题描述

您将得到一个HTML文档与表格，你的任务是验证它在JavaScript。该表单用于输入联系人数据，无论是个人还是公司。名为“type”的单选按钮控制着这个选择。只有一个这样的按钮（价值“人”或“公司”）将被检查。

如果“人”选项被选中，你应该验证以下字段（只有这些）：

FIRST_NAME和姓氏应该是非空。例如，“John”和“”（空格）是有效的，但“”不是。

电子邮件应按照一个简单的方案进行验证：它应该只包含一个@字符。此外，两个部分（@之前和之后）应该由至少一个且最多64个字符组成，其中只包含字母，数字和/或点（a-z，A-Z，0-9，。）。例如，“[email protected]”和“。@”。是有效的，但“@ example.com”不是。

如果“公司”选项被选中，你应该验证以下字段（只有这些）：

COMPANY_NAME应该是非空的;

电话应该只包含数字，破折号（ - ）和空格。它应该至少有六位数字。例如，“234-567-890”是有效的，但“12-3”不是。

写一个函数;函数解决方案（）;

给定一个表示HTML文档的DOM树，返回一个布尔值，该值指示本文档中的表单是否有效。

例如，假设与

标签中的以下内容的HTML文件： 

<input type="radio" id="type_person" name="type" value="person" checked/> 
    <input type="radio" id="type_company" name="type" value="company"/> 
    <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="[email protected]"/> 
    <input type="text" id="company_name" name="company_name" value=""/> 
    <input type="text" id="phone" name="phone" value="234-567-890"/> 
</form>

你的函数应返回true，而给出下列内容：

<form> 
    <input type="radio" id="type_person" name="type" value="person"/> 
    <input type="radio" id="type_company" name="type" value="company" checked/> 
    <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="[email protected]m"/> 
    <input type="text" id="company_name" name="company_name" value="ACME"/> 
    <input type="text" id="phone" name="phone" value="12-3"/> 
</form>

回答：

您遇到的问题可能与事实匹配如果不匹配，则返回null，这可能会导致你的麻烦。用简单的if语句测试它是否正常工作。

祝你好运。

$("#validateMe").on("click", function(){  
    if(solution() == true){  
    console.log("EVERYTHING OK!");  
    } else {  
    console.log("Validation FAILED!");  
    }  
});  
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;  
}

input {  
    float: left;  
}  
input[type=text],  
input[type=button] {  
    clear: left;  
}  
.validateFail {  
    background: red;  
    color: white;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
    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="[email protected]" />  
    <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" />

以上是 HTML文档验证表单用户输入JavaScript 的全部内容， 来源链接： utcz.com/qa/260823.html

回到顶部