创新互联小程序教程：微信小程序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>            <p>
                新闻名称：<a href="http://www.csdahua.cn/qtweb/news37/512187.html">创新互联小程序教程：微信小程序WeUI·Form</a>
                <br>
                URL标题：<a href="http://www.csdahua.cn/qtweb/news37/512187.html">http://www.csdahua.cn/qtweb/news37/512187.html</a>
            </p>
            <p>
                网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等
                                </p>
            <p class="adpic">
                <a href="https://www.cdcxhl.com/service/ad.html" target="_blank" class="ad">广告</a>
                <a href="" target="_blank" class="adimg"><img src=""></a>
            </p>
            <p class="copy">
                声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：
                <a href="http://www.csdahua.cn/" target="_blank">快上网</a>
            </p>
        </div>
        <div class="newsmorelb">
            <p>成都快上网为您推荐相关内容</p>
            <ul>
                <li>
                        <a href="/qtweb/news36/512186.html">c仿windows可折叠导航栏.rar?（折叠导航栏折叠)</a>
                    </li><li>
                        <a href="/qtweb/news35/512185.html">一台电脑如何代理多个IP？代理服务器双ip</a>
                    </li><li>
                        <a href="/qtweb/news34/512184.html">如何隐藏微粒贷图标</a>
                    </li><li>
                        <a href="/qtweb/news33/512183.html">面试官：有了解过ReentrantLock的底层实现吗？说说看</a>
                    </li><li>
                        <a href="/qtweb/news32/512182.html">redis自启动</a>
                    </li><li>
                        <a href="/qtweb/news31/512181.html">com是什么意思的缩写？windows7启动wmi对象</a>
                    </li><li>
                        <a href="/qtweb/news30/512180.html">jquery怎么让div不占位隐藏（jquery设置div隐藏）</a>
                    </li><li>
                        <a href="/qtweb/news29/512179.html">常见Perl开发工具用法集锦</a>
                    </li><li>
                        <a href="/qtweb/news28/512178.html">域渗透——Hook PasswordChangeNotify</a>
                    </li>                            </ul>
        </div>
    </div>
    <div class="col-lg-3 noneb">
        <div class="bkright" style="margin-top: 0">
            <p><a href="https://www.cdcxhl.com/news/yingxiao/">网站营销知识</a></p>
            <ul>
                <li>
                        <a class="text_overflow" href="/qtweb/news26/360226.html">python如何连接数据库</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news1/430851.html">彻底删除应用程序，学会深度Linux卸载技巧(深度linux卸载软件)</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news25/377425.html">三大主流x86虚拟机技术详解</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news14/340514.html">switch怎么注册巴西区？巴西服务器连接国内服务器</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news38/255538.html">租用美国服务器该如何优化速度呢？</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news46/235596.html">Future Response Servlet特性</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news25/194925.html">七个让我们成为更好Vue开发者的技巧</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news32/288332.html">怎么在vps切换两个用户名和密码</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news6/380006.html">请问flinkcdc可以处理doris数据吗？</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news28/482578.html">Linux系统助力PS4游戏大作（ps4系统是Linux）</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news8/295458.html">便签软件哪个好用又好看_自用2个简洁漂亮的便签工具推荐</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news44/326694.html">Linux系统下拓展外置光驱功能（linux外置光驱）</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news15/109315.html">虚拟主机如何部署php网站</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news37/82987.html">win10登录云服务器</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news21/546471.html">怎么注册小程序店铺？(潮州怎么注册小程序店铺呢)</a>
                    </li>            </ul>
        </div>
        <div class="bkright tag">
            <p><a href="https://www.cdcxhl.com/hangye/link.html" target="_blank">各行业网站</a></p>
            <ul>
                <li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/fadianjihs/" target="_blank">发电机回收</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/fwqtg/" target="_blank">服务器托管</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/hntjbc/" target="_blank">混凝土搅拌罐车</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/hntjbj/" target="_blank">混凝土搅拌机</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/xiaoguotu/" target="_blank">效果图设计</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/huisuosj/" target="_blank">会所设计</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/hntjbg/" target="_blank">混凝土搅拌罐</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/sdgz/" target="_blank">水电改造</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/muwu/" target="_blank">木屋</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/jiaquan/" target="_blank">除甲醛</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/hldzj/" target="_blank">护栏打桩机</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/pvc/" target="_blank">PVC花箱</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/jiagu/" target="_blank">加固</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/gangting/" target="_blank">岗亭</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/snjbc/" target="_blank">水泥搅拌车</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/ggtg/" target="_blank">广告推广</a>
                    </li>            </ul>
        </div>
    </div>
</div>
<div class="carousel-inner linkbg" style="background: #fff">
    <div class="container">
        <a href="https://www.cdcxhl.com/quanwang.html" target="_blank">网络营销推广</a>　　 　<a href="https://www.cdxwcx.com/city/dazhou/" target="_blank">达州网站建设</a>　　 　<a href="https://www.cdcxhl.com/gaiban/chengdu.html" target="_blank">成都企业网站改版</a>　　 　<a href="http://www.cdxwcx.cn/seo/" target="_blank">成都网络营销公司</a>　　 　<a href="http://www.ledyue.cn/" target="_blank">成都酒店服定制</a>　　 　<a href="http://www.xhgfhy.com/
