EasyUI学习第三篇：Form表单

ValidateBox 验证框

验证文本框必填，且字符在2~5之间.

$.extend($.fn.validatebox.defaults.rules, {
    midLength : {
        validator : function(value, param) {
            return value.length >= param[0] && value.length<= param[1];
        },
        message : ''
    }
});

<input class="easyui-validatebox" type="text"  validType="midLength[2,5]"
name="username" required=true missingMessage="用户名必填" invalidMessage="用户名必须在2到5个字符之间!"/>

验证密码框

<input class="easyui-validatebox" type="password"  validType="equalLength[4]"
                name="password" required=true missingMessage="密码必填"/>

$.extend($.fn.validatebox.defaults.rules, {
    equalLength : {
        validator : function(value, param) {
            return value.length == param[0] ;
        },
        message : '密码必须为4个字符!'
    }
});

NumberBox 数字框

验证年龄必填，且在10~100 小数点后没有

<input id="age" type="text" name="age"/>

$("#age").numberbox({
    min:10,  //允许的最小值
    max:100, //允许的最大值
    required:true ,  //必填字段  定义是否字段应被输入
    missingMessage:'年龄必填!' , //当文本框是空时出现的提示文字
    precision:0   //显示在小数点后面的最大精度
});

DateBox 日期框

<input id="birthday" style="width:160px;"  type="text" name="birthday" />

$("#birthday").datebox({
    required:true ,  //必填字段  定义是否字段应被输入
    missingMessage:'生日必填!' ,//当文本框是空时出现的提示文字
    editable:false  //定义是否用户可以往文本域中直接输入文字
});

DateTimeBox 日期时间框

<input id="startTime" style="width:160px;"  type="text" name="startTime"  value="" />
<input id="endTime" style="width:160px;"   type="text" name="endTime"  value="" />

$("#startTime,#endTime").datetimebox({
    required:true ,  //必填字段  定义是否字段应被输入
    missingMessage:'时间必填!' ,  //当文本框是空时出现的提示文字
    editable:false  //定义是否用户可以往文本域中直接输入文字
});

ComboBox 组合框

<input name="city" class="easyui-combobox" url="/CityServlet?method=getCity" valueField="id" textField="name"  />



private void getCity(HttpServletRequest request, HttpServletResponse response) throws IOException {
        //获取数据
         List<Province> plist = provinceService.queryProvince();

         response.setContentType("text/html;charset=utf-8");
         //将对象转换为json
         String str = JSONArray.fromObject(plist).toString();
         //回写
         response.getWriter().write(str);

  }

表单提交的三种方式

• 传统ajax方式提交
• 定义form自动提交
• 定义form手动提交

传统ajax方式提交

//传统ajax方式提交表单

$("#btn").click(function(){
    $.ajax({
        type:'post',   //请求方式
        url:'/UserServlet?method=save',//地址
        cache:false,  //是否情况缓存
        //async:false  设置为同步请求
        data:$('#myform').serialize() ,    //序列化表单  向后台发送的数据
        dataType:'text' ,//服务器返回时接收的数据类型
        success:function(result){
            var result = $.parseJSON(result);  //把字符串转成js对象
            $.messager.show({
                title:result.status,
                msg:result.message
            });
        },
        error:function(result){
            var result = $.parseJSON(result);
            $.messager.show({
                title:result.status,
                msg:result.message
            });
        }
    });
});

定义form手动提交

$("#myform").form({
    url : '/UserServlet?method=save',  //提交的URL
    onSubmit : function() {
        //进行表单字段验证，当全部字段都有效时返回 true 
        if(!$("#myform").form('validate')){
            $.messager.show({
                title:data.status,
                msg:data.message
            });
            return false;
        }

    },
    success : function(data) {
        var data=$.parseJSON(data);
        $.messager.show({
            title:data.status,
            msg:data.message
        });
    }

});

//手动 提交form   
$("#btn").click(function(){
    $('#myform').submit();  
});

//当按回车键的时候也提交表单
$('#myform').find('input').on('keyup',function(event){
    if(event.keyCode == 13){
        $('#myform').submit();
    }
});

定义form自动提交

$("#btn").click(function(){
    $('#myform').form('submit', {   
          url:'/UserServlet?method=save',   
          onSubmit: function(){   
              //进行表单字段验证，当全部字段都有效时返回 true 
              if(!$("#myform").form('validate')){
                  $.messager.show({
                        title:"错误提示",
                        msg:"表单中包含必填字段"
                  });
                  // 返回 false 来阻止提交
                  return false;
              }
          },   
          success:function(data){   
              var data=$.parseJSON(data);
              $.messager.show({
                title:data.status,
                msg:data.message
             });   
         }   
     });  
});