<!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. Angular进阶教程二

    6.2自定义指令详解 angular的指令机制.angular通过指令的方式实现了HTML的扩展,增强后的HTML不仅长相焕然一新,同时也获得了很多强大的技能.更厉害的是,你还可以自定义指令,这就意味 ...

  2. 相比之前其他几个入门的， 推荐： 简单vue2 入门教程

    注意:Vue.js 不支持 IE8 及其以下 IE 版本.       具体可以看下  http://www.runoob.com/vue2/vue-tutorial.html 以下是学习过程 Vue ...

  3. Appium+java移动端项目测试问题整理

    一.每次打开APP都要重新安装.充值账号密码 解决:打开appium,设备,Use Browser  ,勾选“No Reset”   二.一个页面包含相同文字,打开页面路径错误 问题描述:APP处于[ ...

  4. Linux扩展根目录下的空间

    自己通过root创建了一个新用户,然而当我使用这个新用户时发现,/home/my中的空间只有几十M,完全不能满足我的使用,所以通过下面的方法扩展根下的空间. 我的本次操作,参考于 http://www ...

  5. 瞥了一眼js

    JS打开超链接的几种形式1.window.open(''url'') 2.用自定义函数<script>function openWin(tag,obj){obj.target=" ...

  6. js脚本快速评课----中科大教务系统

    git地址:https://github.com/hzphzp/js_ustc_mis_teach 代码 for(var i = 1; i < document.getElementsByTag ...

  7. notepad 操作总结

    1.竖向选择 先把鼠标光标放在起始位置,然后同时按 Alt+Ctrl 或Alt+shift键,然后移动鼠标选取内容. Word中只能用Alt+Shift .

  8. 《IT老外在中国》第11期：首次访华的编程巨匠、C#之父Anders

    见到Anders的时候,他正专注的倾听国内开发者的提问,一副远视眼镜斜歪着架在头顶,宽松的深蓝色休闲毛衫随意套在白色圆领T恤外. 如果不是他那专注的神情,以及现场见证开发者对他的狂热崇拜,很难想象这位 ...

  9. Linux 下Shell的学习3-优秀demo

    优秀的DEMO cat /etc/init.d/functions   -->里面有颜色定义cat /etc/rc.d/rc.sysinit cat /etc/init.d/nfscat /et ...

  10. Exchange2016 & Skype for business集成之二 OWA集成IM

    Microsoft Outlook Web App 和IM集成部署或升级Exchange server 2016与Skype for business 2015后使用原来2013版本方法集成OWA网页 ...