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

 <!DOCTYPE html>
 <html lang="en">

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
     <link rel="stylesheet" type="text/css" href="./css/themes/default/easyui.css">
     <link rel="stylesheet" type="text/css" href="./css/themes/icon.css">
     <style>
         .finst {
             margin: 0 auto;
         }
     </style>
 </head>

 <body>
     <div closable="true" class="easyui-panel" title="注册" style="width:100%;max-width:400px;padding:30px 60px;" data-options="cls:'finst'">
         <form id="ff" method="post">
             <div style="margin-bottom:20px">
                 <input id="phone" class="easyui-textbox" name="name" style="width:100%" data-options="label:'手机号:',required:true,missingMessage:'不能为空',validType:['equals[/^1\\d{10}$/]',' phonevalid']">
             </div>
             <div style="margin-bottom:20px">
                 <input class="easyui-textbox" name="code" style="width:100%" data-options="label:'验证码:',required:true,validType:'code',missingMessage:'不能为空',validType:'equals[/^\\d{6,}$/]'">
             </div>
             <div style="margin-bottom:20px">
                 <input id="pwd" class="easyui-passwordbox" name="pwd" style="width:100%" data-options="label:'密码:',required:true,missingMessage:'不能为空',validType:'equals[/^\\w{6,20}$/]'">
             </div>
             <div style="margin-bottom:20px">
                 <input id="rpwd" class="easyui-passwordbox" onclick="clearForm()" name="rpwd" style="width:100%" data-options="label:'确认密码:',required:true,missingMessage:'不能为空'"
                     validType="pwds['#pwd']">
             </div>

         </form>
         <div style="text-align:center;padding:5px 0">
             <a href="javascript:void(0)" class="easyui-linkbutton" style="width:80px" id="submitdown">提交</a>
             <a href="javascript:void(0)" class="easyui-linkbutton" style="width:80px" id="cleardown">清空</a>
         </div>

         <script type="text/javascript" src="./js/jquery-1.12.4.min.js"></script>
         <script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
         <script src="./js/lodash.js"></script>
         <script src="./js/util.js"></script>
         <script>
             $('#phone').textbox({
                 iconCls: 'icon-man',
                 iconAlign: 'right'
             })
             $.extend($.fn.validatebox.defaults.rules, {
                 equals: {
                     validator: function (value, param) {
                         return param[0].test(value);
                     },
                     message: '格式不正确'
                 },
                 phonevalid: {
                     validator: function (value, param) {
                         let user = get('user', []);
                         return _.find(user, (o) => o.phone == value) ? false : true;
                     },
                     message: '手机号重复'
                 }
             });
             $.extend($.fn.validatebox.defaults.rules, {
                 pwds: {
                     validator: function (value, param) {
                         return value == $(param[0]).val();
                     },
                     message: '密码不一致'
                 }
             });

             $('#cleardown').on('click', function () {
                 $('#ff').form('clear')
             })
             $('#submitdown').on('click', function () {
                 if ($('#ff').form('validate')) {
                     let user = get('user', []);
                     user.push({
                         phone: $("#phone").val(),
                         // pwd: $('#pwd').textbox('getvalue')
                         pwd: $('#pwd').val()
                     })
                     save('user', user);
                     $.messager.alert('成功', '添加成功', '', function () {
                         window.location.assign('./denglu.html')
                     });

                 } else {
                     $.messager.alert('注册失败！', '请重新注册');
                 }
             })
         </script>

 </body>

 </html>