JSFiddle - React, Tailwind, and code Playground

by springuper

HTML

<form action="/" method="post">
    <div>
        <label for="email">Email:</label>
        <input type="email" name="email" id="email" />
        <span class="tip"></span>
    </div>
    <div>
        <input type="submit" />
    </div>
</form>

JavaScript

YUI.add('field-validator', function (Y) {
    // 表单项验证组件
    Y.FieldValidator = function (ndField, validateFn) {
        var instance = this;
    
        // 声明事件，设置默认行为
        instance.publish('success', {
            emitFacade: true,
            defaultFn: function (e) {
                e.field.next('.tip').setHTML('ok');
            }
        });
        instance.publish('failure', {
            emitFacade: true,
            defaultFn: function (e) {
                e.field.next('.tip').setHTML('error');
            }
        });
    
        ndField.on({
            focus: function (e) {
                ndField.next('.tip').setHTML('');
            },
            blur: function (e) {
                if (validateFn(this.get('value'))) {
                    // 检查通过，触发成功事件
                    instance.fire('success', { field: ndField });
                } else {
                    // 检查未通过，触发失败事件
                    instance.fire('failure', { field: ndField });
                }
            }
        });
    };
    Y.augment(Y.FieldValidator, Y.EventTarget);
}, '1.0', {
    requires: ['event-custom']
});

YUI().use('node', 'field-validator', function (Y) {
    var validator = new Y.FieldValidator(Y.one('[name="email"]'), function (value) {
        return /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/.test(value);
    });
    validator.on('success', function (e) {
        // 阻止默认行为
        e.preventDefault();
        // 定制化代码
        if (e.field.get('value').indexOf('@yahoo.com') !== -1) {
            e.field.next('.tip').setHTML('换个邮箱吧，yahoo.com邮箱收不到优惠通知哦');
        }
    });
});