Комментарии (17)

1. 

   stardust_kid

   27.07.2016 13:42

   #9717944

   Советую также взглянуть на React Formal. Обеспечивает валидацию форм на основе схем. Есть много преднастроенных и можно писать свои. Очень гибкая конфигурация и разработчик старается не навязывать своих подходов.
   

   Код формы выглядит примерно так:

   var Form = require('react-formal')
     , yup = require('yup')
   
   // if we are using a different set of inputs
   // we can set some defaults once at the beginning
   Form.addInputTypes(
     require('react-formal-inputs'))
   
   var defaultStr = yup.string().default('')
   
   var modelSchema = yup.object({
   
       name: yup.object({
         first: defaultStr.required('please enter a first name'),
         last:  defaultStr.required('please enter a surname'),
       }),
   
       dateOfBirth: yup.date()
         .max(new Date(), "You can't be born in the future!"),
   
       colorId: yup.number().nullable()
         .required('Please select a color')
     });
   
   var form = (
     <Form
       schema={modelSchema}
       defaultValue={modelSchema.default()}
     >
       <div>
         <label>Name</label>
   
         <Form.Field name='name.first' placeholder='First name'/>
         <Form.Field name='name.last' placeholder='Surname'/>
   
         <Form.Message for={['name.first', 'name.last']}/>
       </div>
   
       <label>Date of Birth</label>
       <Form.Field name='dateOfBirth'/>
       <Form.Message for='dateOfBirth'/>
   
       <label>Favorite Color</label>
       <Form.Field name='colorId' type='select'>
         <option value={null}>Select a color...</option>
         <option value={0}>Red</option>
         <option value={1}>Yellow</option>
         <option value={2}>Blue</option>
         <option value={3}>other</option>
       </Form.Field>
       <Form.Message for='colorId'/>
   
     <Form.Button type='submit'>Submit</Form.Button>
   </Form>)
   
   React.render(form, mountNode);
   

   
   

1. 

   SoloFeeD

   27.07.2016 14:14

   #9718034

   Зачем передавать в в функцию все поля с данными для проверки конкретного поля?

   
   

   1. 

      theWaR_13

      27.07.2016 14:15

      #9718038

      Честно говоря, я тоже не совсем понимаю, зачем автор компонента это сделал. Возможно, существуют какие-то кейсы, когда это необходимо.

   
   

   1. 

      shir

      27.07.2016 14:19

      #9718076

      +4

      Первое что приходит на ум — в зависимости от другого поля (например, чекбокса), проверять заполнено ли поле.

   
   

   1. 

      crocodile2u

      27.07.2016 14:22

      #9718088

      +2

      пример:
      dropdown-box «Откуда узнали про наш проект?» Последняя опция — «свой вариант». Если ее выбираешь, появляется текстовое поле. Это текстовое поле нужно проверить на заполненность только если в dropdown выбрано «свой вариант».

   
   

   1. 

      VasilioRuzanni

      27.07.2016 14:53

      #9718186

      Еще кейс — «дата начала не может быть позже даты окончания [чего-либо]» и ее более сложные вариации.

      
      

      1. 

         SoloFeeD

         27.07.2016 14:54

         #9718192

         Та кейсов можно много придумать, так какая разница плодить в одном методе ифы, или сделать отдельно конкретный метод и передавать туда те поля, которые нужны для валидации?

   
   

   1. 

      Miraage

      27.07.2016 15:11

      #9718238

      Просто люди не знают, зачем нужен паттерн Mediator.

1. 

   yociyavi

   27.07.2016 14:44

   #9718158

   Пользуюсь https://validatejs.org/ Либа не зависит ни от фреймворка, ни от платформы.

1. 

   n0ne

   27.07.2016 17:42

   #9718682

   А мне больше нравится redux-form… и её material-ная версия

1. 

   indestructable

   27.07.2016 21:50

   #9719128

   +1

   Считаю, что валидация форм — это тупиковый путь, который годится только для простейших приложений. Валидировать нужно бизнес сущности, и обязательно на стороне сервера (а на стороне клиента — опционально).
   В сложном приложении бывает несколько форм для одной сущности, разные правила в зависимости от ролей пользователя, инлайн редактирование в гридах — делать валидацию форм — это значит дублировать код.
   Валидация сущностей — это бизнес логика, и подход к ней должен быть соответствующий.

   
   

   1. 

      theWaR_13

      27.07.2016 22:32

      #9719206

      На данный момент я занимаюсь разработкой достаточно большого приложения. И вот взять даже такую простую вещь, как форма логина. Без валидаций пользователь может отправить данные на сервер даже не заполнив поля ввода. А учитывая тот факт, что нагрузки на сервер могут быть достаточно серьезными, зачем лишний раз его перегружать его бесполезными запросами? Да, возможно где-то код и будет дублироваться, но принцип DRY стоит использовать разумно, а не фанатично пытаясь избежать любого повторения.
      Кроме того, не все же делают какие-то большие приложения. Смысл данной статьи рассказать про один конкретный способ валидации форм, возможно, сэкономив кому то время.

      
      

      1. 

         indestructable

         27.07.2016 23:25

         #9719256

         Вы, наверное, не совсем правильно меня поняли. Я не призываю отказаться от клиентской валидации, но она должна быть дополнением к серверной, в идеале использовать один и тот же код.

         
         

         1. 

            stardust_kid

            28.07.2016 13:48

            #9720486

            В таких случаях, принято говорить: спасибо, Кэп.

1. 

   QtRoS

   28.07.2016 08:17

   #9719478

   Функция проверки могла бы выглядеть вот так:
   

   function isGoogleEmail(values, value) {
     return !value || value.indexOf('gmail.com') != -1
   }
   

   
   Лаконичность и краткость ценится всегда, независимо от фреймвока и языка, а писать 'if (x) return true else return false' — уровень университета.

   
   

   1. 

      neoxack

      28.07.2016 11:55

      #9720004

      +1

      И читабельность ухудшается раз так в 5

   
   

   1. 

      stardust_kid

      28.07.2016 13:53

      #9720508

      В даннном случае возвращаемое плохо читабельно. И реальной пользы, кроме демонстрации вашего умения использовать Булевы операторы, тут нет. Так что «уровень университета» — это про ваш пример.
      Но по сути данная проверка бесполезна, поскольку у Gmail есть еще несколько доменов кроме «gmail.com», и никто не знает какие они добавят завтра. А еще есть gmail на собственном домене.