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="100%;max-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="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="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="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="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="80px" id="submitdown">提交</a> 38 <a href="javascript:void(0)" class="easyui-linkbutton" style="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>