2017 01 11小程式form表單提交

2022-05-06 23:06:11 字數 1979 閱讀 3946

1.小程式相對於之前的web+php建站來說,個人理解為只是將

webjson

的形式返回給小程式。

2.昨天寫了登入註冊、忘記密碼功能,他們實質上都是乙個表單提交操作。因此就拿註冊功能來寫這個例子。

3.目錄圖

js檔案是邏輯控制,主要是它傳送請求和接收資料,

json 用於此頁面區域性 配置並且覆蓋全域性

配置,wxss用於頁面的樣式設定,

wxml就是頁面,相當於

html

4.樣式和json檔案暫時不管了,我只是想回顧一下

form

表單的提交

5.wxml檔案**

註冊登入

忘記密碼

6.其中幾個關鍵點需要理解

a.form表單,需要繫結乙個

submit

事件,在小程式中,屬性為

bindsubmit,

bindsubmit=」formsubmit」   這裡的屬性值formsubmit,命名可以為符合規範的任意值,相當於以前html中的  

onsubmit=」formsubmit()」,是乙個函式名,當提交的時候觸發formsubmit這個函式事件,這個函式寫在js中。

b.其他的屬性和之前的

html

差不多,注意的是,表單一定要有

name=

「value

」,後端處理和以前一樣,比如

name=」username」 php可以用

$_post[『username』]來接收。

c.由於小程式沒有

input submit

這個按鈕,所以在每個

form

表單中都要有乙個提交按鈕,

註冊,這個按鈕就是用來開啟提交事件的。

7.index.js**

page(,2000)

}else if(e.detail.value.mobile.length != 11),2000)

}else if(e.detail.value.password.length <6 ||e.detail.value.password.length>20),2000)

}else if(e.detail.value.password != e.detail.value.repassword),2000)

}else,

success: function(res) else,資料物件,設定頁面中的資料,前端可以通過讀取這個物件裡面的資料來顯示出來。

formsubmit: function  小程式中方法都是 方法名

:function()

,其中function

可以傳入乙個引數,作為觸發當前時間的物件

下面是函式的執行,由於驗證太多,我只拿一部分出來理解。

if(e.detail.value.mobile.length==0||e.detail.value.password.length==0),

success: function(res) else)是小程式發起

請求,注意

是不行的。

這裡a.url是你請求的**,比如以前在前端,

post

表單中action=

『index.php

』,這裡的

index.php

是相對路徑,而小程式請求的**必須是網路絕對路徑。

比如:b.header: ,

這裡的data就是

post

給伺服器端的資料 以

的形式傳送

d.成功**函式

success: function(res) elseelseelseelse}}

}模型usermodel.class.php  的

register

方法public functionregister()

微信小程式 表單form

表單form的應用很廣泛,我們可以利用form設計登入註冊,也可以設計一種答題問卷的形式,今天主要講一下form的使用 form表單,將元件內輸入的 switch input checkbox slider radio picker 的值進行提交,資料的格式為 name value,所以表單中控制項...

微信小程式form元件

form 元件 表單 img 主要屬性 img 效果圖 img form.wxml新增 img form.js新增 img form.wxss新增 img 注意 form表單元件 是提交form內的所有選中屬性的值,注意每個form表單內的元件都必須有name屬性指定否則提交不上去,button中的...

微信小程式 form 元件

表單元件 將元件內使用者輸入的 提交 當點選表單的 form type 為 submit 的元件時,會將表單元件中的value值進行提交,需要在表單元件中加上 name 作為 key 屬性 report submit 型別 布林 是否返回formid用於傳送模板訊息 report submit ti...