赞
踩
在使用微信小程序vant组件库时,发现没有from组件,在填写表单类验证的时候非常麻烦,那么如何简易实现一个form表单
主要技术:微信小程序、vant、html、js
使用van-field组件自定义实现表单结构,通过formData绑定整体表单数据,error绑定错误信息,setValue实现双向数据绑定
<van-cell-group> <van-field value="{{ formData.name }}" label="姓名" placeholder="请输入姓名" border="{{ true }}" data-field="name" error-message="{{error.name}}" bind:input="setValue" /> <van-field value="{{ formData.age }}" label="年龄" placeholder="请输入年龄" border="{{ true }}" type="number" data-field="age" error-message="{{error.age}}" bind:input="setValue" /> <van-field value="{{ formData.phone }}" label="手机号" placeholder="请输入手机号" border="{{ true }}" type="number" data-field="phone" error-message="{{error.phone}}" bind:input="setValue" /> <van-field value="{{ formData.desc }}" label="留言" placeholder="请输入留言" border="{{ true }}" type="textarea" autosize="{{true}}" data-field="desc" error-message="{{error.desc}}" bind:input="setValue" /> <van-field value="{{ formData.desc }}" label="自定义表单" placeholder="请输入留言" border="{{ true }}" type="textarea" autosize="{{true}}" data-field="desc" error-message="123" bind:input="setValue" > <view slot="input">123</view> </van-field> <van-field value="{{ formData.sms }}" center clearable label="短信验证码" placeholder="请输入短信验证码" border="{{ false }}" use-button-slot data-field="sms" error-message="{{error.sms}}" bind:input="setValue" > <van-button slot="button" size="small" type="primary"> 发送验证码 </van-button> </van-field> <van-button type="primary" round block bind:click="submitForm">提交</van-button> </van-cell-group> <!-- <my-form title="123"></my-form> -->
数据data结构如下,rules自定义验证规则
data: { formData: { name: '', age: '', phone: '', sms: '', desc: '' }, rules: { name: [ { required: true, message: '请输入姓名', triiger: 'change' } ], phone: [ { required: true, message: '请输入手机号' }, { validator: validatePhone, message: '手机号格式不正确' } ] }, error: { name: '', age: '', phone: '', desc: '', sms: '' } },
自定义验证方法如下,通过循环整体表单的key,再去查找是否有验证规则,在循环规则去进行相关验证,验证失败把验证规则的错误信息添加到error中,反之清楚改验证字段错误信息
validateForm(validatorKeys) { const keys = validatorKeys || Object.keys(this.data.formData) keys.forEach(key => { const rule = this.data.rules[key] if(rule) { const value = this.data.formData[key] for(let i=0;i<rule.length;i++) { const ruleItem = rule[i] if(ruleItem.required) { this.setData({ [`error.${key}`]: value.length > 0 ? '' : ruleItem.message }) if(!value) { break } } else if(ruleItem.validator) { const flag = ruleItem.validator(value) this.setData({ [`error.${key}`]: flag ? '' : ruleItem.message }) if(!flag) { break } } } } }) },
验证触发时机,已增加change为例,在触发值改变的时候去判断该字段是否有change验证,有就触发自定义验证规则,具体功能可在详细添加
setValue(e) {
// console.log(e)
const value = e.detail
const field = e.currentTarget.dataset.field
this.setData({
[`formData.${field}`]: value
})
const rule = this.data.rules[field]
if(rule) {
const flag = rule.some(item => item.triiger === 'change')
flag && this.validateForm([field])
}
},
可以把相应功能封装为一个组件,然后形成复用,这样就跟平常使用一些组件库的form表单差不多一致。菜鸟一枚,感谢观看!
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。