" target="_blank">犀浦封阳台</a>　　 　<a href="http://www.schzyjs.com/" target="_blank">和正源建设</a>　　 　<a href="https://www.cdxwcx.com/wangzhan/mbqiye.html" target="_blank">成都企业网站制作</a>　　 　<a href="https://www.xwcx.net/hkcloud.html" target="_blank">香港云服务器租用</a>　　 　<a href="http://www.ptruijie.cn/" target="_blank">新都四新网站建设</a>　　 　<a href="http://www.cdkjz.cn/fangan/xuexiao/" target="_blank">校园网站建设方案</a>　　 　<a href="http://www.huijiubei.com/" target="_blank">防护网厂</a>　　 　<a href="http://www.jyfdjwx.com/" target="_blank">简阳威斯达宇</a>　　 　<a href="http://www.emts.com.cn/about/" target="_blank">德阳东方电机技改服务有限公司</a>　　 　<a href="http://www.cqcxhl.com/" target="_blank">网站制作</a>　　 　<a href="http://www.cdkjz.cn/wangzhan/yunying/" target="_blank">成都网站代运营</a>　　 　<a href="http://www.cdxwcx.cn/tuoguan/meishan.html" target="_blank">眉山电信机房托管</a>　　 　<a href="http://chengdu.cdcxhl.com/seo/" target="_blank">成都网站排名</a>　　 　<a href="http://www.schejiang.com/" target="_blank">合江网站建设</a>　　 　<a href="http://m.cdcxhl.cn/mobile/" target="_blank">网站建设公司</a>　　 　    </div>
</div>
<footer>
    <div class="carousel-inner footjz">

        <div class="container">
            <i class="icon iconfont zbw"></i>
            高品质定制 <i class="icon iconfont"></i>
            跨终端自动兼容 <i class="icon iconfont"></i>
            节约开发成本  <i class="icon iconfont"></i>
            开发周期短 <i class="icon iconfont"></i>
            一体化服务
            <button  type="button" class="btn  btn-default btn-lg" onClick="window.location.href='tencent://message/?uin=631063699&Site=&Menu=yes'"> 立即开始2800定制网站建设</button>
            <button  type="button" class="btn  btn-default btn-xs" onClick="window.location.href='tencent://message/?uin=631063699&Site=&Menu=yes'"> 2800定制网站建设</button>
        </div>
    </div>
    <div class="carousel-inner bqsy">
        <div class="container">
            <div class="lxfs">
                <h4 class="yutelnone">028-86922220 13518219792</h4>
                <h4 class="yutelblock"><a href="tel:02886922220">028-86922220</a> <a href="tel:13518219792">13518219792</a></h4>

                <a class="btn btn-default" href="tencent://message/?uin=532337155&Site=&Menu=yes" role="button">网站建设<span>QQ</span>：532337155</a>
                <a class="btn btn-default" href="tencent://message/?uin=631063699&Site=&Menu=yes" role="button">营销推广<span>QQ</span>：631063699</a>

                <a class="btn btn1 btn-default" href="mqqwpa://im/chat?chat_type=wpa&uin=532337155&version=1&src_type=web&web_src=oicqzone.com" role="button">网站制作<span>QQ</span>：532337155</a>
                <a class="btn btn1 btn-default" href="mqqwpa://im/chat?chat_type=wpa&uin=631063699&version=1&src_type=web&web_src=oicqzone.com" role="button">营销推广<span>QQ</span>：631063699</a>


                <a class="btn btn-default nonea" href="tencent://message/?uin=1683211881&Site=&Menu=yes" role="button">售后QQ：1683211881</a>
                <div class="dz">成都快上网专注：
                        <a href="http://www.csdahua.cn/" target="_blank">网站优化</a>
                        <a href="http://www.csdahua.cn/" target="_blank">网络推广</a>
                        <a href="http://www.csdahua.cn/" target="_blank">网站建设</a>
                    <address>地址：成都太升南路288号锦天国际A幢10楼</address>
                </div>
            </div>
            <div class="bzdh dz"><img src="https://www.cdcxhl.com/imges/bottom_logo.png" alt="创新互联">
                <p><a href="https://www.cdcxhl.com/menu.html" target="_blank">成都创新互联科技有限公司</a><br>
                    Tel：028-86922220（7x24h）</p></div>
        </div>
    </div>
</footer>
</body>
</html>
<script>
      $.getJSON ("../../qtwebpic.txt", function (data) {
        var jsonContent = {
            "featured":data
        }
        var random = jsonContent.featured[Math.floor(Math.random() * jsonContent.featured.length)];
        $(".adpic .adimg").attr("href",random.link)
        $(".adpic img").attr("src",random.pic);
    })
</script>