用jQuery-Easy-UI编写注册页面
程序员文章站
2022-07-05 09:02:38
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>
上一篇： mysql数据属性类型
下一篇： 咸丰皇帝为什么只有载淳一子？原因是什么