基本的 javascript 表单验证 - 使用相同的功能验证相同的输入类型

Question

我一直使用 jQuery validate() 来处理表单，但最近在升级到我们的 XMPie 软件后遇到了问题（我们进行有针对性的通信）。

新版本的 XMPie 需要 jQuery 1.10.2，这是 validate() 不支持的版本，所以我手动进行验证。

我可以通过为每个输入编写单独的函数来轻松验证，但这意味着至少要重写一些代码以针对特定的输入名称或 ID。

我想知道的是为什么我不能为特定的输入类型（例如简单的文本字段）编写一个通用函数并让输入调用 focusout() 上的函数，将自身作为参数传递？

如果我有两个文本输入，“fullName”和“userName”，为什么我不能使用

$(document).ready(function () {
    var inputName = "";
    var inputValue = "";
    var inputAlert = "";
    $("input").focusout(function () {
        inputIdentify(this);
        console.log(inputName);
        inputGetValue(this);
        console.log(inputValue);
        if (this.type == "text") {
            console.log("YES");
            textValidate(inputName, inputValue);
        }
    });

    function inputIdentify(theInput) {
        inputName = theInput["name"];
        console.log(inputName);
        return inputName;
    }

    function inputGetValue(theInput) {
        inputValue = theInput["value"];
        return inputValue;
    }

    function textValidate(theInput, inputValue) {
        console.log(theInput,inputValue);
        var letters = /^[A-Za-z ]+$/;
        if (inputValue.match(letters)) {
            $(theInput).addClass("correct");
            return true;
        } else {
            $(theInput).removeClass("correct");
            $(theInput).addClass("incorrect");

            // alert('Username must have alphabet characters only');
            $(inputName).focus();
            return false;
        }
    }
});

要删除和添加简单的 css 类（彩色边框）来指示问题字段？

感谢和问候，

马尔科姆

Answer 1

您没有将正确的参数传递给textValidate()。您将inputName 作为theInput 传递，但textValidate() 使用$(theInput) 访问输入元素。您应该将 this 作为该参数传递：

textValidate(this, inputValue);

另外，您对全局变量的使用是糟糕的设计。由于inputIdentify() 和inputGetValue() 返回值，您应该将返回值分配给局部变量，而不是让这些函数设置全局变量。

   $("input").focusout(function () {
        var inputName = inputIdentify(this);
        console.log(inputName);
        var inputValue = inputGetValue(this);
        console.log(inputValue);
        if (this.type == "text") {
            console.log("YES");
            textValidate(this, inputValue);
        }
    });

    function inputIdentify(theInput) {
        var inputName = theInput["name"];
        console.log(inputName);
        return inputName;
    }

    function inputGetValue(theInput) {
        var inputValue = theInput["value"];
        return inputValue;
    }