<!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. android中利用HttpURLConnection进行Get、Post和Session读取页面。

    直接上代码,调用的时候要放在线程中. package slj.getsms; import java.io.BufferedReader; import java.io.InputStreamRead ...

  2. 神奇的AC

  3. PHP读取Excel类文件

    想要使用PHP读取Excel文件必然要用到PHPExcel开源类库,网上资源应该挺多的.但是每一种的操作必然都是不同的,可原理应该都是大同小异. 这个文件夹里包含的就是PHPExcel类文件,在外面还 ...

  4. Linux 添加yum命令

    第一步,国内的yum仓库 http://mirrors.163.com/centos/7/os/x86_64/Packages/ http://mirrors.aliyun.com/centos/7/ ...

  5. HTML中的Head标签学习

    在页面加载完成的时候,标签head里的内容,是不会在页面中显示出来的.它包含了像页面的<title>(标题) ,CSS(如果你想用CSS来美化页面内容),图标和其他的元数据(比如 作者,关 ...

  6. WebService程序数据集之WSDL取数

    在通用的webservice集合中,在集合中使用wsdl取数的方式获取数据,并将数据转换为程序数据集,那么怎样通过wsdl取数并转换为程序数据集呢? 首先将wsdl获取到的数据数据转换为二维数组,然后 ...

  7. 编辑文本（EditText）

    今天要给大家介绍的是简单的编辑文本框: 先看一下它的基本属性: 1.Activity public class EditTextActivity extends Activity { private ...

  8. 运行第一个MapReduce程序，WordCount

    1.安装Eclipse 安装后如果无法启动重新配置Java路径(如果之前配置了Java) 2.下载安装eclipse的hadoop插件 注意版本对应,放到/uer/lib/eclipse/plugin ...

  9. 三年Linux运维工作总结教训

    Linux运维一定要知道的六类好习惯和23个教训,避免入坑! 从事运维三年半,遇到过各式各样的问题,数据丢失,网站挂马,误删数据库文件,黑客攻击等各类问题. 今天简单整理一下,分享给各位小伙伴. 一. ...

  10. 定义类、System.Object对象、构造函数与析构函数、抽象类与静态类

    一.类定义 class MyClass { //类成员 } 1.访问级别 默认访问级别为internal(内部类),也可以是public(公共类) internal(内部类):当前项目中的代码才能访问 ...