- <!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>
来源: http://www.bubuko.com/infodetail-2665326.html