欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

用jQuery-Easy-UI编写注册页面

程序员文章站 2022-04-10 15:43:12
1 2 3 4 5 6 7 8 Document 9 10 11 16 17 18 19 20 21 22 23 24 25 ... ......
 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>