"使用者註冊" left-arrow @click-left=
"dot"
/>
<
!-- 頁面的主體css樣式 --
>
"login"
>
="login-head"
>新使用者註冊<
/p>
"手機號"
class
="inp" v-model=
"mobile" right-icon=
"graphic"
/>
<
!-- 密碼框 --
>
placeholder=
"密碼"
class
="inp"
v-model=
"pwd"
:type=
"hidepwd ?'password':'text'"
:right-icon=
"hidepwd ?'closed-eye':'eye-o'"
@click-right-icon=
"hidepwd = !hidepwd"
/>
<
!-- 確認密碼框 --
>
placeholder=
"確認密碼"
class
="inp"
v-model=
"confirm_pwd"
:type=
"hidepwd1 ?'password':'text'"
:right-icon=
"hidepwd1 ?'closed-eye':'eye-o'"
@click-right-icon=
"hidepwd1 = !hidepwd1"
/>
"使用者名稱"
class
="inp" v-model=
"nick" right-icon=
"user-o"
/>
"圖形驗證碼"
class
="inp" v-model=
"piccode"
>
<
template #right-icon>
"imgurl" @click=
"createimgcode"
/>
<
/template
>
<
/van-field>
<
!-- 城市資訊 --
>
placeholder=
"城市"
class
="inp"
v-model=
"area"
right-icon=
"location-o"
@click=
"areashow=true"
/>
<
!-- 城市列表，底部彈出層 --
>
"areashow" position=
"bottom"
>
title=
"選擇城市"
:area-list=
"areslist"
@cancel=
"areashow=false"
@confirm=
"selectedarea"
/>
<
/van-popup>
"手機驗證碼"
class
="inp" v-model=
"code"
>
<
template #button>
type=
"danger"
plain
size=
"small"
:disabled=
"btnisdisabled"
@click=
"sendcode"
>
}<
/van-button>
<
/template
>
<
/van-field>
"info" block class
="btn" @click=
"checkform"
>立即註冊<
/van-button>
"path" id=
"cy_p"
>已有賬號？ 立即登入<
/p>
<
/van-form>
<
/div>
<
/div>
<
/template
>
//重置一些css樣式，html- 50px
import "@/assets/reset.css"
;import arealist from "@/untils/area"
;export
default
,data()
;}, computed:
, watch:
, methods:
, methods:
//校驗手機號的格式是否合法
var reg =/^
1[345678
]\d$/;if
(!reg.
test
(this
.mobile)
)//確認密碼和密碼是否一致if(
this
.confirm_pwd !=
this
.pwd)
this
.$toast.
success
("恭喜你,註冊成功");
this
.checkform()
},//生成圖形驗證碼
createimgcode()
?key=$`;},
//選擇城市函式
selectedarea
(arr));
//處理省份和市
this
.province = tmp[0]
;this
.city = tmp[1]
;//陣列轉換程字串
this
.area = tmp.
join
(" ");
},//倒計時的功能
countseconds()
//正在倒計時的時候
this
.msg = `$s後再試`;
timeout--;}
,1000);
},//傳送驗證碼介面
sendcode()
}).then
(res =
>
this
.countseconds()
;//呼叫倒計時的方法})
;},checkform()
}).then
(res =
>
this
.$toast.
success
("恭喜你,註冊成功");
this
.$router.
push
("/login");
});}
,dot()
}};<
/script>
註冊頁面聯絡
收藏本站 a span span class action a href 登入 a a href 註冊 a a href 我的訂單 a a href vip 會員俱樂部 a a href 客戶服務 a span div div div class content div class box div ...
JS 製作註冊頁面
使用js製作註冊頁面，使用正規表示式驗證該資料是否符合要求 css頁面 body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd ulinput clear after box box h2 box form box form ul li box form ul li input b...
註冊頁面判斷框
案例分析 首先判斷的事情是表單失去焦點 onblur 如果輸入正確則提示正確的資訊顏色為綠色小圖示變化 如果輸入不是6到16位，則提示錯誤資訊顏色為紅色 小圖示變化 因為裡面變化樣式較多，採取classname修改樣式 lang en charset utf 8 name viewport cont...