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 방법상위-하위 구성 요소 양식 유효성 검사, 전체 데이터 가져오기 및 현재 유형 제출 기능을 호출하여 데이터 제출 에 사용됩니다.
elementUI양식 검증의validate메소드는promise결과를 반환할 수 있으므로promise의 특성을 사용하여 상위 및 하위 양식 검증을 처리할 수 있습니다. 예를 들어then함수는 또 다른promise객체를 반환할 수 있고,catch그 위에 있는 모든then의reject및Promise.all얻을 수 있습니다.
// 父表单验证通过才会验证子表单，存在先后顺序
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통해 하위 구성 요소에 전달됩니다 . 다른 더 간단한 해결책이 있는 경우 github에issue언급하거나 제출하실 수 있습니다github
주제 외: 프론트엔드 설계자의 자신의 이야기: 프론트엔드 엔지니어의 성장 경로에 대한 N의 질문과 답변을 읽은 후, 그것은 나에게 많은 영감을 주었습니다. 기술적인 방향과 전망이 혼란스러울 때, 프로젝트의 수준이 너무 낮다고 불평할 때, 매일 반복적인 작업을 하고 있다고 불평할 때, 또는 나날이 끝없이 나타나는 새로운 기술에 압도당할 때 , 당신은 당신의 프로젝트를 진지하게 살펴볼 수도 있습니다.
업무 프로세스와 프로젝트의 페인 포인트 부터 시작하여 실제 문제를 연습하고, 요약하고, 해결하는 데 있어 더 빠른 진전을 이룰 수 있습니다 .
이 글을 쓰면서 느낀 점 : 이런 것들을 표현하는 어려움
>>글 자체에 담긴 기술적인 어려움
