0

私のスキルを伸ばすために、JavaScriptを学び始めたばかりです。オブジェクトバリデーターを構築するためのjavascriptプロジェクトを自分に与えました。最初に作成したメソッドはcheckEmptyです。このメソッドは、空のフィールドをチェックします。しかし、理由がわからないので、この方法は機能しません。

これはhtmlフォームです

    <form name="myForm">

      <input type="text" class="required email" name='fName'/>
      <input type="text" class="required number"  name="lName"/>

       <input type="submit" value="submit" name="submit" id="submit"/>

     </form>

これは、バリデーターオブジェクトを呼び出したJavaScriptです。

    window.onload = function(){
 var validate = new FormValidator('myForm');    
 var submit = document.getElementById('submit');

     //this method won't work for internet explorer
 submit.addEventListener('click',function(){return checkLogic();},false);   
 var checkLogic = function(){
    validate.checkEmpty('fName');                   
};  

   }

これはFormvalidationと呼ばれるjavascriptオブジェクトです

   function FormValidator(myForm){
  //check ur error in stack overflow;
   this.myForm = document.myForm;   

    this.error = '';

    if(typeof this.myForm === 'undefined'){

      alert('u did not give the form name ');
      return;
     }


    }

//このメソッドは、フィールドが空かどうかをチェックします

    FormValidator.prototype.checkEmpty = function(oEmpty){  
     var oEmpty =  this.myForm.oEmpty;
     if(oEmpty.value === '' || oEmpty.value.length === 0){
    this.error += "Please Enter a valid Error Message \n";

      }
     FormValidator.printError(this.error);

     };

このメソッドはエラーを出力します。

     FormValidator.printError = function(oData){
       alert(oData);
     };
4

2 に答える 2

1

コードをフォーマットした後、何が悪かったのかを見つけるのがずっと簡単になりました。HTMLコードの入力フィールドを検証しようとしていると思います。

checkEmpty（）メソッドの1行目で、コードが初めて頭に浮かびます。

FormValidator.prototype.checkEmpty = function(oEmpty){
    var oEmpty =  this.myForm.oEmpty;
    if(oEmpty.value === '' || oEmpty.value.length === 0){
        this.error += "Please Enter a valid Error Message \n";

    }
    FormValidator.printError(this.error);
};

最初の行では、1行目のvaroEmptyステートメントを使用してメソッド引数oEmptyを非表示にしています。

メソッドやメンバーの使いすぎなど、他にもいくつかの問題があります。次のコードはおそらくあなたが望んでいたものです：

1.）index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
    <form name="myForm">
        <input id="fName" name='fName' type="text"/>
        <input id="lName" name="lName" type="text"/>
        <input id="submit" name="submit" type="submit" value="submit"/>
    </form>
    <script src="main.js"></script>
</body>
</html>

2.）main.js

function InputFieldValidator(inputFieldName){
    this.inputFieldName = inputFieldName;
    this.inputField = document.getElementById(this.inputFieldName);
    if(this.inputField === 'undefined'){
        alert('No input field: ' + this.inputFieldName);
    }
}

InputFieldValidator.prototype.validate = function(){
    if(this.inputField.value === ''){
        alert('Please enter valid text for input field: ' + this.inputFieldName);
    }
};

window.onload = function(){
    var fNameValidator = new InputFieldValidator('fName'),
        lNameValidator = new InputFieldValidator('lName'),
        submitButton = document.getElementById('submit');

    submitButton.addEventListener('click', function (){
        fNameValidator.validate();
        lNameValidator.validate();
    });
};

必要に応じて、入力フィールドバリデーターを上からフォームバリデーターで簡単にラップできます。

于 2013-02-28T14:58:16.920 に答える
0

これは、次のように関数を定義する正しい方法です。

var FormValidator = function(myForm){ /* function body */ };
    FormValidator.prototype.checkEmpty = function(oEmpty){ /* function body */ };

それよりも、オブジェクトをインスタンス化した後、あなたがFormValidator.checkEmpty(value)したように呼び出すことができます。

于 2013-02-28T13:23:47.820 に答える