创新互联小程序教程：微信小程序WeUI·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"
  }
}



    
        Form
        表单输入
    
    
        
            
                
                    
                
            
            
                
                    
                
            

            
                
                    
                
                
                    
                    获取验证码
                
                
                    
                        {{date}}
                    
                
                
                    
                    
                
            
            
                
                    
                
            
        

        开关
        
            
                标题文字
                
                    
                
            
        

        文本框
        
            
                
                    
                
            
        

        文本域
        
            
                
                                        <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></code></pre>
<pre><code>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: '校验通过'
                    })
                }
            })
        }

    }
});</code></pre>
<p></p><h2>属性列表</h2>
<table>
<thead>
<tr>
<th>属性</th>
<th>类型</th>
<th>默认值</th>
<th>必填</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>ext-class</td>
<td>string</td>
<td></td>
<td>否</td>
<td>添加在组件内部结构的class，可用于修改组件内部的样式</td>
</tr>
<tr>
<td>rules</td>
<td>object<array></td>
<td></td>
<td>否</td>
<td>表单校验的规则列表，格式下面详细介绍</td>
</tr>
<tr>
<td>models</td>
<td>object</td>
<td></td>
<td>否</td>
<td>需要校验的表单的数据</td>
</tr>
<tr>
<td>bindsuccess</td>
<td>eventhandler</td>
<td></td>
<td>否</td>
<td>校验成功触发的事件，detail是{trigger}，trigger的值是change或validate，表示是输入改成触发的校验还是主动调用的validate接口</td>
</tr>
<tr>
<td>bindfail</td>
<td>eventhandler</td>
<td></td>
<td>否</td>
<td>校验失败触发的事件，detail是{trigger, errors}，trigger的值是change或validate，表示是输入改成触发的校验还是主动调用的validate接口。errors是错误的字段列表。</td>
</tr>
</tbody>
</table>
<p>rules是表单校验的规则列表，列表每一项表示一个字段的校验规则，注意，必须要在Cell或Checkbox-group组件声明prop属性，表单校验规则才生效，表单校验规则的定义如下：</p><table>
<thead>
<tr>
<th>属性</th>
<th>类型</th>
<th>默认值</th>
<th>必填</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>name</td>
<td>string</td>
<td></td>
<td>是</td>
<td>校验的字段名</td>
</tr>
<tr>
<td>rules</td>
<td>array/object</td>
<td></td>
<td>是</td>
<td>校验的规则，如果有多项，则是数组</td>
</tr>
<tr>
<td>rules.message</td>
<td>string</td>
<td></td>
<td>否</td>
<td>校验失败时候提示的文字</td>
</tr>
<tr>
<td>rules.validator</td>
<td>function</td>
<td></td>
<td>否</td>
<td>自定义校验函数，接受rule, value, param, models四个参数，其中rule格式为{name: '字段名', message: '失败信息'}, value是字段值，param是校验参数，models是form组件的models属性。函数返回错误提示，表示校验失败，错误提示会通过回调返回给开发者</td>
</tr>
<tr>
<td>rules.[rule]</td>
<td>string</td>
<td></td>
<td>否</td>
<td>rule是变量，表示内置的校验规则名称，比如required，则校验规则对象为{name: "fieldName", rules: {required: true}}，下面会详细介绍所有的内置规则</td>
</tr>
</tbody>
</table>
<h2>内置校验规则</h2>
<table>
<thead>
<tr>
<th>规则名</th>
<th>参数</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>required</td>
<td></td>
<td>是否必填</td>
</tr>
<tr>
<td>minlength</td>
<td>number</td>
<td>最小长度</td>
</tr>
<tr>
<td>maxlength</td>
<td>number</td>
<td>最大长度</td>
</tr>
<tr>
<td>rangelength</td>
<td>[number, number]</td>
<td>长度范围，参数为[最小长度， 最大长度]</td>
</tr>
<tr>
<td>bytelength</td>
<td>number</td>
<td>字节长度</td>
</tr>
<tr>
<td>range</td>
<td>[number, number]</td>
<td>数字的大小范围</td>
</tr>
<tr>
<td>min</td>
<td>number</td>
<td>最小值限制</td>
</tr>
<tr>
<td>max</td>
<td>number</td>
<td>最大值限制</td>
</tr>
<tr>
<td>mobile</td>
<td></td>
<td>手机号码校验</td>
</tr>
<tr>
<td>email</td>
<td></td>
<td>电子邮件校验</td>
</tr>
<tr>
<td>url</td>
<td></td>
<td>URL链接地址校验</td>
</tr>
<tr>
<td>equalTo</td>
<td>string</td>
<td>相等校验，参数是另外一个字段名</td>
</tr>
</tbody>
</table>
<h2>接口</h2>
<h3>validate</h3><p>validate接口接受类型为function的callback，callback有isValid和errors两个参数，isValid表示是否校验通过，errors在校验失败的时候的值为失败的字段列表。</p><h3>validateField</h3><p>validateField接口接受2个参数， 第一个是字段名，第二个是类型为function的callback，callback有isValid和errors两个参数，isValid表示是否校验通过，errors在校验失败的时候的值为失败的字段列表。</p><h2>Slot</h2>
<table>
<thead>
<tr>
<th>名称</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>默认</td>
<td>内容slot</td>
</tr>
</tbody>
</table>
<p></p>            <br>
            新闻名称：创新互联小程序教程：微信小程序WeUI·Form            <br>
            路径分享：<a href="http://www.zsjierui.cn/article/dhgopss.html">http://www.zsjierui.cn/article/dhgopss.html</a>
        </div>
    </div>
    <div class="other">
        <h3>其他资讯</h3>
        <ul>
            <li>
                    <a href="/article/djpceos.html">公安备案需要多久?（公安备案需要多久时间)</a>
                </li><li>
                    <a href="/article/djpcedd.html">Ruby继承应用经验分享</a>
                </li><li>
                    <a href="/article/djpcshd.html">服务器带宽多少比较合适？（企业云服务器租用怎么选择带宽线路）</a>
                </li><li>
                    <a href="/article/djpcsci.html">查询Linux系统版本：七步曲（如何查询linux的版本）</a>
                </li><li>
                    <a href="/article/djpccgh.html">挂机宝属于虚拟主机吗</a>
                </li>        </ul>
    </div>
