/.*/
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)
}总结
以上就是微信小程序之表单校验功能实现的实例的详细内容，更多请关注php中文网其它相关文章！
小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。
关键词：微信小程序之表单校验技巧完成的案例