WeChat 애플릿의 양식 확인 기능 구현 예

위챗 미니 프로그램에서 구현하기 가장 어려운 공공사업은 무엇인가요? 이 글은 주로 WeChat 애플릿이 양식 확인 기능을 구현하는 방법을 소개합니다. 관심 있는 친구는

Mini 프로그램 SDK 버전 1.4

양식 확인 어려움

을 참조하세요. 위챗 미니 프로그램에서 구현하기 가장 어려운 공공사업이 무엇인지 묻고 싶습니다. 그것은 양식 확인이어야 하며, 다른 것은 없습니다. 그 이유는 다음과 같습니다.

폼 컴포넌트의 개수가 11개에 달해 모든 컴포넌트 중 1위를 차지합니다. 다행히도 모두 확인할 필요는 없습니다.
이러한 구성 요소에는 다양한 조작 방법이 있으며 슬라이딩, (멀티 라인) 입력, 클릭, 클릭 + 슬라이딩으로 나눌 수 있습니다.
동일한 구성요소라도 비즈니스 시나리오에 따라 검증 규칙이 다를 수 있습니다.
더 문제는 이러한 구성 요소가 종종 연결되거나 검증된다는 것입니다.
…
단순하지 않은 정적 페이지, 사용자 상호 작용이 많은 작은 프로그램으로 양식 확인은 매우 일반적인 기능입니다: 로그인, 등록, 신규 추가, 편집…

간단히: 양식의 다양성 컴포넌트 X 검증규칙의 다양성 = 복잡한 공공사업

이렇게 어려운 문제를 어떻게 해결할 수 있을까요?

컴포넌트화 시도

최근 프론트엔드 개발 트렌드에 주목한다면 다음을 달성하기 위한 "컴포넌트화"를 반드시 떠올릴 것입니다.

각 양식 컴포넌트의 보기, 스타일 및 검증 로직을 캡슐화합니다. 그런 다음 직접 호출하세요.

하지만 상황은 그리 간단하지 않은 것 같습니다.

n개의 기본 구성요소를 추상화하고, n개의 검증 규칙을 추가한 다음, 구성요소 간 관계의 n(완전 배열)을 곱하는 것을 고려하면 복잡성은 최소한 n³에 도달합니다.

그리고 각 구성 요소의 검증 실패 또는 성공 여부를 상위 구성 요소에 알려야 오류 메시지가 표시되거나 다음 단계를 수행할 수 있습니다.

이 방법은 문제를 해결하지 못할 뿐만 아니라 실제로 이러한 공개 양식 구성 요소를 너무 복잡하고 혼란스럽게 결합시킵니다.

비컴포넌트화를 시도해보세요

원래 아이디어가 작동하지 않으니, 출발점으로 돌아가 핵심을 추상화해야 하는 것이 무엇인지 살펴보겠습니다.

뷰 레이어의 요소 스타일과 로직 레이어의 확인 규칙, 이 두 가지에 지나지 않습니다.

네이티브 폼 구성 요소를 캡슐화하면 복잡성이 크게 증가한다고 위에서 언급했습니다. 간단히 버리면 복잡성이 즉시 n²로 줄어들 수 있습니다.

그러나 동시에 우리는 통일된 스타일을 유지해야 합니다. 이를 흔히 일관된 스타일이라고 부릅니다.

예를 들어 입력 상자의 높이, 오류 프롬프트 표시 방법, 글꼴 크기 및 색상 등이 있습니다.

스타일 클래스를 공개 스타일 파일 form.wxss에 작성한 다음 필요할 때 가져오거나 전역으로 가져올 수도 있습니다.

// form.wxss
.form {
 display: block;
 font-size: 28rpx;
 position: relative;
}
.form-line {
 background-color: #fff;
 border-bottom: 1px solid #e5e5e5;
 font-size: 34rpx;
 height: 96rpx;
 line-height: 96rpx;
 display: flex;
 padding: 0 31rpx;
}
.form-title {
 box-sizing: border-box;
 background-color: #efefef;
 color: #838383;
 font-size: 28rpx;
 padding: 31rpx;
 min-height: 90rpx;
}
...