</div>
<footer>
    <div class="message">
        <div class="mess container">
            <p>免费获取网站建设与品牌策划方案报价</p>
            <span>*主要业务范围包括：高端网站建设， 集团网站建设(网站建设网站制作)找网站建设公司就上美图齐众。</span>
            <form action="">
                <input type="text" class="ipt1" placeholder="联系人">
                <input type="text" class="ipt2" placeholder="联系电话">
                <textarea name="" id=""  placeholder="内容描述：描述您的需求，如网站、微信、电商、APP等。">
                提交需求


    
        
            
                联系我们
                028-86922220
                手机：13518219792
                地址：成都市太升南路288号锦天国际A幢1002号
                
                24小时服务热线：028-86922220
            
            
                网站建设服务
                网页设计
                网站制作
                网站开发
            
            
                网站推广服务
                营销网站建设
                百度快速排名
                整站网站推广
            
            
                网站运维服务
                基础维护
                网站改版
                网站维护
            
            
                FOLLOW US
                
                
                    微信二维码
                    微信二维码
                
            
        
        
            友情链接：
            背发光字   彭州柴油发电机租赁   网站SEO优化排名   seo关键词优化   旅游网站建设方案   成都标牌标识牌制作公司   发光字制作   成都代办注册公司   配电室环境   成都发电机维修公司           
    
    
        
            
                Copyright © 2025  资阳站青羊区美图齐众设计工作室（个体工商户）     资阳网站建设公司-选网站建设公司美图齐众！专业的网站制作公司！
            
            
                All Rights Reserved 版权所有 蜀ICP备2025119604号-1

网站建设知识

创新互联小程序教程：微信小程序WeUI·Form

Form

示例代码：

联系我们

网站建设服务

网站推广服务

网站运维服务

FOLLOW US