微信小程序实现表单校验功能

小程序SDK版本 1.4

表单校验之难

如果要问微信小程序最难实现的公共业务是什么?应该是表单校验,没有之一。原因如下:

表单组件在数量上达到11个,居各类组件之首。当然幸运的是,并不是所有的都需要校验。
而这些组件操作方式多样,可分为滑动、(多行)输入、点击、点击+滑动。
即使是同一个组件,因为业务场景不同就会有不同的校验规则。
更麻烦的是,这些组件之间经常还会联动或者关联校验。

但是,作为一个非简单静态页面,有着较多用户交互的小程序,表单校验又是一个非常常用的功能:登录、注册、新增、编辑…

总而言之:表单组件的多样性 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('=')[0]
  let ruleValue = validator[i].split('=')[1]
  let rule = validators[ruleName].rule || /.*/
  if ('function' === typeof rule) {
   rule.call(context, value, ruleValue) ? '' : validators[ruleName].msg
  } else {
   rule.test(value) ? '' : 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?'warn':'success'}}" 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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序 input表单与redio及下拉列表的使用实例

    微信小程序 input表单与redio及下拉列表的使用实例 一个简单的预约类型的表单,效果 主要代码: <form bindsubmit="bindSave"> <view class="form-box"> <view class="row-wrap"> <view class="label">联系人</view> <view class="labe

  • JS模拟超市简易收银台小程序代码解析

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <script type="text/javascript"> // 1.编写一个程序,计算增加后的工资.要求基本工资大于等于1000元,增加20%的工资;若小于1000元且大于等于800元,则增加15%,若小于800元,则增加10%工资. var basepay = parseInt(prompt("请输入您的工资:"));//初始工资 var pay1 = basepay+(basepay*0.2

  • 微信小程序 获取javascript 里的数据

    微信小程序 获取javascript 里的数据 wxml如何获取js里的数据 例: wxml里: <text id="twl">{{txt}}</text> 通过上面的{{txt}}可以对应获取js里data下定义的txt的值 js里: data: { txt:{} } 首先在data里定义一个"容器"txt:{},{}内为空代表是从别的地方传值进去,当然{}里也可以直接写数据,如txt:{'123'},上面的wxml获取了就相当于 <

  • 微信小程序媒体组件详解(视频,音乐,图片)

    今天主要是简单的讲一下小程序当中的媒体组件,媒体组件包括:视频,音乐,图片等. 先来看看效果图: 1.图片Image <!-- scaleToFill:不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 widthFix:宽度不变,高度自动变化,保持原图宽高比不变 aspectFill:保持纵横比缩放图片,只保证图片的短边能完全显示出来. 也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取. aspectFit: 保持纵横比缩放图片,使图片的长边能完全显示出来.

  • 微信小程序之发送短信倒计时功能

    点击后 代码 <form bindsubmit="formSubmit" bindreset="formReset"> <view class="fidpas"> <input type="number" class="fidpas_inp"placeholder-class="lgin_place" placeholder="请输入手机号&quo

  • 微信小程序之页面拦截器的示例代码

    场景 小程序有52个页面,其中13个页面无需任何身份,另外39个页面需要系统角色.对于这39个页面,如果微信用户没有系统角色,则跳转到登录页. 是否有系统角色信息需要通过异步请求来获取. 需求分析&实现 对需求进行抽象,其实要的就是一个过滤器,对小程序页面的访问进行过滤,符合条件的通过,不符合条件进行其他处理. 使用过php的laravel框架的童鞋,肯定一下子就联想到了laravel框架的http中间件: HTTP 中间件提供一个方便的机制来过滤进入应用程序的 HTTP 请求,例如,Larav

  • 微信小程序实现表单校验功能

    小程序SDK版本 1.4 表单校验之难 如果要问微信小程序最难实现的公共业务是什么?应该是表单校验,没有之一.原因如下: 表单组件在数量上达到11个,居各类组件之首.当然幸运的是,并不是所有的都需要校验. 而这些组件操作方式多样,可分为滑动.(多行)输入.点击.点击+滑动. 即使是同一个组件,因为业务场景不同就会有不同的校验规则. 更麻烦的是,这些组件之间经常还会联动或者关联校验. - 但是,作为一个非简单静态页面,有着较多用户交互的小程序,表单校验又是一个非常常用的功能:登录.注册.新增.编辑

  • 微信小程序实现表单验证提交功能

    本文实例为大家分享了微信小程序实现表单验证提交的具体代码,供大家参考,具体内容如下 效果图: 说明:点击一键预约提交表单时我们需要验证一些必填项以及它们的格式.微信小程序表单验证跟vue的input双向绑定不同,微信小程序只能通过button按钮提交form表单,然后通过监听表单提交方法去获取提交的数据. <!-- 表单 --> <view class="forms">   <view class="container">    

  • 微信小程序实现表单验证

    微信小程序的表单验证,供大家参考,具体内容如下 需要用到一个插件WxValidat.js 传送门 在需要使用的page js文件下导入 import WxValidate from '../../utils/WxValidate.js' 主要内容 WXML内容 <form bindsubmit="formSubmit"> <view class="weui-cells__title">用户名</view> <view cla

  • 微信小程序实现表单验证源码

    本文实例为大家分享了微信小程序实现表单验证的具体代码,供大家参考,具体内容如下 效果图 点击预约设计弹出表单 城市,面积不能输入,只能选择 点击位置获取当前定位 源码: Wxml <!--pages/designerList/designerDetail.wxml--> <view>     <view class='tc m_t20'>     <image src='{{urlhttp + designerDetail.thumb}}' class='imgl

  • 微信小程序-form表单提交代码实例

    效果 html代码 <form bindsubmit="formSubmit" bindreset="formReset"> <view class="section section_gap"> <view class="section__title">是否公开信息</view> <switch name="isPub" /> </view&

  • 使用JavaScript进行表单校验功能

    文本框校验 以下是文本框的校验步骤. 1.获取待校验的文本框value值, 2.对value值设置判定条件,使用if语句或switch语句实现. 3. 若满足条件,则校验通过,返回值为true. 4. 若不满足条件则返回值为false,替换文本输出校验的提示信息. 5. 表单获取多个验证的返回值,做逻辑运算,将参数传递给表单form的onsubmit事件. 6. 在input中调用校验函数,我使用的是onblur事件触发校验函数. 下拉框校验 下拉框的校验相比文本框略有不同,下拉框中option

  • 微信小程序绑定手机号获取验证码功能

    微信小程序验证码获取方式,代码如下所示: <!-- 绑定手机号 --> <view class='content'> <form bindsubmit="formSubmit"> <view class='phone-box'> <text class='phone'>手机号</text> <input name="phone" type='number' placeholder=&quo

  • 微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】

    本文实例讲述了微信小程序实现发送模板消息功能.分享给大家供大家参考,具体如下: 一.获取access_token access_token是接口调用的凭证,目前有效期为两个小时,需要定时刷新,重复获取将导致上次获取的access_token失效.(注:不建议每次调用需要access_token的接口,都去重新获取access_token,会导致失败) 获取access_token的接口地址: https://api.weixin.qq.com/cgi-bin/token?grant_type=c

  • 微信小程序常用表单组件的使用详解

    目录 1.常用表单组件 1.1button 1.2checkbox 1.3input 1.4label 1.5form 1.6radio 1.7slider 1.8switch 1.9textarea 2.实训小案例–问卷调查 1.常用表单组件 1.1 button <button>为按钮组件,是常用的表单组件之一,用于事件的触发以及表单的提交.其属性表如下所示. 代码示例: <view class="demo-box"> <view class=&quo

随机推荐