mixins 를 사용 하여 elementUI 폼 전역 검증 을 실현 하 는 해결 방법

ElementUi 를 사용 하여 프레임 워 크 를 구축 할 때 모두 가 전체적인 검증 을 어떻게 하 는 지 고려 한 적 이 있 을 것 입 니 다.복사 와 붙 여 넣 기 등 이 가장 귀 찮 기 때문에 개인 적 인 해결 방법 을 공유 하 겠 습 니 다.
검증 규칙
분석 규칙
일반 검증 규칙 은 주로 필수 적 인지,비어 있 지 않 은 지,그리고 매개 변수 유형 에 대한 검증 입 니 다.
이 조건 을 바탕 으로 우 리 는 사고방식 을 찾기 시작 했다.단일 필드 의 검증 은 다음 과 같다.

name: {
 required:     ,
 validator:      ,
 message:       (       ),
 trigger:     
}

순환 실현
일정한 규칙.한 물건 이 고정된 후에 그것 은 반드시 중복 적 으로 사용 할 수 있 고 빠르게 생 성 될 수 있 으 며 우 리 는 순환 으로 그것 을 실현 할 수 있다.
그러나 순환 으로 이 루어 지 려 면 데이터 규칙 이 필요 하 다.
정의 데이터 규칙
필요 한 필드 를 분석 하면 다음 과 같은 몇 가지 가 있 고 다른 것 은 자신의 수요 에 따라 증가 할 수 있다.

검 증 된 필드 이름 label

검 증 된 값 value

검 증 된 유형 type

필수 입력 여부

사용자 정의 규칙 규칙 규칙

마지막 으로 우리 가 얻 은 것 은 다음 필드 설정 목록 입 니 다:

fieldList: [
   {label: '  ', value: 'account', type: 'input', required: true},
   {label: '  ', value: 'password', type: 'password', required: true},
   {label: '  ', value: 'name', type: 'input', required: true},
   {label: '  ', value: 'sex', type: 'select', list: 'sexList', required: true},
   {label: '  ', value: 'avatar', type: 'input'},
   {label: '    ', value: 'phone', type: 'input'},
   {label: '  ', value: 'wechat', type: 'input'},
   {label: 'QQ', value: 'qq', type: 'input'},
   {label: '  ', value: 'email', type: 'input'},
   {label: '  ', value: 'status', type: 'select', list: 'statusList', required: true}
  ]

form 전체 필드 설정 참조:

 //     
  formInfo: {
  ref: null,
  data: {
   id: '', // *  ID
   account: '', // *    
   password: '', // *    
   name: '', // *    
   type: 2, // *    : 0:      1:      2:       
   sex: 0, // *  : 0:  1: 
   avatar: '', //   
   phone: '', //     
   wechat: '', //   
   qq: '', // qq
   email: '', //   
   status: 1 // *  : 0：  ，1：  (   1)',
   // create_user: '', //    
   // create_time: '', //     
   // update_user: '', //    
   // update_time: '' //     
  },
  fieldList: [
   {label: '  ', value: 'account', type: 'input', required: true},
   {label: '  ', value: 'password', type: 'password', required: true},
   {label: '  ', value: 'name', type: 'input', required: true},
   {label: '  ', value: 'sex', type: 'select', list: 'sexList', required: true},
   {label: '  ', value: 'avatar', type: 'input'},
   {label: '    ', value: 'phone', type: 'input'},
   {label: '  ', value: 'wechat', type: 'input'},
   {label: 'QQ', value: 'qq', type: 'input'},
   {label: '  ', value: 'email', type: 'input'},
   {label: '  ', value: 'status', type: 'select', list: 'statusList', required: true}
  ],
  rules: {},
  labelWidth: '120px'
  }

검증 방법 실현

순환 필드 목록 은 type 에 따라 알림 선택 이 비어 있 으 면 안 되 는 지,입력 이 비어 있 으 면 안 되 는 지 판단 합 니 다

필드 가 필요 하 다 면 사용자 정의 인증 여부 에 따라 인증 규칙 을 생 성 합 니 다

필드 는 필수 가 아니 라 사용자 정의 규칙 생 성 검증

이 있 습 니 다.

//        
 _initRules (formInfo) {
  const obj = {},
  fieldList = formInfo.fieldList
  //       
  for (let item of fieldList) {
  let type = item.type === 'select' ? '  ' : '  '

  if (item.required) {
   if (item.rules) {
   obj[item.value] = {
    required: item.required,
    validator: item.rules,
    trigger: 'blur'
   }
   } else {
   obj[item.value] = {
    required: item.required,
    message: ' ' + type + item.label,
    trigger: 'blur'
   }
   }
  } else if (item.rules) {
   obj[item.value] = {
   validator: item.rules,
   trigger: 'blur'
   }
  }
  }
  formInfo.rules = obj
 }

전역 설정 방법

mixin 설정 을 통 해 페이지 에서 사용(개인 적 으로 mixin 사용)

전역 방법 으로 설정 하여 페이지 에서 호출

vue 인 스 턴 스 에 걸 려 있 으 며,this 를 통 해 접근 할 수 있 습 니 다

마지막.
프로젝트 의 시스템 관리 모듈 에서 예시 코드 를 볼 수 있 습 니 다.
항목 주소
프로젝트 코드 주소
총결산
위 에서 말씀 드 린 것 은 mixins 를 사용 하여 element UI 폼 의 전체적인 검증 을 실현 하 는 해결 방법 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!