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>用jQuery-Easy-UI编写注册页面
原文地址：https://www.cnblogs.com/yangkaiming/p/9246710.html