Question

我开始在Javascript中学习OOP，我的导师不是很好，我正在学习一本非常糟糕的书。（http://www.amazon.com/JavaScript-The-Web-Technologies-Series/dp/0538748877/ref=cm_cr_pr_product_top）但是我正在尽我所能使用这个网站和任何可能的资源。那说！我们正在讨论OOP，我正在尝试创建一个简单的面向对象的表单验证器，但是我将输入值传递给对象内部的方法时遇到了问题。如果我的措辞错误，我道歉。这是我的代码。

function validate() {
    this.isEmpty = function(value) {
        if(value == "" || value.length < 1 || value == null) {
            // testing alert
            alert(value);
            return false;
        }
    }
}

我的HTML

    <form action="" method="get">
      <label for="name">Name</label>
      <input type="text" id="name" name="name">
      <input type="submit" value="submit" id="submit">
    </form>

基本上我没有得到的是如何将字段“name”的输入值传递给对象？我的后续工作将是如何传递多个输入？例如，如果我想检查“name”和另一个名为“email”的字段是否为空？

任何人都可以了解我将如何在常规JS中执行此操作？我是否以正确的方式尝试这种方式？我不知道，因为这是我第一次尝试面向对象。

Answer 1

当内联调用JavaScript函数时，“this”指向包含DOM元素。

因此，如果您要验证以下标记：

<input name="test" onblur="validate();">

然后你的验证函数可以获取其容器的值：

function validate(){
  alert(this.value); //the value of input field "test"

  //to get the name of this input:
  alert(this.name);
}

我个人不会这样编码，因为代码对其上下文很敏感。相反，我使用这种风格：

<input name="test" onblur="validate(this);">

function validate(d){
  alert(d.value); //value
  alert(d.name); //name
}

如您所见，该对象被显式传入，您可以看到在调用堆栈中，“this”直接放在标记中。稍后，如果您想在其他位置使用相同的功能，您可以通过手动获取对象并将其传入：

<input name="test" id="test">

<button onclick="validate(document.getElementById('test'));">Validate</button>

除非它是内联回调（闭包）函数，否则我避免使用模糊的“this”指针来提高代码的可读性。

Answer 2

我不建议在学习javascript时使用框架。在学习了javascript之后，你应该深入研究框架，而不是现在。所以我不会告诉任何关于香草的事情。

您可以通过多种方式获取输入值。最好的方法是通过id获得它们的价值：

var name = document.getElementById("name").value

所以你有它，分配给 name 变量的输入值。之后，您可以传递该变量以验证功能并查看结果。

您还希望捕获表单的提交事件，并在表单提交之前进行验证。为此：

var form = document.getElementsByID('form'); //you should assign id 'form' to the form element

form.addEventListener("submit", function(e) {
    e.preventDefault(); //do not submit the form
    var name = document.getElementById("name").value
    validate(name);
});

Answer 3

首先，了解在进行OO时要尝试建模的概念非常重要。你在谈论一个“验证者”概念，但也许它还不够具体。你到底在做什么验证？想一想，“验证器”对象表明它实际上非常灵活，并且是一个可以帮助验证许多不同模型的对象。如果这不是你的想法，那就更具体了。例如，您可以将类命名为 MyFormValidator（这只是一个示例）。

这是一个特定验证器类的一个非常简单的示例，它将form作为参数并实现公共validate方法以按需触发验证。这个例子很简单，不太灵活。有很多改进空间，例如从验证器中删除UI问题（如消息），但我不想让示例过于复杂。

*注意：_成员标识私人成员。您可以使用模块模式和/或特权函数强制实现真正的隐私，但我更喜欢命名约定。*

function MyFormValidator(form) {
    this.form = form;
    this._errors = [];
}

MyFormValidator.prototype = {
    constructor: MyFormValidator,

    validate: function () {
        var errors = this._errors,
            name = this._valueOf('name');

        //clear previous errors
        errors.length = 0;

        if (this._isEmpty(name)) {
            errors.push('The name is mandatory');
        }

        return !errors.length;
    },

    errors: function () { return this._errors.slice() },

    _valueOf: function (fieldName) {
        return this.form.querySelector('[name="' + fieldName + '"]').value;
    },

    _isEmpty: function (value) {
        return value == "" || value.length < 1 || value == null;
    }
};

//Setting up form validation
var form = document.querySelector('form'),
    validator = new MyFormValidator(form);

form.addEventListener('submit', function (e) {
    if (!validator.validate()) {
        e.preventDefault(); //prevent submit
        alert(validator.errors());
    }
});

DEMO：http://jsfiddle.net/Q2d5c/

Answer 4

这样就完成了：

<script type="text/javascript">
function MsgAlert()
{          
   var value    =   document.getElementById('abc').value;
   alert(value);       
}   
</script>   

<input id="abc"></input>

<button onClick="MsgAlert();">PassValue</button>

如何将输入值传递给Javascript中的方法？

4 个答案: