演示:
插件介绍
该插件是参考 jQuery Validate 封装的,为小程序表单提供了一套常用的验证规则,包括手机号码、电子邮件验证等等,同时提供了添加自定义校验方法,让表单验证变得更简单。
插件下载
GitHub地址:https://github.com/skyvow/wx-extend/blob/master/docs/components/validate.md
在下载的文件中找到WxValidate.js,其文件的位置在wx-extend/src/assets/plugins/wx-validate/WxValidate.js,将它拷贝到你所需要的文件目录下,这边我就放在utils文件下。
插件使用
1)在需要页面的js中引入WxValidate.js:
import WxValidate from '../../utils/WxValidate.js'
2)页面中对表单组件的绑定:
主要就是对input框加入value值的绑定
<form bindsubmit="formSubmit">
<view class="wide-info">
<view class="wide-info-title">
<text>基本信息</text>
</view>
<view class="wide-info-list">
<!--社团名称-->
<view class="info-list">
<view class="info-list-1eft">
<text>社团名称</text>
<text class="left-star">*</text>
</view>
<view class="info-list-right">
<input name='name' placeholder='请输入' value='{
{form.name}}' class="inputName" />
</view>
</view>
<!--社团地址--->
<view class="info-list">
<view class="info-list-1eft">
<text>社团地址</text>
<text class="left-star">*</text>
</view>
<view class="info-list-right&