用jQuery-Easy-UI編寫註冊頁面

YKmaster發表於2018-06-30
jQueryUI
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <link rel="stylesheet" type="text/css" href="./css/themes/default/easyui.css">
10     <link rel="stylesheet" type="text/css" href="./css/themes/icon.css">
11     <style>
12         .finst {
13             margin: 0 auto;
14         }
15     </style>
16 </head>
17 
18 <body>
19     <div closable="true" class="easyui-panel" title="註冊" style="width:100%;max-width:400px;padding:30px 60px;" data-options="cls:`finst`">
20         <form id="ff" method="post">
21             <div style="margin-bottom:20px">
22                 <input id="phone" class="easyui-textbox" name="name" style="width:100%" data-options="label:`手機號:`,required:true,missingMessage:`不能為空`,validType:[`equals[/^1\d{10}$/]`,` phonevalid`]">
23             </div>
24             <div style="margin-bottom:20px">
25                 <input class="easyui-textbox" name="code" style="width:100%" data-options="label:`驗證碼:`,required:true,validType:`code`,missingMessage:`不能為空`,validType:`equals[/^\d{6,}$/]`">
26             </div>
27             <div style="margin-bottom:20px">
28                 <input id="pwd" class="easyui-passwordbox" name="pwd" style="width:100%" data-options="label:`密碼:`,required:true,missingMessage:`不能為空`,validType:`equals[/^\w{6,20}$/]`">
29             </div>
30             <div style="margin-bottom:20px">
31                 <input id="rpwd" class="easyui-passwordbox" onclick="clearForm()" name="rpwd" style="width:100%" data-options="label:`確認密碼:`,required:true,missingMessage:`不能為空`"
32                     validType="pwds[`#pwd`]">
33             </div>
34 
35         </form>
36         <div style="text-align:center;padding:5px 0">
37             <a href="javascript:void(0)" class="easyui-linkbutton" style="width:80px" id="submitdown">提交</a>
38             <a href="javascript:void(0)" class="easyui-linkbutton" style="width:80px" id="cleardown">清空</a>
39         </div>
40 
41         <script type="text/javascript" src="./js/jquery-1.12.4.min.js"></script>
42         <script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
43         <script src="./js/lodash.js"></script>
44         <script src="./js/util.js"></script>
45         <script>
46             $(`#phone`).textbox({
47                 iconCls: `icon-man`,
48                 iconAlign: `right`
49             })
50             $.extend($.fn.validatebox.defaults.rules, {
51                 equals: {
52                     validator: function (value, param) {
53                         return param[0].test(value);
54                     },
55                     message: `格式不正確`
56                 },
57                 phonevalid: {
58                     validator: function (value, param) {
59                         let user = get(`user`, []);
60                         return _.find(user, (o) => o.phone == value) ? false : true;
61                     },
62                     message: `手機號重複`
63                 }
64             });
65             $.extend($.fn.validatebox.defaults.rules, {
66                 pwds: {
67                     validator: function (value, param) {
68                         return value == $(param[0]).val();
69                     },
70                     message: `密碼不一致`
71                 }
72             });
73        
74             $(`#cleardown`).on(`click`, function () {
75                 $(`#ff`).form(`clear`)
76             })
77             $(`#submitdown`).on(`click`, function () {
78                 if ($(`#ff`).form(`validate`)) {
79                     let user = get(`user`, []);
80                     user.push({
81                         phone: $("#phone").val(),
82                         // pwd: $(`#pwd`).textbox(`getvalue`)
83                         pwd: $(`#pwd`).val()
84                     })
85                     save(`user`, user);
86                     $.messager.alert(`成功`, `新增成功`, ``, function () {
87                         window.location.assign(`./denglu.html`)
88                     });
89 
90                 } else {
91                     $.messager.alert(`註冊失敗！`, `請重新註冊`);
92                 }
93             })
94         </script>
95 
96 
97 </body>
98 
99 </html>

 

相關文章