H5完成使用者註冊自動校驗的實例詳解

Html5實作使用者註冊自動校驗功能實例代碼

05-24 10:49:46作者：php中文網

抽空寫了一個帶有自動校驗功能的Html5用戶註冊Demo。使用到Handlebars範本技術和手機驗證碼校驗。

以下是效果截圖：

1.頁面程式碼：usersRegister.hbs

XML /HTML Code複製內容到剪貼簿

1.  lang="en" class="ie8"> end

if]-->
2.      

   #     

#
3.      

#

#html lang

="en"
4. ##>

   #     #     

   ##
5. 頭

   >     

6.     meta #http-equiv=

   "Content-Type"
 
7. content

   ="text/html; charset =utf-8">          meta http-equiv# #="X-UA 相容"

content
8. =

   "IE=edge" />          #標題>使用者註冊

標題

9. >#              

##    
10. #<

    div  class="main" >     

        

11. #      ##div style="高度：5px;文字對齊:居中;字體大小:25px"> 歡迎您報名！

12. ##        

         

13. #    #   

        #  ##id="my-form" class="myform">     

            
14. <

    div>     

     ##  ##>
使用者名稱:
15. 標籤>#<##輸入 id="使用者名稱" name="使用者名稱" 類型 ="文字"  />                 

## >## #            
16. <

    div>     

   label> -->
17.      

                    

18. #編號代碼: #標籤>

輸入 id="pass" 名稱 ="密碼" 類型="文字" />             div>                  

div
19. > ##     

                    #label

>

21. '標籤##>輸入# id#="email"

     
name
22. =

    "email"     #                   # #="需要d 電子郵件" 類型="電子郵件"

     
/>
23.      

    ##             div

    >###     #####
24. ##            

    div>     # 

     標籤
25. >

    電話：#標籤>## 輸入# id="電話" type="文字" 名稱= "電話" data-ideal="電話" />                  div

>
26.      

    #            ##div

27. #                

    <」標籤##>

28. 1 >

    <input id="vCode " type="text" name="vCode" data-ideal="vCode" />#                  div>     ## 

    div
29. >

         #                 #lt姓名」

30. Nname

    ##真的姓名：標籤>

<

31. 輸入 id#= "trueName" type="text" name##="trueName" data-ideal"trueName" />     #             #div#1             <

    div
##>
32.      

    ## ##標籤>手機驗證碼：

    標籤

33. <

34. ##輸入 id= "電話代碼" type="文字" name="電話代碼" data-ideal# #="電話代碼" />     #

35. ##            

    div>     # 

     #div
 
36. style

    ="margin-bottom:5px;">     

37. ##                <按鈕 id#="getTelCode" type"按鈕 樣式="左邊界:160px; 右距:自動;"  >取得手機驗證碼

    按鈕
38. >

                      ##style=" 頂部邊距:5px; 底部邊距:5px;" /> ;     

39. #            

    #div>     

    ## ##  ##div
40. >

         #                 

    1

42. #'

    '' #
43. label

    >                   ="性別" 名稱="性別"##>#     

       ##

選項 值="男">男#選項>     

                    #<

44. #"> 「>女

    選項
45. >

                    /選擇

>

46.             ##div

    ##>### ##     ############            ##########div######>####    
47. ##                

    <label> 暱稱：label > <輸入 id="暱稱" 類型="文字" 名稱="暱稱" 理想資料="暱稱" />     

48. #            

    div>     

49. div>#     

50. #           nbsp;     

    標籤>#年齡：#標籤>< ;輸入 #id="年齡" 類型="文字" name ##="年齡" 理想資料="年齡" />     

51. ##div>-->

         

52.             

以上是H5完成使用者註冊自動校驗的實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！