微信小程序 WeUI·Form

2024-05-29 08:20| 来源: 网络整理| 查看: 265

Form

Form表单组件，结合Cell、Checkbox-group、Checkbox组件等做表单校验。

示例代码：{ "component": true, "usingComponents": { "mp-toptips": "../components/toptips/toptips", "mp-cells": "../components/cells/cells", "mp-cell": "../components/cell/cell", "mp-checkbox": "../components/checkbox/checkbox", "mp-checkbox-group": "../components/checkbox-group/checkbox-group", "mp-form": "../components/form/form" } } Form 表单输入获取验证码 {{date}} 开关标题文字文本框文本域 0/200 选择 {{countryCodes[countryCodeIndex]}} 选择 {{accounts[accountIndex]}} 国家/地区 {{countries[countryIndex]}} 阅读并同意《相关条款》确定 Component({ data: { showTopTips: false, radioItems: [ {name: 'cell standard', value: '0', checked: true}, {name: 'cell standard', value: '1'} ], checkboxItems: [ {name: 'standard is dealt for u.', value: '0', checked: true}, {name: 'standard is dealicient for u.', value: '1'} ], items: [ {name: 'USA', value: '美国'}, {name: 'CHN', value: '中国', checked: 'true'}, {name: 'BRA', value: '巴西'}, {name: 'JPN', value: '日本'}, {name: 'ENG', value: '英国'}, {name: 'TUR', value: '法国'}, ], date: "2016-09-01", time: "12:01", countryCodes: ["+86", "+80", "+84", "+87"], countryCodeIndex: 0, countries: ["中国", "美国", "英国"], countryIndex: 0, accounts: ["微信号", "QQ", "Email"], accountIndex: 0, isAgree: false, formData: { }, rules: [{ name: 'radio', rules: {required: true, message: '单选列表是必选项'}, }, { name: 'checkbox', rules: {required: true, message: '多选列表是必选项'}, }, { name: 'qq', rules: {required: true, message: 'qq必填'}, }, { name: 'mobile', rules: [{required: true, message: 'mobile必填'}, {mobile: true, message: 'mobile格式不对'}], }, { name: 'vcode', rules: {required: true, message: '验证码必填'}, }, { name: 'idcard', rules: {required: true, message: 'idcard必填'}, }] }, methods: { radioChange: function (e) { console.log('radio发生change事件，携带value值为：', e.detail.value); var radioItems = this.data.radioItems; for (var i = 0, len = radioItems.length; i < len; ++i) { radioItems[i].checked = radioItems[i].value == e.detail.value; } this.setData({ radioItems: radioItems, [`formData.radio`]: e.detail.value }); }, checkboxChange: function (e) { console.log('checkbox发生change事件，携带value值为：', e.detail.value); var checkboxItems = this.data.checkboxItems, values = e.detail.value; for (var i = 0, lenI = checkboxItems.length; i < lenI; ++i) { checkboxItems[i].checked = false; for (var j = 0, lenJ = values.length; j < lenJ; ++j) { if(checkboxItems[i].value == values[j]){ checkboxItems[i].checked = true; break; } } } this.setData({ checkboxItems: checkboxItems, [`formData.checkbox`]: e.detail.value }); }, bindDateChange: function (e) { this.setData({ date: e.detail.value, [`formData.date`]: e.detail.value }) }, formInputChange(e) { const {field} = e.currentTarget.dataset this.setData({ [`formData.${field}`]: e.detail.value }) }, bindTimeChange: function (e) { this.setData({ time: e.detail.value }) }, bindCountryCodeChange: function(e){ console.log('picker country code 发生选择改变，携带值为', e.detail.value); this.setData({ countryCodeIndex: e.detail.value }) }, bindCountryChange: function(e) { console.log('picker country 发生选择改变，携带值为', e.detail.value); this.setData({ countryIndex: e.detail.value }) }, bindAccountChange: function(e) { console.log('picker account 发生选择改变，携带值为', e.detail.value); this.setData({ accountIndex: e.detail.value }) }, bindAgreeChange: function (e) { this.setData({ isAgree: !!e.detail.value.length }); }, submitForm() { this.selectComponent('#form').validate((valid, errors) => { console.log('valid', valid, errors) if (!valid) { const firstError = Object.keys(errors) if (firstError.length) { this.setData({ error: errors[firstError[0]].message }) } } else { wx.showToast({ title: '校验通过' }) } }) } } });

属性列表属性类型默认值必填说明ext-classstring否添加在组件内部结构的class，可用于修改组件内部的样式rulesobject否表单校验的规则列表，格式下面详细介绍modelsobject否需要校验的表单的数据bindsuccesseventhandler否校验成功触发的事件，detail是{trigger}，trigger的值是change或validate，表示是输入改成触发的校验还是主动调用的validate接口bindfaileventhandler否校验失败触发的事件，detail是{trigger, errors}，trigger的值是change或validate，表示是输入改成触发的校验还是主动调用的validate接口。errors是错误的字段列表。

rules是表单校验的规则列表，列表每一项表示一个字段的校验规则，注意，必须要在Cell或Checkbox-group组件声明prop属性，表单校验规则才生效，表单校验规则的定义如下：

属性类型默认值必填说明namestring是校验的字段名rulesarray/object是校验的规则，如果有多项，则是数组rules.messagestring否校验失败时候提示的文字rules.validatorfunction否自定义校验函数，接受rule, value, param, models四个参数，其中rule格式为{name: '字段名', message: '失败信息'}, value是字段值，param是校验参数，models是form组件的models属性。函数返回错误提示，表示校验失败，错误提示会通过回调返回给开发者rules.[rule]string否rule是变量，表示内置的校验规则名称，比如required，则校验规则对象为{name: "fieldName", rules: {required: true}}，下面会详细介绍所有的内置规则内置校验规则规则名参数说明required是否必填minlengthnumber最小长度maxlengthnumber最大长度rangelength[number, number]长度范围，参数为[最小长度，最大长度]bytelengthnumber字节长度range[number, number]数字的大小范围minnumber最小值限制maxnumber最大值限制mobile手机号码校验email电子邮件校验urlURL链接地址校验equalTostring相等校验，参数是另外一个字段名接口validate

validate接口接受类型为function的callback，callback有isValid和errors两个参数，isValid表示是否校验通过，errors在校验失败的时候的值为失败的字段列表。

validateField

validateField接口接受2个参数，第一个是字段名，第二个是类型为function的callback，callback有isValid和errors两个参数，isValid表示是否校验通过，errors在校验失败的时候的值为失败的字段列表。

Slot名称描述默认内容slot

【本文地址】

微信小程序 WeUI·Form

微信小程序 WeUI·Form

今日新闻

推荐新闻