举报投诉联系我们 手机版 热门标签 鳄鱼CMS
您的位置:鳄鱼CMS > 微信小程序 form 微信小程序 WeUI·Form

微信小程序 form 微信小程序 WeUI·Form

2023-04-30 15:31

微信小程序 form 微信小程序 WeUI·Form

微信小程序 form 微信小程序 WeUI·Form

微信小程序 form

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"
  }
}
<mp-toptips msg="{{error}}" type="error" show="{{error}}"></mp-toptips>
<view class="page" xmlns:wx="http://www.w3.org/1999/xhtml">
    <view class="page__hd">
        <view class="page__title">Form</view>
        <view class="page__desc">表单输入</view>
    </view>
    <view class="page__bd">
        <mp-form id="form" rules="{{rules}}" models="{{formData}}">
            <mp-cells title="单选列表项">
                <mp-checkbox-group prop="radio" multi="{{false}}" bindchange="radioChange">
                    <mp-checkbox wx:for="{{radioItems}}" wx:key="value" label="{{item.name}}" value="{{item.value}}" checked="{{item.checked}}"></mp-checkbox>
                </mp-checkbox-group>
            </mp-cells>
            <mp-cells title="复选列表项">
                <mp-checkbox-group prop="checkbox" multi="{{true}}" bindchange="checkboxChange">
                    <mp-checkbox wx:for="{{checkboxItems}}" wx:key="value" label="{{item.name}}" value="{{item.value}}" checked="{{item.checked}}"></mp-checkbox>
                </mp-checkbox-group>
            </mp-cells>

            <mp-cells title="表单" footer="底部说明文字底部说明文字">
                <mp-cell prop="qq" title="qq" ext-class="">
                    <input bindinput="formInputChange" data-field="qq" class="weui-input" placeholder="请输入qq"/>
                </mp-cell>
                <mp-cell prop="mobile" title="手机号" ext-class=" weui-cell_vcode">
                    <input bindinput="formInputChange" data-field="mobile" class="weui-input" placeholder="请输入手机号"/>
                    <view slot="footer" class="weui-vcode-btn">获取验证码</view>
                </mp-cell>
                <mp-cell prop="date" title="日期" ext-class="">
                    <picker data-field="date" mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
                        <view class="weui-input">{{date}}</view>
                    </picker>
                </mp-cell>
                <mp-cell prop="vcode" title="验证码" ext-class=" weui-cell_vcode">
                    <input bindinput="formInputChange" data-field="vcode" class="weui-input" placeholder="请输入验证码"/>
                    <image slot="footer" class="weui-vcode-img" src="../images/vcode.jpg" style="width: 108px"></image>
                </mp-cell>
            </mp-cells>
            <mp-cells title="提交后表单项报错">
                <mp-cell show-error prop="idcard" title="卡号" ext-class="">
                    <input bindinput="formInputChange" data-field="idcard" class="weui-input" placeholder="请输入卡号"/>
                </mp-cell>
            </mp-cells>
        </mp-form>

        <view class="weui-cells__title">开关</view>
        <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell weui-cell_switch">
                <view class="weui-cell__bd">标题文字</view>
                <view class="weui-cell__ft">
                    <switch checked />
                </view>
            </view>
        </view>

        <view class="weui-cells__title">文本框</view>
        <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell">
                <view class="weui-cell__bd">
                    <input class="weui-input" placeholder="请输入文本" />
                </view>
            </view>
        </view>

        <view class="weui-cells__title">文本域</view>
        <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell">
                <view class="weui-cell__bd">
                    <textarea class="weui-textarea" placeholder="请输入文本" style="height: 3.3em" />
                    <view class="weui-textarea-counter">0/200</view>
                </view>
            </view>
        </view>

        <view class="weui-cells__title">选择</view>
        <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell weui-cell_select">
                <view class="weui-cell__hd" style="width: 105px">
                    <picker bindchange="bindCountryCodeChange" value="{{countryCodeIndex}}" range="{{countryCodes}}">
                        <view class="weui-select">{{countryCodes[countryCodeIndex]}}</view>
                    </picker>
                </view>
                <view class="weui-cell__bd weui-cell__bd_in-select-before">
                    <input class="weui-input" placeholder="请输入号码" />
                </view>
            </view>
        </view>

        <view class="weui-cells__title">选择</view>
        <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell weui-cell_select">
                <view class="weui-cell__bd">
                    <picker bindchange="bindAccountChange" value="{{accountIndex}}" range="{{accounts}}">
                        <view class="weui-select">{{accounts[accountIndex]}}</view>
                    </picker>
                </view>
            </view>
            <view class="weui-cell weui-cell_select">
                <view class="weui-cell__hd weui-cell__hd_in-select-after">
                    <view class="weui-label">国家/地区</view>
                </view>
                <view class="weui-cell__bd">
                    <picker bindchange="bindCountryChange" value="{{countryIndex}}" range="{{countries}}">
                        <view class="weui-select weui-select_in-select-after">{{countries[countryIndex]}}</view>
                    </picker>
                </view>
            </view>
        </view>

        <checkbox-group bindchange="bindAgreeChange">
            <label class="weui-agree" for="weuiAgree">
                <view class="weui-agree__text">
                    <checkbox class="weui-agree__checkbox" id="weuiAgree" value="agree" checked="{{isAgree}}" />
                    <view class="weui-agree__checkbox-icon">
                        <icon class="weui-agree__checkbox-icon-check" type="success_no_circle" size="9" wx:if="{{isAgree}}"></icon>
                    </view>
                    阅读并同意<navigator url="" class="weui-agree__link">《相关条款》</navigator>
                </view>
            </label>
        </checkbox-group>

        <view class="weui-btn-area">
            <button class="weui-btn" type="primary" bindtap="submitForm">确定</button>
        </view>
    </view>
</view>
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<array>表单校验的规则列表,格式下面详细介绍
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]stringrule是变量,表示内置的校验规则名称,比如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


阅读全文
以上是鳄鱼CMS为你收集整理的微信小程序 form 微信小程序 WeUI·Form全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
  • vue列表渲染的代码 Vue 3.0 列表渲染

    vue列表渲染的代码 Vue 3.0 列表渲染

    2023-03-21 VUE3教程

    #用 v-for 把一个数组对应为一组元素我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式...

  • vue3 注入 Vue 3.0 提供/注入

    vue3 注入 Vue 3.0 提供/注入

    2023-06-02 VUE3教程

    该页面假设你已经阅读过了组件基础。如果你还对组件不太了解,推荐你先阅读它。通常,当我们需要将数据从父组件传递到子组件时,...

  •  Sublime Text 风格

    Sublime Text 风格

    2023-04-01 Sublime Text 风格

    风格(Styles)风格对于任何软件都很重要,对编辑器也是如此,尤其是GUI环境下的编辑器。作为一个程序员,我希望我的编辑器足够...

  •  Sublime text 是用什么语言开发的?

    Sublime text 是用什么语言开发的?

    2023-06-10

    Sublimetext,几乎所有(估计有99%)的代码,都是C++写的;极少数的部分,用到了Object-C;关于插件部分,用到了Python;Object-...

  • vscode多个文件夹 vscode 多文件夹工作区

    vscode多个文件夹 vscode 多文件夹工作区

    2023-05-22

    多文件夹工作区(multi-root workspace)。老实说呢,这个概念是有一定的理解难度的。上面我们提到的基于文件夹的这种项目管理方...

© 2024 鳄鱼CMS eyucms.com 版权所有 联系我们