前面介绍过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. HTML、jsp页面中radio，checkbox，select数据回显功能，默认被选中问题

    最近常常遇到各种复选框.单选框.下拉框的默认被选中的问题,开始也是绞尽脑汁的想办法,今天写一篇学习总结的博文来写一下学习总结. 单选框(radio)默认被选中: 一.jstl技术进行回显 <in ...

  2. 2002. [HNOI2010]弹飞绵羊【LCT】

    Description 某天,Lostmonkey发明了一种超级弹力装置,为了在他的绵羊朋友面前显摆,他邀请小绵羊一起玩个游戏.游戏一开始,Lostmonkey在地上沿着一条直线摆上n个装置,每个装置 ...

  3. 清除SQL server 记住的用户名和密码

    公司更换电脑,清除SQL server 记住的用户名和密码 请按照上图中的位置找到相应的文件SqlStudio.bin,然后把它删除,请放一百个心,这个文件会自动生成的. 需要注意的是,在删除之前一定 ...

  4. TensorFlow函数（九）tf.add_to_collection()、tf.get_collection() 和 tf.add_n()

    tf.add_to_collection(name, value) 此函数将元素添加到列表中 参数: name:列表名.如果不存在,创建一个新的列表 value:元素 tf.get_collectio ...

  5. Hive学习之路 （二）Hive安装

    Hive的下载 下载地址http://mirrors.hust.edu.cn/apache/ 选择合适的Hive版本进行下载,进到stable-2文件夹可以看到稳定的2.x的版本是2.3.3 Hive ...

  6. jQuery内容横向拖拽滚动

    如果有业务需求:使用横向滚动,而又不想用滚动条,可以使用横向拖拽滚动,主要是利用元素的scrollLeft特性: 废话不多说直接上代码: css: .box{ width:100%; height:3 ...

  7. Kafka设计解析（十一）Kafka无消息丢失配置

    转载自 huxihx,原文链接 Kafka无消息丢失配置 目录 一.Producer端二.Consumer端 Kafka到底会不会丢数据(data loss)? 通常不会,但有些情况下的确有可能会发生 ...

  8. CentOS中用Nexus搭建maven私服，为Hadoop编译提供本地镜像

    系统: CentOS release 6.6 (Final) Nexus:nexus-2.8.1-bundle.tar.gz,下载地址:https://sonatype-download.global ...

  9. NRF52832 能烧写代码 但是不运行 ，是因为没有烧写协议栈

    仿真进入的状态 , MOVES R0.R0 请烧写  协议栈 ,自行百度!

  10. Property Injection in Asp.Net Core （转载）

    问: I am trying to port an asp.net application to asp.net core. I have property injection (using ninj ...