사용할 때는 해당 요소에 해당 스타일을 추가하기만 하면 됩니다. 예를 들면 다음과 같습니다.

// xxx.wxml
<form class="form">
 <view class="form-title">请输入手机号</view>
 <view class="form-line">
  <label class="label">手机</label>
  <view class="form-control">
   <input class="f-1 va-m input" />
  </view>
 </view>
 ...
</form>

그렇다면 확인 규칙과 구성 요소 연결 사이에는 두 가지 문제만 남습니다.

검증 규칙은 이상적으로는 확장 가능하고 구성 가능해야 합니다.

확장 가능. 비즈니스가 성장함에 따라 기존 규칙을 수정하지 않고도 새로운 확인 규칙을 추가할 수 있습니다.

구성 가능. 각 양식 구성 요소에 대해 서로 다른 단일 또는 다중 유효성 검사 규칙을 개별적으로 구성할 수 있습니다.

어떻게 정의할 수 있나요? 통일된 형태를 사용하면 됩니다. 예:

/*
统一的格式：
[规则名]: {
 rule: [校验方式]
 msg: [错误信息]
}
*/
const validators = {
 // 简单的校验用正则
 required: {
  rule: /.+/,
  msg: '必填项不能为空'
 },
 // 复杂的校验用函数
 same: {
  rule (val='', sVal='') {
   return val===this.data[sVal]
  },
  msg: '密码不一致'
 }
 ...
}

어떻게 구성할 수 있나요? 구성은 배열과 같은 형태를 지원하며, 통합된 기능을 사용하여 이러한 검증 규칙을 순서대로 읽고 하나씩 검증합니다.

구성된 규칙은 기본 양식 구성 요소에 있어야 하며 구성 요소의 값은 이벤트 개체를 통해서만 얻을 수 있습니다.

확인을 위해 이벤트를 직접 바인딩하면 상위 페이지에서 값을 얻을 수 없으므로 이벤트를 상위 페이지에 바인딩하여 값을 전달하고 이벤트 개체 및 실행 환경을 전달하여 처리하는 것이 가장 좋습니다. :

/*
校验函数部分代码
e 事件对象
context 页面对象函数执行的上下文环境
*/
let validate = (e, context) => {
 // 从事件对象中获取组件的值
 let value = (e.detail.value || '').trim()
 // 从事件中获取校验规则名称
 let validator = e.currentTarget.dataset.validator ? e.currentTarget.dataset.validator .split(',') : []
 // 遍历规则进行校验
 for (let i = 0; i < validator.length; i++) {
  let ruleName = validator[i].split(&#39;=&#39;)[0]
  let ruleValue = validator[i].split(&#39;=&#39;)[1]
  let rule = validators[ruleName].rule || /.*/
  if (&#39;function&#39; === typeof rule) {
   rule.call(context, value, ruleValue) ? &#39;&#39; : validators[ruleName].msg
  } else {
   rule.test(value) ? &#39;&#39; : validators[ruleName].msg
  }
 }
 ...
}

호출도 쉽습니다. 고정된 형식에 따라 해당 스타일을 추가하고 검증 규칙을 구성한 후 검증 기능을 호출하면 됩니다.

// 部分代码示例
// page.wxml
<form>
 <!-- 一个表单组件 -->
 <view class="form-line">
  <label class="label">授权手机</label>
  <view class="form-control">
   <!-- 校验规则：必须填写，且为电话号码 -->
   <input maxlength="11" class="f-1 va-m input" bindblur="validate" type="number" data-name="phone" data-validator="required,phone" confirm-type="next" value="{{phone}}" />
   <!-- 错误图标 -->
   <icon wx:if="{{form.phone!==undefined}}" type="{{form.phone?&#39;warn&#39;:&#39;success&#39;}}" size="16" />
  </view>
 </view>
 ...
</form>
// page.js
valid(e) {
 this.setData({
  [e.currentTarget.dataset.name]: e.detail.value
 })
 validate(e, this)
}

요약

위 내용은 WeChat 애플릿의 양식 확인 기능 구현 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!