前面介绍过EasyUI是一个前段框架，开发之前需要导入底层包；我这里采用的是EasyUI 1.4版本~

今天主要是搭建一个EasyUI的环境，同时做一个登陆页面...

环境搭建

　　

　　导入需要的文件到项目中，我这里只导入需要用到的一些文件：

　　EasyUI 有两种方式创建一个表单，一种是通过HTML样式创建，另一种则是通过js来创建，这里推荐第二种js创建。

一则js创建实现了分离，而来避免不必要的验证，比如dom没加载完成，用户点击了按钮触发某些事件等...

首先采用第一种方式创建一个form表单（这里只有2个输入框，name添加了非空校验，email添加了邮件格式校验）

 <form id="myform" method="post">

         <div>

             <label for="name">Name:</label>

             <input class="easyui-validatebox" type="text" name="name" data-options="required:true" />

         </div>

         <div>

             <label for="email">Email:</label>

             <input class="easyui-validatebox" type="text" name="email" data-options="validType:'email'" />

         </div>

     </form>

　　看一下浏览器展示效果：

　　呀，看到这里大家肯定想问：“这是什么鬼？”

其实这是一个很常见的问题页面乱码，产生这种问题大部分的原因是因为页面文件编码格式和当前浏览器解析编码格式不一致导致的，这时我们需要为浏览器指定解析的格式。

 <meta name="content-type" content="text/html; charset=utf-8">

     <script src="/wonder4/UI/jquery.min.js" charset=utf-8></script>

     <script src="/wonder4/UI/jquery.easyui.min.js" charset=utf-8></script>

     <script src="/wonder4/UI/locale/easyui-lang-zh_CN.js" charset=utf-8></script>

看上面一段代码，我在js引入时，同时添加了编码格式的utf-8的属性。

这样就没有乱码的情况了~

其他的都可以参杂API，没什么太大的问题，这一篇主要是做一个demo，看一下怎么用这个框架...下面贴一个js构建页面的代码。

 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

 <%

 String path = request.getContextPath();

 %>

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 <html>

   <head>

     <title>注册</title>

     <meta http-equiv="pragma" content="no-cache">

     <meta http-equiv="cache-control" content="no-cache">

     <meta http-equiv="expires" content="0">

     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

     <meta http-equiv="description" content="This is my page">

     <script src="<%=path%>/UI/jquery.min.js" charset=utf-8></script>

     <script src="<%=path%>/UI/jquery.easyui.min.js" charset=utf-8></script>

     <script src="<%=path%>/UI/locale/easyui-lang-zh_CN.js" charset=utf-8></script>

     <link href="<%=path%>/UI/themes/icon.css" rel="stylesheet" />

     <link href="<%=path%>/UI/themes/default/easyui.css" rel="stylesheet" />

     <style type="text/css">

     #divform{width:250px;margin: 100px auto;border:1px solid #d1d1d1;padding:15px 35px;}

     table tr td{line-height: 21px;}

     </style>

     <script type="text/javascript">

     //页面加载

     $(function(){

         InitInput();

     });

     //初始化页面控件

     function InitInput()

     {

         $('#username').validatebox({

             required: true,

             validType:'length[6,12]',

             missingMessage:'用户名不能为空'

         });

         $('#useremail').validatebox({

             required: true,

             validType:['email','length[6,20]'],

             missingMessage:'邮箱不能为空'

         });

         $('#usersex').combobox({

             valueField:'id',

             textField:'text',

             data:[{id:-1,text:'保密'},{id:0,text:'男'},{id:1,text:'女'}],

             onSelect:function(sex){

                 $('#usersex').val(sex.id);

             }

         });

         $('#userpwd').validatebox({

             required: true,

             validType:'length[6,12]',

             missingMessage:'密码不能为空'

         });

         $('#userbirth').datebox({

             required:true

         });

         $('#btnOK').linkbutton({

             iconCls: 'icon-save',

             onClick:function(){ClickSub();}

         });

         $('#btnCancle').linkbutton({

             iconCls: 'icon-clear',

             onClick:function(){$('#myform').form('clear');}

         });

         $('#myform').form({

             url:'www.baidu.com',

             onSubmit: function(){

                 $.messager.progress();    // 显示进度条

             },

             success:function(data){

                 $.messager.progress('close');    // 如果提交成功则隐藏进度条

             }

         });

     }

     //点击提交按钮的逻辑

     function ClickSub()

     {

         var isValidated=$('#myform').form('validate');

         if(isValidated){

         $('#myform').submit();  //表单提交

         }

     }

     </script>

   </head>

   <body>

    <div id="divform">

    <form id="myform" method="post">

    <table><tr><td colspan="2" style="text-align: center;">注册</td></tr>

    <tr><td>用户名：</td><td><input name="username" id="username"></td></tr>

    <tr><td>邮箱：</td><td><input name="useremail" id="useremail"></td></tr>

    <tr><td>性别：</td><td><input name="usersex" id="usersex" value="0"></td></tr>

    <tr><td>密码：</td><td><input name="userpwd" id="userpwd" type="password"></td></tr>

     <tr><td>生日：</td><td><input name="userbirth" id="userbirth"></td></tr>

     <tr><td><a id="btnOK" href="javascript:void(0);">提交</a></td><td align="center"><a id="btnCancle" href="#">清空</a></td></tr>

    </table>

       </form>

    </div>

   </body>

 </html>

