WeUI 的 Form 组件是用于处理表单相关操作的组件，包括表单提交、验证等功能。以下是一个简单的 WeUI Form 组件的使用例子：

1. 基本表单结构：
   <form class="weui-form" bindsubmit="formSubmit" report-submit>
     <!-- 表单项 -->
     <div class="weui-form__control-group">
       <div class="weui-cells__title">文本输入</div>
       <div class="weui-cells weui-cells_form">
         <div class="weui-cell">
           <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
           <div class="weui-cell__bd">
             <input class="weui-input" name="name" placeholder="请输入姓名" value="{{formData.name}}" />
           </div>
         </div>
         <!-- 其他表单项 -->
       </div>
     </div>

     <!-- 提交按钮 -->
     <div class="weui-btn-area">
       <button class="weui-btn weui-btn_primary" type="primary" formType="submit">提交</button>
     </div>
   </form>

2. 相关事件处理：
   在相应的小程序页面的 JS 文件中，需要定义 formSubmit 函数，处理表单提交的逻辑：
   Page({
     data: {
       formData: {}, // 表单数据
     },
     formSubmit: function (e) {
       console.log('form发生了submit事件，携带数据为：', e.detail.value);
       // 处理表单提交逻辑
     },
   });

   注意，e.detail.value 包含了表单中所有的输入项的值。

3. 验证表单项：
   WeUI 提供了一些样式和结构来展示表单项的错误状态。在表单项中添加 .weui-cell_warn 类可以展示错误状态，同时在 .weui-cell__ft 中添加错误提示信息。
   <div class="weui-cell weui-cell_warn">
     <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
     <div class="weui-cell__bd">
       <input class="weui-input" name="name" placeholder="请输入姓名" value="{{formData.name}}" />
     </div>
     <div class="weui-cell__ft">姓名不能为空</div>
   </div>

这是一个简单的 WeUI Form 组件的使用示例。你可以根据实际需求在表单中添加更多的表单项，并在小程序的 JS 文件中处理相应的表单提交逻辑。同时，你也可以根据 WeUI 文档查阅更多关于 Form 组件的使用和样式定制信息。


转载请注明出处：http://www.zyzy.cn/article/detail/1326/微信小程序