Verification of complex forms
1.0.0
Когда мы занимаемся серверными системами управления, мы часто сталкиваемся с очень сложными формами:
- Слишком много элементов формы
- Отображение разных элементов формы в разных типах форм
- Некоторые элементы формы отключают проверку при определенных условиях.
- Каждый элемент формы также будет иметь другую настраиваемую логику, например поля ввода, в которые можно вставлять переменные шаблона, отображать количество вводимых символов, загружать и отображать изображения, а также форматированный текст . . .
- В этой сложной ситуации завершите проверку и отправку формы.
- Вы можете просмотреть конкретные примеры: в примере опущены многие тривиальные функции, и для демонстрации решения сохраняется только общая структура сложной формы.
vueВся логика отображения и скрытия элементов формы, проверки, сбора данных, отправки, настройки и другой логики объединена.
- В зависимости от типа формы используйте
v-if/v-showдля отображения и скрытия элементов формы.- В пользовательской проверке
elementuiопределите, проверяется ли элемент формы на основе типа формы.- В зависимости от типа формы получите разные данные и отправьте их в разные интерфейсы.
- Вся остальная пользовательская логика
vue может легко содержать 2000 строк.На самом деле, легко подумать о разделении нескольких подформ соответствующих типов по разным типам форм . Но на практике я все же столкнулся со многими проблемами: проверка родительско-дочерних форм, получение общих отправленных данных и т. д., и обобщил набор решений:
Все дочерние компоненты должны содержать два метода validate и getData для вызова родительского компонента.
validate метод Используется для проверки элементов формы собственных компонентов и возврата объекта- promise .
vaildate ( ) {
// 返回`elementUI`表单验证的结果（为`promise`对象）
return this . $refs [ "ruleForm" ] . validate ( ) ;
} ,
getDataПредоставление данных из дочерних компонентов
getData ( ) {
// 返回子组件的form
return this . ruleForm ;
} , Используйте шаблон стратегии для хранения и получения ref на подчиненную форму (метод, используемый для получения подчиненной формы) и функцию отправки . Многие суждения if-else опущены.
data: {
// type和ref名称的映射
typeRefMap : {
1 : "message" ,
2 : "mail" ,
3 : "apppush"
} ,
// type和提交函数的映射。不同类型，接口可能不同
typeSubmitMap : {
1 : data => alert ( `短信模板创建成功${ JSON . stringify ( data ) } ` ) ,
2 : data => alert ( `邮件模板创建成功${ JSON . stringify ( data ) } ` ) ,
3 : data => alert ( `push模板创建成功${ JSON . stringify ( data ) } ` )
} ,
} submitИспользуется для проверки формы родительско-дочернего компонента, получения общих данных и вызова функции отправки текущего типа для отправки данных.
Поскольку метод
validateформыelementUIможет возвращать результатpromise, вы можете использовать характеристикиpromiseдля обработки проверки родительских и дочерних форм. Например, функцияthenможет вернуть другой объектpromise, аcatchможет получитьrejectиPromise.allиз всехthenнаходящихся над ним.
// 父表单验证通过才会验证子表单，存在先后顺序
submitForm ( ) {
const templateType = this . typeRefMap [ this . indexForm . type ] ;
this . $refs [ "indexForm" ]
. validate ( )
. then ( res => {
// 父表单验证成功后，验证子表单
return this . $refs [ templateType ] . vaildate ( ) ;
} )
. then ( res => {
// 全部验证通过
// 获取整体数据
const reqData = {
// 获取子组件数据
... this . $refs [ templateType ] . getData ( ) ,
... this . indexForm
} ;
// 获取当前表单类型的提交函数，并提交
this . typeSubmitMap [ this . indexForm . type ] ( reqData ) ;
} )
. catch ( err => {
console . log ( err ) ;
} ) ;
} , submitForm1 ( ) {
const templateType = this . typeRefMap [ this . indexForm . type ] ;
const validate1 = this . $refs [ "indexForm" ] . validate ( ) ;
const validate2 = this . $refs [ templateType ] . vaildate ( ) ;
// 父子表单一起验证
Promise . all ( [ validate1 , validate2 ] )
. then ( res => {
// 都通过时，发送请求
const reqData = {
... this . $refs [ templateType ] . getData ( ) ,
... this . indexForm
} ;
this . typeSubmitMap [ this . indexForm . type ] ( reqData ) ;
} )
. catch ( err => {
console . log ( err ) ;
} ) ;
} , Резюме: я встречал подобные сложные формы во многих проектах и использовал множество решений. Здесь я суммировал относительно аккуратное и простое решение. Конечно, существует множество других решений. Например , метод отправки данных можно поместить в каждый подкомпонент, а данные элемента общедоступной формы передаются в подкомпонент через
propsдля отправки . Если есть другие более простые решения, вы можете прокомментировать или отправитьissueнаgithub
Не по теме: прочитав собственный отчет фронтенд-архитектора: вопросы и ответы Н о пути роста фронтенд-инженера, это меня очень вдохновило. Когда вы запутались в своем техническом направлении и перспективах, или когда вы жалуетесь, что ваш проект слишком низок, или когда вы жалуетесь, что выполняете повторяющуюся работу каждый день, или когда вы каждый день ошеломлены бесконечным появлением новых технологий , Вы могли бы также серьезно взглянуть на свой проект .
Отталкиваясь от болевых точек рабочих процессов и проектов , вы быстрее добьетесь прогресса в практике, подведении итогов и решении практических задач .
Мои чувства по поводу написания этой статьи: сложность выражения этих вещей
>>техническая трудность, содержащаяся в самой статье
