<!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. 安装 Zsh 及 Oh-my-zsh

    详细介绍就略过吧,可以参考这篇文章:使用ZSH的九个理由 下面记录一下我在配置ZSH的过程中的要点: 1.基本上你能找到的配置教程都是基于oh-my-zsh的. 因为zsh配置过于复杂,所以有了oh- ...

  2. [C++]多线程: 教你写第一个线程

    原文:http://blog.csdn.net/cn_wk/article/details/62236057 hello thread! 声明线程A的端口号 #include <pthread. ...

  3. 磁贴界面颜色 Metro UI Colors

    http://www.oschina.net/p/metro-ui-colors 介绍 包含了磁贴界面(Metro UI)使用的颜色集合(浅绿色,绿色,深绿色,品红,紫色等).可以查看每一种颜色的各种 ...

  4. EventTarge Node Docuement Element HTMLElement 关系

    综述: 可以将其看做是依次继承的关系: Node Node A Node is an interface from which a number of DOM types inherit, and a ...

  5. MySQL中有关char、varchar、int、tinyint、decimal

    char.varchar属于字符串类型 1.char属于定长,能确切的知道列值的长度,也就是有多少个字符.当指定char(5)时,表示只能存5个字符,如5个英文‘a’,5个汉字‘我’,5个符号‘&am ...

  6. TCP状态统计 - 脚本命令

    一.netstat命令说明 netstat常见参数 -a (all)显示所有选项,默认不显示LISTEN相关 -t (tcp)仅显示tcp相关选项 -u (udp)仅显示udp相关选项 -n 拒绝显示 ...

  7. hbase启动问题记录

    昨天测试环境的Hbase启动有问题,日志中显示: transaction type: 1 error: KeeperErrorCode = NoNode for /hbase hmaster等其他进程 ...

  8. 构建微软智能云：介绍新的Azure业务转型创新技术

    在我和用户的交流中发现,在任何类型和规模的组织中,每当涉及到在云中实现商业价值的最大化并取得竞争优势的时候,就会明显呈现三个趋势.首先,应用程序促进着组织更快速实现价值.同时,诸如机器学习.数据预测分 ...

  9. iTextSharp 使用详解(转)

    PDF文件是目前比较流行的电子文档格式,在办公自动化(OA)等软件的开发中,经常要用到该格式,但介绍如何制作PDF格式文件的资料非常少,在网上搜来搜去,都转贴的是同一段“暴力”破解的方法,代码片断如下 ...

  10. Java实例---俄罗斯方块

    代码分析 定义格子 package com.ftl.tetris; /** * 定义格子 */ import java.awt.image.BufferedImage; public class Ce ...