<!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>

用jQuery-Easy-UI编写注册页面的更多相关文章

  1. Jquery easy UI 上中下三栏布局 分类： ASP.NET 2015-02-06 09:19 368人阅读 评论(0) 收藏

    效果图: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  2. jQuery Easy UI 开发笔记

    1.jQuery Easy UI主要的运行原理是通过核心的代码调用插件来实现UI效果的 2.jQuery Easy UI插件与插件之间的关系是: 一.独立式插件: 独立式插件是指:不与其他的插件具有相 ...

  3. JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单

    JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...

  4. jQuery Easy UI (适应屏幕分辨率大小)布局(Layout)

    一.jQuery Easy UI (适应屏幕分辨率大小)布局(Layout) 1.首先应用的是jquery-easyui-1.4 版本(版本不同,兼容性不同) 2.实现整个页面的布局( layout: ...

  5. JQuery Easy UI 简介

    [什么是JQuery Easy UI?] jQuery EasyUI 是一组基于 jQuery 的 UI 插件集合,而 jQuery EasyUI 的目标就是帮助Web 开发者更轻松的打造出功能丰富并 ...

  6. jQuery Easy UI Resizable(调整大小)组件

    Resizable(调整大小)组件,easyui基础组件之中的一个.调整大小就是能够对元素能够拖着调整大小,这个组件不依赖于其它组件,使用比較简单,相关的属性.事件都 在样例中介绍了. 演示样例: & ...

  7. jQuery Easy UI Droppable(放置)组件

    Droppable(放置)组件也是一个基本组件,使用方法较简单,语法都在样例里面凝视了: 演示样例: <!DOCTYPE html> <html> <head> & ...

  8. JQuery Easy Ui （Tree树）详解（转）

    第一讲:JQuery Easy Ui到底是什么呢? 首先咱们知道JQuery是对Java Script的封装,是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等.. JQuery ui是在j ...

  9. jQuery Easy UI LinkButton(button)包

    LinkButton(button)包,easyui其中一个基本组成部分 演示样例: <!DOCTYPE html> <html> <head> <title ...

  10. jQuery Easy UI Tooptip(提示框)组件

    我们都知道DOM节点的title属性.Tooptip组件就是比較强大的title,它能够自由的设置自己的样式.位置以及有自己相关的触发事件. 演示样例: <!DOCTYPE html> & ...

随机推荐

  1. [POI2007]EGZ-Driving Exam

    能到达所有路的充要条件是能到达左右两端的路 用vector反向建边对每条路左右分别求个最长不上升子序列 预处理出每条路向左向右分别需要多建多少路才能到达最左端和最右端 然后跑个\(\Theta(n)\ ...

  2. 洛谷P3384 树链剖分

    如题,已知一棵包含N个结点的树(连通且无环),每个节点上包含一个数值,需要支持以下操作: 操作1: 格式: 1 x y z 表示将树从x到y结点最短路径上所有节点的值都加上z 操作2: 格式: 2 x ...

  3. JavaScript访问对象的属性和方法

    对象的属性和方法统称为对象的成员. 访问对象的属性 在JavaScript中,可以使用“ . ”和“ [ ] ”来访问对象的属性. 二者区别:“ . ”表示法一般作为静态对象使用时来存取属性.而“[ ...

  4. redux-devtools的使用

    1.浏览器里安装redux-devtools 2.在项目的入口文件里  找到 createStore函数调用的地方,给它加第二个参数 window.__REDUX_DEVTOOLS_EXTENSION ...

  5. 屏幕录像LICEcap

    简介 LiceCap是一款轻量级屏幕录制工具 官网链接 windows版下载链接 Demo 以下是访问http://www.cockos.com/licecap/的屏幕录像

  6. Java多线程学习笔记（二）

    三 多线程执行的共享数据和非共享数据: 共享数据:就是每个线程执行的时候共享数据使用,比如这个线程一个为5的数据,减少为4之后,另一个线程执行拿到的数据是4,两个线程执行的数据是共享的. 非共享数据: ...

  7. 安装 Python IDLE (Linux)

    Python IDLE (Integrated Development and Learning Environment) 是一个官方的轻量级 Python IDE．在不同的 Linux 的发布版本中 ...

  8. springboot中filter的配置和顺序执行

    项目结构 springboot版本 <parent> <groupId>org.springframework.boot</groupId> <artifac ...

  9. 简单的3proxy配置

    timeouts 1 5 30 60 180 1800 15 60log "D:\Program Files\3proxy-0.6.1-x64\cfg\3proxy.log" Dl ...

  10. c#之反射(Reflection)

    一.反射是什么 反射就是.Net FrameWork框架为我们提供的一个帮助类库,它可以读取我们通过编译后生成的dll和exe文件里面metadate的信息. 反射可以动态的加载dll和exe文件,动 ...