Рамка для проверки формы Javascript: запрос на обзор

Ответ 1

Мне это очень нравится, он сохраняет мой html в чистоте, и возможность создавать пользовательские валидаторы великолепна. Одна вещь, которую я добавил, - это короткая рука для привязки проверки и отправки функций и ее завершение как плагин jQuery:

if (jQuery) {
    (function($)
    {
        $.regula = function(formId, callback) 
        {
            regula.bind();

            $("#" + formId).submit(function() 
            {
                var validationResults = regula.validate();

                if (validationResults.length > 0)
                {
                    if (callback)
                        callback(validationResults);

                    return false;
                }

                return true;
            });
        };
    })(jQuery);
}

Infact, я просто blogged об этом, так как я впечатлен тем, насколько он чист и легок. Я все еще собираюсь провести время, проходя через ваш источник, чтобы узнать, как вы его достигли, но это отличный старт:)

Что касается интеграции вашей инфраструктуры, я работаю в основном с ASP.NET MVC, и было бы интересно посмотреть, как она переводит логику проверки на стороне сервера в ограничения на стороне клиента. Что-то, что я мог бы рассмотреть в следующем месяце или около того.

Ответ 2

Я использую совершенно другой подход: в современных структурах, таких как React или Angular, у вас всегда есть состояние формы где-то в javascript, а не в состояниях ввода DOM (DOM - это просто слой с данными). И я думаю, что это должно быть так, потому что независимо от того, какие причудливые компоненты вы используете для создания своей формы, всегда есть объект, который содержит все состояния. С этой точки зрения естественным подходом является простое использование JSR-303 (без аннотаций) для проверки этого объекта (поскольку JSR-303 предоставляет вам такую гибкость) и заполняет ошибки обратно в DOM. Позвольте мне показать вам пример:

import React, { Component } from "react";
import ReactDOM from "react-dom";

import validator, {
  Collection,
  All,
  Required,
  Optional,
  NotBlank,
  Length,
  Email
} from "@stopsopa/validator";

class App extends Component {
  constructor(...args) {
    super(...args);
    this.state = {
      data: {
        name: "",
        email: "",
        comments: []
      },
      errors: {},
      validate: false
    };
  }
  onSubmit = async e => {
    e.preventDefault();

    const errors = await validator(
      this.state.data,
      new Collection({
        name: new Required([new NotBlank(), new Length({ min: 3 })]),
        email: new Required([new NotBlank(), new Email()]),
        comments: new All([new NotBlank(), new Length({ min: 10 })])
      })
    );
    this.setState({
      errors: errors.getTree(),
      validate: true
    });

    if (!errors.count()) {
      console.log("send data to server", this.state.data);
    }
  };
  onChange = (name, value) => {
    console.log(name, value);
    this.setState(state => ({
      ...state,
      data: { ...state.data, ...{ [name]: value } }
    }));
  };
  addComment = () =>
    this.setState(state => {
      const comments = state.data.comments;
      comments.push("");
      const newState = { ...state };
      newState.data.comments = comments;
      return newState;
    });
  deleteComment = i =>
    this.setState(state => {
      const newState = { ...state };
      state.data.comments.splice(i, 1);
      return newState;
    });
  editComment = (i, value) => {
    this.setState(state => {
      const newState = { ...state };
      state.data.comments[i] = value;
      return newState;
    });
  };
  render() {
    const s = this.state;
    console.log("state", JSON.stringify(s, null, 4));
    return (
      <form onSubmit={this.onSubmit}>
        <label>
          name:
          <input
            value={s.data.name}
            onChange={e => this.onChange("name", e.target.value)}
          />
        </label>
        {s.validate && s.errors.name && (
          <div className="error">{s.errors.name}</div>
        )}
        <br />
        <label>
          email:
          <input
            value={s.data.email}
            onChange={e => this.onChange("email", e.target.value)}
          />
        </label>
        {s.validate && s.errors.email && (
          <div className="error">{s.errors.email}</div>
        )}
        <div>
          comments:{" "}
          <a onClick={this.addComment} href="javascript:void(0)">
            add
          </a>
          {s.data.comments.map((m, i) => (
            <div style={{ border: "1px solid red" }} key={i}>
              <textarea
                rows="2"
                value={m}
                onChange={e => this.editComment(i, e.target.value)}
              />
              <a
                onClick={() => this.deleteComment(i)}
                href="javascript:void(0)"
              >
                delete
              </a>
              {s.validate && s.errors.comments && s.errors.comments[i] && (
                <div className="error">{s.errors.comments[i]}</div>
              )}
            </div>
          ))}
        </div>
        <br />
        <input type="submit" value="submit" />
      </form>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

пример жизни https://codesandbox.io/s/ymwky9603j