建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
創(chuàng)新互聯(lián)小程序教程：微信小程序WeUI·Form
Form
Form表單組件，結(jié)合Cell、Checkbox-group、Checkbox組件等做表單校驗(yàn)。
在平遠(yuǎn)等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供做網(wǎng)站、成都網(wǎng)站設(shè)計(jì) 網(wǎng)站設(shè)計(jì)制作按需網(wǎng)站建設(shè),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站設(shè)計(jì),營(yíng)銷型網(wǎng)站,成都外貿(mào)網(wǎng)站建設(shè)公司,平遠(yuǎn)網(wǎng)站建設(shè)費(fèi)用合理。
示例代碼：
{
"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
表單輸入
獲取驗(yàn)證碼
{{date}}
開關(guān)
標(biāo)題文字
文本框
文本域
0/200
選擇
{{countryCodes[countryCodeIndex]}}
選擇
{{accounts[accountIndex]}}
國(guó)家/地區(qū)
{{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: '美國(guó)'},
{name: 'CHN', value: '中國(guó)', checked: 'true'},
{name: 'BRA', value: '巴西'},
{name: 'JPN', value: '日本'},
{name: 'ENG', value: '英國(guó)'},
{name: 'TUR', value: '法國(guó)'},
],
date: "2016-09-01",
time: "12:01",
countryCodes: ["+86", "+80", "+84", "+87"],
countryCodeIndex: 0,
countries: ["中國(guó)", "美國(guó)", "英國(guó)"],
countryIndex: 0,
accounts: ["微信號(hào)", "QQ", "Email"],
accountIndex: 0,
isAgree: false,
formData: {
},
rules: [{
name: 'radio',
rules: {required: true, message: '單選列表是必選項(xiàng)'},
}, {
name: 'checkbox',
rules: {required: true, message: '多選列表是必選項(xiàng)'},
}, {
name: 'qq',
rules: {required: true, message: 'qq必填'},
}, {
name: 'mobile',
rules: [{required: true, message: 'mobile必填'}, {mobile: true, message: 'mobile格式不對(duì)'}],
}, {
name: 'vcode',
rules: {required: true, message: '驗(yàn)證碼必填'},
}, {
name: 'idcard',
rules: {required: true, message: 'idcard必填'},
}]
},
methods: {
radioChange: function (e) {
console.log('radio發(fā)生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發(fā)生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 發(fā)生選擇改變，攜帶值為', e.detail.value);
this.setData({
countryCodeIndex: e.detail.value
})
},
bindCountryChange: function(e) {
console.log('picker country 發(fā)生選擇改變，攜帶值為', e.detail.value);
this.setData({
countryIndex: e.detail.value
})
},
bindAccountChange: function(e) {
console.log('picker account 發(fā)生選擇改變，攜帶值為', 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: '校驗(yàn)通過'
})
}
})
}
}
});屬性列表
| 屬性 | 類型 | 默認(rèn)值 | 必填 | 說(shuō)明 |
|---|---|---|---|---|
| ext-class | string | 否 | 添加在組件內(nèi)部結(jié)構(gòu)的class，可用于修改組件內(nèi)部的樣式 | |
| rules | object |
否 | 表單校驗(yàn)的規(guī)則列表，格式下面詳細(xì)介紹 | |
| models | object | 否 | 需要校驗(yàn)的表單的數(shù)據(jù) | |
| bindsuccess | eventhandler | 否 | 校驗(yàn)成功觸發(fā)的事件，detail是{trigger}，trigger的值是change或validate，表示是輸入改成觸發(fā)的校驗(yàn)還是主動(dòng)調(diào)用的validate接口 | |
| bindfail | eventhandler | 否 | 校驗(yàn)失敗觸發(fā)的事件，detail是{trigger, errors}，trigger的值是change或validate，表示是輸入改成觸發(fā)的校驗(yàn)還是主動(dòng)調(diào)用的validate接口。errors是錯(cuò)誤的字段列表。 |
rules是表單校驗(yàn)的規(guī)則列表，列表每一項(xiàng)表示一個(gè)字段的校驗(yàn)規(guī)則，注意，必須要在Cell或Checkbox-group組件聲明prop屬性，表單校驗(yàn)規(guī)則才生效，表單校驗(yàn)規(guī)則的定義如下：
| 屬性 | 類型 | 默認(rèn)值 | 必填 | 說(shuō)明 |
|---|---|---|---|---|
| name | string | 是 | 校驗(yàn)的字段名 | |
| rules | array/object | 是 | 校驗(yàn)的規(guī)則，如果有多項(xiàng)，則是數(shù)組 | |
| rules.message | string | 否 | 校驗(yàn)失敗時(shí)候提示的文字 | |
| rules.validator | function | 否 | 自定義校驗(yàn)函數(shù)，接受rule, value, param, models四個(gè)參數(shù)，其中rule格式為{name: '字段名', message: '失敗信息'}, value是字段值，param是校驗(yàn)參數(shù)，models是form組件的models屬性。函數(shù)返回錯(cuò)誤提示，表示校驗(yàn)失敗，錯(cuò)誤提示會(huì)通過回調(diào)返回給開發(fā)者 | |
| rules.[rule] | string | 否 | rule是變量，表示內(nèi)置的校驗(yàn)規(guī)則名稱，比如required，則校驗(yàn)規(guī)則對(duì)象為{name: "fieldName", rules: {required: true}}，下面會(huì)詳細(xì)介紹所有的內(nèi)置規(guī)則 |
內(nèi)置校驗(yàn)規(guī)則
| 規(guī)則名 | 參數(shù) | 說(shuō)明 |
|---|---|---|
| required | 是否必填 | |
| minlength | number | 最小長(zhǎng)度 |
| maxlength | number | 最大長(zhǎng)度 |
| rangelength | [number, number] | 長(zhǎng)度范圍，參數(shù)為[最小長(zhǎng)度， 最大長(zhǎng)度] |
| bytelength | number | 字節(jié)長(zhǎng)度 |
| range | [number, number] | 數(shù)字的大小范圍 |
| min | number | 最小值限制 |
| max | number | 最大值限制 |
| mobile | 手機(jī)號(hào)碼校驗(yàn) | |
| 電子郵件校驗(yàn) | ||
| url | URL鏈接地址校驗(yàn) | |
| equalTo | string | 相等校驗(yàn)，參數(shù)是另外一個(gè)字段名 |
接口
validate
validate接口接受類型為function的callback，callback有isValid和errors兩個(gè)參數(shù)，isValid表示是否校驗(yàn)通過，errors在校驗(yàn)失敗的時(shí)候的值為失敗的字段列表。
validateField
validateField接口接受2個(gè)參數(shù)， 第一個(gè)是字段名，第二個(gè)是類型為function的callback，callback有isValid和errors兩個(gè)參數(shù)，isValid表示是否校驗(yàn)通過，errors在校驗(yàn)失敗的時(shí)候的值為失敗的字段列表。
Slot
| 名稱 | 描述 |
|---|---|
| 默認(rèn) | 內(nèi)容slot |
當(dāng)前名稱：創(chuàng)新互聯(lián)小程序教程：微信小程序WeUI·Form
標(biāo)題URL：http://www.dlmjj.cn/article/dhgopss.html
