前面介绍过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. 循环while 和 continue

    while 1: print("行动吧") # 组成:while 条件: #条件为真,则执行语句块.之后再回去判断条件是否为真,再执行....till条件为假为止. 语句块 # 条 ...

  2. app数据加密方法

    由于项目涉及到注册和登录,所以我了解一下现在app使用比较广泛的几种密码加密方法,可以当作参考,以下都是在python3.5的环境下使用这些算法的例子. 1.base64 Base64是一种基于64个 ...

  3. 张高兴的 Windows 10 IoT 开发笔记：0.96 寸 I2C OLED

    This is a Windows 10 IoT Core project on the Raspberry Pi 2/3, coded by C#. GitHub:https://github.co ...

  4. BZOJ 1305 dance跳舞 二分+最大流

    题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=1305 题目大意: 一次舞会有n个男孩和n个女孩.每首曲子开始时,所有男孩和女孩恰好配成 ...

  5. BM求递推式模板

    时间复杂度\(O(N^2)\),原理不明...... #include <cstdio> #include <cstring> #include <cmath> # ...

  6. HDU5343:MZL's Circle Zhou(SAM,记忆化搜索DP)

    Description Input Output Sample Input Sample Output Solution 题意:给你两个串,分别从两个里面各选出一个子串拼到一起,问能构成多少个本质不同 ...

  7. kubernetes 安装学习

    什么是Kubernetes Kubernetes是一个开源平台,用于跨主机群集自动部署,扩展和操作应用程序容器,提供以容器为中心的基础架构. 使用Kubernetes,您可以快速高效地响应客户需求: ...

  8. $NOIp$前的日常

    嗯,一想到没准今年\(NOIp\)之后就要退役了,觉得没准这篇博客就是我OI史上的绝唱了-- \(hhh\),希望不会这样. \(12.4\) 退役了是真的233-- 居然感到一身轻松啊qwqwq \ ...

  9. C语言程序设计I—第十二周教学

    第十二周教学总结(19/11-25/11) 教学内容 第4章 循环结构 4.5 循环结构程序设计 课前准备 在蓝墨云班课发布资源: PTA:2018秋第十二周作业4.5 分享码:B7FA52A13B6 ...

  10. CANOPEN开发问题

    我是一名研二的学生,现在教研室要开发canopen,我已经看了几个月了,在网上找了canopen的开源代码CANfestival,现在想做移植,有几个问题想要请教:1,开发主站,只买beckhoff的 ...