// 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 "htmlcode">

// 部分代码示例
// 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" size="16" />
 </view>
 </view>
 ...
</form>
// page.js
valid(e) {
 this.setData({
 [e.currentTarget.dataset.name]: e.detail.value
 })
 validate(e, this)
}



上面的代码中省略了校验错误提示和非空校验。详细代码请查看GitHub仓库：
https://github.com/yalishizhude/miniprogram-seed.git
总结
写代码最然总是要抱着最美好的想法，但同时也要做着最坏的打算。尤其是面对一些底层框架限制的时候。
面对这种情况，我们要从核心需求出发，把能抽出公用的东西都出来，同时保证可配置、可扩展。
好的的架构师不但喜欢未开垦的处女地，也应不惧布满杂石乱草的荒野~
欢迎到评论区留言交流：https://github.com/yalishizhude/webclub-discuss/issues/1
为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。