JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】

【JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】】是一篇介绍如何通过JavaScript实现表单验证的文章，其中利用到了策略模式，将验证数据与逻辑分离开来，以便简化代码，提高代码的可读性和可维护性。

一、数据与逻辑分离的思想

在传统的表单验证方式中，通常直接将验证逻辑写在表单元素的事件触发函数中，这样的方式非常不灵活，代码量也非常大，而且不具备可维护性和可扩展性。因此，在本文中提出了将验证数据与逻辑分离开来的思想。

具体实现方式是：将验证数据与验证逻辑分别定义在两个不同的对象中，然后通过一个验证函数来调用这两部分对象的内容。这种实现方式利用了JavaScript中函数是一等对象的特性，将验证数据和逻辑作为参数传递给函数，使得函数的调用变得非常灵活。

二、具体实现方法

在具体实现这种分离方式时，我们主要需要考虑到以下几个方面：

1. 验证数据的定义：在这个例子中，我们通过一个如下所示的对象来定义验证数据，包括了验证规则的名称、正则表达式和验证失败时的提示信息等内容。

var strategies = {
    isNonEmpty: function (value, errorMsg) {
        if (value === '') {
            return errorMsg;
        }
    },
    // 省略其它验证规则...
};

1. 验证逻辑的定义：在这个例子中，我们通过一个如下所示的对象来定义验证逻辑，其中每个属性都是一个函数，需要接受一个输入参数并进行对应的验证，如果验证失败则返回指定的错误提示信息。

var Validator = function () {
    this.cache = [];
};

Validator.prototype.add = function (dom, rule, errorMsg) {
    var ary = rule.split(':');
    this.cache.push(function () {
        var strategy = ary.shift();
        ary.unshift(dom.value);
        ary.push(errorMsg);
        return strategies[strategy].apply(dom, ary);
    });
};

Validator.prototype.start = function () {
    for (var i = 0, validatorFunc; validatorFunc = this.cache[i++];) {
        var errorMsg = validatorFunc();
        if (errorMsg) {
            return errorMsg;
        }
    }
};

1. 验证函数的封装：在这个例子中，我们通过封装的方式，将验证数据和验证逻辑分别传递到一个验证函数中，以便使用时直接调用该函数即可。

var validataFunc = function () {
    var validator = new Validator();

    validator.add(registerForm.userName, 'isNonEmpty', '用户名不能为空！');
    validator.add(registerForm.password, 'minLength:6', '密码长度不能少于6位！');
    validator.add(registerForm.phoneNumber, 'isMobile', '手机号码格式不正确！');
    validator.add(registerForm.emailAddress, 'isEmail', '电子邮件格式不正确！');

    var errorMsg = validator.start();
    return errorMsg;
};

var registerForm = document.getElementById('registerForm');
registerForm.onsubmit = function () {
    var errorMsg = validataFunc();
    if (errorMsg) {
        alert(errorMsg);
        return false;
    }
};

三、应用示例

下面，我们将通过两个具体的应用示例来说明如何使用这种分离方式进行表单验证。

示例一：用户名非空验证

如果我们需要进行一个简单的用户名非空验证，只需要在add方法中添加如下的代码即可：

validator.add(registerForm.userName, 'isNonEmpty', '用户名不能为空！');

这里，isNonEmpty就是已经定义好的验证规则之一，表示输入值不能为空。如果验证失败，则返回指定的错误提示信息“用户名不能为空！”。

示例二：多项验证组合

如果我们需要进行一个包括用户名、密码、手机号码和电子邮箱在内的多项验证组合，只需要在add方法中添加对应的验证规则即可。比如：

validator.add(registerForm.userName, 'isNonEmpty', '用户名不能为空！');
validator.add(registerForm.password, 'minLength:6', '密码长度不能少于6位！');
validator.add(registerForm.phoneNumber, 'isMobile', '手机号码格式不正确！');
validator.add(registerForm.emailAddress, 'isEmail', '电子邮件格式不正确！');

这里，minLength表示密码最小长度，isMobile表示手机号码格式验证，isEmail表示电子邮件格式验证。如果所有的验证都通过，则返回null，如果验证失败，则返回指定的错误提示信息。

四、总结

通过上面的两个应用示例，我们可以看到，利用数据与逻辑分离的思想和策略模式，可以大大简化表单验证代码的编写，提高代码的可读性和可维护性。不仅如此，这种方式还具备很高的扩展性，可以随时添加新的验证规则，而不需要修改已有的验证逻辑，非常方便和实用。

因此，如果您正在编写表单验证相关的JavaScript代码，建议您可以尝试使用这种分离方式，相信会对您的开发工作带来很大的帮助。