前面介绍过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. MySQL复制(二)Master-Slave复制实践

    1. 准备工作 首先要准备2台机器,分别安装mysql 我这里的版本是5.1.73,mysql数据库安装请参考:http://www.cnblogs.com/tangyanbo/p/4289753.h ...

  2. CSS控制图片和文字在同一行显示且对齐的3种方法

    CSS控制图片和文字在同一行显示且对齐的3种方法 在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见方法 ...

  3. grovvy pipeline 部署

    pipeline { agent any stages { stage('Checkout') { steps { echo 'Checkout' checkout([$class: 'GitSCM' ...

  4. P1474 货币系统 Money Systems

    题目描述 母牛们不但创建了它们自己的政府而且选择了建立了自己的货币系统.由于它们特殊的思考方式,它们对货币的数值感到好奇. 传统地,一个货币系统是由1,5,10,20 或 25,50, 和 100的单 ...

  5. 443 B. Table Tennis

    http://codeforces.com/contest/879/problem/B n people are standing in a line to play table tennis. At ...

  6. python为什么叫胶水语言？python为什么是系统脚本？

    python为什么叫胶水语言?python为什么是系统脚本?   特点是什么? python现在最广为闻名的形容大概有这些: 他是很好的胶水语言.什么是胶水语言?反正当时的我不知道. 他是新一代的系统 ...

  7. 解决：Cannot load ocl.dll library(error code 126). The ocil.dll library may be missing from the system

           因为这两天在做将springboot 项目使用的数据库MySQL转换为Oracle数据库,所以在网上查找相关资料后开始使用 Convert-Mysql-to-Oracle4.0做转换: ...

  8. MySQL 基础回顾

    mysql 回顾 数据库的设计必须满足三范式 1NF: 强调列的原子性,列不可拆分 eg: 一张表(联系人) 有(姓名,性别,电话)三列,但是现实中电话又可分为家庭电话和公司电话,这种表结构设计就不符 ...

  9. vue中使用codemirror

    https://blog.csdn.net/oumaharuki/article/details/79268498  别人的记载,写的很不错,还有下载的方法 以下是自己使用过的,做出来的例子: 做出来 ...

  10. 用NI的数据采集卡实现简单电子测试之4——半导体温度传感器

    本文从本人的163博客搬迁至此. 为了展示NImax(Measurement & Automation explorer)的强大配置功能,做了一个半导体温度传感器测试的示例. 一.半导体温度传 ...