(三)EasyUI 使用——form表单1

form表单组件主要有以下内容(如下图)       

          

1. validatebox验证框

           

  姓名:必填/1-4个字符/必填中文

  邮箱:必填/1-30个字符/必填符合邮箱格式/后缀必须是com或cn

  密码验证:

<div style="margin:100px"></div>
    用户名:&nbsp;
    <input id="vv" />   <!-- 因为在下面js代码中声明了这是个验证框【 $("#vv").validatebox({}) 】,所以可以不加class="",否则需要加上【参考 #pwd】   -->
    <p/>&nbsp;&nbsp;箱:
    <input id="email" /><p/>&nbsp;&nbsp;码:
    <input id="pwd" name="pwd" type="password" class="easyui-validatebox"
        data-options="required:true" /><p/>
    验证密码:
    <input id="rpwd" name="rpwd" type="password" class="easyui-validatebox"
        required="required" validType="equals['#pwd']" />


    <script type="text/javascript">
        $("#vv").validatebox({    //声明了这是个验证框,且增加语法限制
            required : true,
            validType : [ "length[1,4]", "zhongwen" ]
        //设置了字符长度限制,中文规则自定义
        });

        $("#email").validatebox({
            required : true,
            validType : [ "length[1,30]", "email" ]       //email规则已经实现,无序自定义
        });
    </script>

    <script type="text/javascript">
        //自定义验证规则
        $.extend($.fn.validatebox.defaults.rules, {
            zhongwen : {
                validator : function(value) {//value表示在文本框中输入的内容    
                    if (/^[\u3220-\uFA29]+$/.test(value)) {
                        return true;
                    }
                },
                message : "用户名必须填中文"
            },
            equals : {
                validator : function(value, param) {
                    return value == $(param[0]).val();
                },
                message : "密码不匹配"
            }
        });
    </script>

2. combobox下拉列表框

  2.1 直接设置多选项<select>...<option>...

    你所在的城市:
    <select id="cc" class="easyui-combobox" name="city" style="width:150px;">   
        <option>aitem1</option>   
        <option>bitem1</option>   
        <option>bitem2</option>   
        <option>citem1</option>   
        <option>citem2</option>   
        <option>citem3</option>   
        <option>ditem1</option>   
        <option>ditem2</option>   
        <option>ditem3</option>   
        <option>ditem4</option>   
    </select>  
    <script type="text/javascript">
        $(function(){
            $("#cc").combobox("setValue","长沙");
        });
    </script>

   2.2 当数据量过多时,此时再利用 select 就很不方便,此时应该将选项保存到json文件中来引入

    你所在的城市:
    <input id="cc" name="city" value="广州" />

    <script type="text/javascript">
        $("#cc").combobox({
            //url表示引入json文件的路径
            //textField表示在下拉框中看得见的内容,<option>长沙</option>
            //valueField表示在下拉框中看不见的内容,用于向后台传递数据<option value="cs">长沙</option>
            url : "combobox_data.json",
            valueField : "id",
            textField : "text"
        });
    </script>
combobox_data.json 文件
[
  {    
    "id":"gz",    
    "text":"广州"   
  },
  {    
    "id":"zs",    
    "text":"中山"   
  },
  {    
    "id":"fs",    
    "text":"佛山"
  },
  {    
    "id":"sz",    
    "text":"深圳",
    "selected":true   
  },
  {    
    "id":"yj",    
    "text":"阳江"   
  }
]

因为链接到外面的 json文件,此时直接访问该文件可能只显示多选框而没有数据,需要将其发布到服务器上来得到期望的效果

        

3. datebox日期选择框

  默认显示yyyy-mm-dd格式,

  想要显示中文信息需要添加<script type="text/javascript" src="locale/easyui-lang-zh_CN.js"></script>

 

            

 选中日期并显示选中的日期

入职时间:<input id="dd" type="text"></input>  
    <script type="text/javascript">
        $("#dd").datebox({
            required:true
        });
    </script>
    <script type="text/javascript">
        $("#dd").datebox({
            onSelect:function(date){
                alert(date.getFullYear()+""+(date.getMonth()+1)+""+date.getDate());    
            }
        });
    </script>

 4. numberspinner数字微调框 

    设置数字微调框中的值

商品数量:
    <input type="text" size="2px" value="1" />
    <span></span>
    <hr />
    <input id="ss" required="required" style="width:90px;">
    <script type="text/javascript">
        $("#ss").numberspinner({
            value : 1,
            min : 1,
            max : 100,
            editable : true
        });
    </script>

   获取数字微调框中的值(上调或下调时及时显示),框内输入后敲击回车也及时显示框内数据

    

购买数量:
    <input id="ss" class="easyui-numberspinner" style="width:100px" />

    <script type="text/javascript">
        $("#ss").numberspinner({
            value : 1,
            min : 1,
            max : 100,
            editable : true
        //默认可编辑
        });
    </script>
    <p />
    你一共购买了
    <span id="num">1</span>件商品。。。

    <script type="text/javascript">
        $("#ss").numberspinner({
            onSpinUp : function() {
                //获取数字微调的当前值
                var value = $("#ss").numberspinner("getValue");
                $("#num").text(value).css("color", "red");
                //如果value值为100
                if (value == 100) {
                    $("span:first").html("商品已满,不能再购买了").css("color", "blue");
                    $("input:first").attr("disabled", "disabled");
                }
            },

            onSpinDown : function() {
                //获取数字微调的当前值
                var value = $("#ss").numberspinner("getValue");
                $("#num").text(value).css("color", "blue");
                //如果value值小于100
                if (value < 100) {
                    $("span:first").html("");
                    $("input:first").removeAttr("disabled");
                }
            }

        });
    </script>

    <script type="text/javascript">
        $("#ss").keyup(function(xxx) {
            //将浏览器产生的事件对象设置到myevent变量中
            var myevent = xxx;
            //获取按键的unicode码
            var code = myevent.keyCode;
            var value = $(this).val();
            //如果按钮是回车
            if (code == 13 && value<100 && value>1) {  //添加一些约束
                $("#num").text(value).css("color", "red");
            }   
        });
    </script>

 5. slider滑动条框

   拖动滑块,将值同步显示到span标签中

        

身高:
    <span>150</span>
    <span id="tip"></span>

    <div style="margin:50px">
        <input id="ss" class="easyui-slider" value="0"
            style="width:600px;height:500px"
            data-options="max:180,min:150,showTip:true,rule:[150,'|',160,'|',170,'|',180]" />
    </div>

    <script type="text/javascript">
        $("#ss").slider({
            onChange : function(newValue) {
                $("span:first").text(newValue);
                if (newValue == 180) {
                    $("#tip").text("身高可以");
                } else if (newValue >= 170) {
                    $("#tip").text("国民平均");
                } else if (newValue >= 160) {
                    $("#tip").text("还需努力");
                }
            }
        });
    </script>

 

posted @ 2017-05-10 21:47  雪山上的蒲公英  阅读(2943)  评论(0编辑  收藏  举报
/* 返回顶部代码 */