贴几张效果图：

EasyUI系列学习笔记（一）——注册的更多相关文章

  1. EasyUI 开发笔记(二)

    接上篇 :EasyUI 开发笔记(一)  (http://www.cnblogs.com/yiayi/p/3485258.html) 这期就简单介绍下, easyui 的 list 展示, 在easy ...

  2. MVA Universal Windows Apps系列学习笔记1

    昨天晚上看了微软的Build 2015大会第一天第一场演讲,时间还挺长,足足3个小时,不过也挺震撼的.里面提到了windows 10.Microsoft edge浏览器.Azure云平台.Office ...

  3. 《Machine Learning》系列学习笔记之第一周

    <Machine Learning>系列学习笔记 第一周 第一部分 Introduction The definition of machine learning (1)older, in ...

  4. EasyUI 开发笔记(一)

    由于某些原因,在公司做的后台需要改成类似于Ext.js 形式的后台,主要看好其中的 框架布局,以及tab开页面和弹出式内部窗体. 后来看看,改成EasyUI,较Ext.js 库小很多,也便于公司的初级 ...

  5. easyui学习笔记8—在手风琴中加载其他的页面

    在手风琴中加载其他页面和在表格中加载其他的页面有写类似的,就是请求另外一个页面显示数据. 1.先看看引用的资源文件 <link rel="stylesheet" href=& ...

  6. easyui学习笔记2—在行内进行表格的增删改操作

    第一篇笔记中记录了如何实现表格的增删改,那个是点击之后跳出来一个对话框然后进行的,这里是在表格本身上进行的操作,也很简单,但是这里发现一个版本问题,也可以说是兼容性问题. 1.首先我们看引用的js和c ...

  7. easyui学习笔记1—增删改操作

    最近公司要用easyui,这里自己看了官网几篇文章,遇到些问题,大多数的问题都是敲代码的时候笔误,其他有些地方确实需要注意一下,这里做些笔记. 1.在mysql中建好表之后修改id字段为递增字段,发现 ...

  8. jQuery EasyUI 使用笔记

    大家有四次抢票机会.第一次是放票时间之后的30分钟.第二次机会是开车前的15天.第三个机会是开车前的48小时.第四个机会是开车前的24小时. $("#gys_key").combo ...

  9. Javascript设计模式系列学习笔记

    因为是学习笔记,里面并没有很多注释和讲解,所有不太适合0基础的朋友看,只能说抱歉了. 这些笔记目前还存在很多的问题,不过我相信再今后的学习过程中会把这些问题挨个的解决. 除了前面3节后面的都不分前后顺 ...

随机推荐

  1. 树&二叉树&&满二叉树&&完全二叉树&&完满二叉树

    目录 树 二叉树 完美二叉树(又名满二叉树)(Perfect Binary Tree) 完全二叉树(Complete Binary Tree) 完满二叉树(Full Binary Tree) 树 名称 ...

  2. Django之Model (ORM)

    传统操作数据库 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接数据库,并编写数据访问层代码 业务逻辑层去调用数据访问层 ...

  3. （转）em重建全过程

    该问题遇到N次,被郁闷N次,特此记录以备不时之需 由于n久不用em,而本机在公司使用dhcp自动获取ip,导致ip变化,而使em启动报出ora-12514 DBD ERROR: OCIServerAt ...

  4. Python内置函数.md

    Python3 内置函数 abs(x) 返回一个数的绝对值.参数可以是一个整数或者一个浮点数.如果参数是一个复数,那么将返回它的模. >>> abs(-123456) 123456 ...

  5. jQuery事件处理

    浏览器的事件模型 DOM第0级事件模型 Event实例 他的属性提供了关于当前正被处理的已触发事件的大量信息.这包括一些细节,比如在哪个元素上触发的事件.鼠标事件的坐标以及键盘事件中单击了哪个键. 事 ...

  6. 【转】Android业务组件化之URL Scheme使用

    前言: 最近公司业务发展迅速,单一的项目工程不再适合公司发展需要,所以开始推进公司APP业务组件化,很荣幸自己能够牵头做这件事,经过研究实现组件化的通信方案通过URL Scheme,所以想着现在还是在 ...

  7. Hive学习之路 （九）Hive的内置函数

    数学函数 Return Type Name (Signature) Description DOUBLE round(DOUBLE a) Returns the rounded BIGINT valu ...

  8. [整理记录备忘] CentOS 7 相关记录

    CentOS 7 命令行模式安装GNOME.KDE图形界面 一.进入 root 模式 因为权限限制,所以我们需要进入 root 模式,开机使用 root 登陆或者系统运行中切换为 root 用户均可. ...

  9. vue.js数据绑定

      语法         插值             双大括号:{{text}} {{*text}}之渲染第一次 {{{html}}}        表达式(各种数值,变量,运算符的综合体)     ...

  10. 小H和密码

    链接:https://www.nowcoder.com/acm/contest/72/B来源:牛客网 题目描述     小H在击败怪兽后,被一个密码锁挡住了去路     密码锁由N个转盘组成,编号为1 ...