前面介绍过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. npm发布插件步骤

    开发好一个插件后,要想让其他人也能使用该插件需要将插件发布到npm上,具体步骤如下: 1.添加npm用户: npm adduser Username: your name Password: your ...

  2. Opencv——级联分类器（AdaBoost）

    API说明: cv::CascadeClassifier::detectMultiScale(InputArray image,//输入灰度图像 CV_OUT std::vector<Rect& ...

  3. HDU2544（dijkstra_邻接矩阵最水的题没有之一）

    https://cn.vjudge.net/problem/HDU-2544 在每年的校赛里,所有进入决赛的同学都会获得一件很漂亮的t-shirt.但是每当我们的工作人员把上百件的衣服从商店运回到赛场 ...

  4. 443 C. Short Program

    http://codeforces.com/contest/879/problem/C Petya learned a new programming language CALPAS. A progr ...

  5. P1063 能量项链

    题目描述 在Mars星球上,每个Mars人都随身佩带着一串能量项链.在项链上有N颗能量珠.能量珠是一颗有头标记与尾标记的珠子,这些标记对应着某个正整数.并且,对于相邻的两颗珠子,前一颗珠子的尾标记一定 ...

  6. 四步掌握CAN节点隔离设计

    四步掌握CAN节点隔离设计 “隔离”是模块为CAN节点设备提供可靠数据传输的首要保障,通常隔离模块的“隔离”是指模块上电后,能为节点提供信号隔离及电源隔离,隔离电压等级以2500VDC.3500VDC ...

  7. Kafka集群配置

    kafka_2.11-0.9.0.1.tgz 1.进入项目前的目录 cd /home/dongshanxia mkdir kafka #创建项目目录 cd kafka #进入项目目录 mkdir ka ...

  8. rpm-yum_install_software

    rpm -ivh software_name安装软件 打印详情rpm -q software_name查询软件是否安装rpm -ql software_name查询安装目录rpm -e softwar ...

  9. laravel5.5源码笔记（七、数据库初始化）

    laravel中的数据库也是以服务提供者进行初始化的名为DatabaseServiceProvider,在config文件的providers数组中有写.路径为vendor\laravel\frame ...

  10. js单图片上传

    <form action="" id="form1"> <input type="file" name="hea ...