2017-12-18 10 views
0

私はオンラインでのコード化テストを行ったので、フォーム入力用のデータ検証をしなければなりませんでした(問題の説明は下記を参照)。問題の説明に基づいて、誰かが私のアプローチに間違っているかもしれないことを教えてください。HTML文書フォームの検証ユーザー入力JavaScript

フォームで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" />

問題の説明。このフォームは、個人または会社の連絡先データを入力するために使用されます。 "type"というラジオボタンは、この選択を制御します。そのようなボタン(値 "person"または "company")の1つだけがチェックされます。

「人」オプションがチェックされている場合は、次のフィールド(およびこれらのみ)を検証する必要があります:

FIRST_NAMEとLAST_NAMEが空でなければなりません。たとえば、 "John"と ""(スペース)は有効ですが、 ""は有効ではありません。

電子メールの検証は、単純なスキームに従って行う必要があります。さらに、両方の部分(@の前後)は、文字、数字および/またはドット(a-z、A-Z、0-9 ,.)のみからなる少なくとも1文字から最大64文字で構成する必要があります。たとえば、 "[email protected]"と "。@。"有効ですが、 "@ example.com"は有効ではありません。

「会社」オプションがチェックされている場合は、次のフィールド(およびこれらのみ)を検証する必要があります:

COMPANY_NAMEが空である必要があります。

電話機は、数字、ダッシュ( - )、スペースのみで構成する必要があります。少なくとも6桁の数字が必要です。たとえば、 "234-567-890"は有効ですが、 "12-3"は有効ではありません。

関数を作成します。関数の解();

HTMLドキュメントを表すDOMツリーがある場合、このドキュメントのフォームが有効かどうかを示すブール値を返します。例えば

タグ内に次の内容のHTMLドキュメントを与えられた:

<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]"/> 

    <input type="text" id="company_name" name="company_name" value="ACME"/> 

    <input type="text" id="phone" name="phone" value="12-3"/> 

</form> 
:次の内容を与えながら、あなたの関数は、trueを返す必要があります

<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> 

答えて

1

あなたが抱えている問題は、おそらく問題を引き起こしているfalseでない一致がない場合は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" />

関連する問題