Question

请我开始学习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);
     };

Answer 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行的var oEmpty语句隐藏方法参数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();
    });
};

如果您愿意，可以在表单验证器中轻松地从上面包装输入字段验证器。

Answer 2

这是以这种方式定义函数的正确方法：

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

然后，在实例化对象后，您可以像调用FormValidator.checkEmpty(value)一样调用。

javascript表单验证对象

2 个答案: