jQuery EasyUI之Form表单提交

Form 表单


 

用法

1.  <form id="ff" method="post">  

2.      ...   

3.  </form>  

使 form 成为 ajax 提交的 form 。

1.  $('#ff').form({   

2.      url:...,   

3.      onSubmit: function(){   

4.          // 做某些检查   

5.          // 返回 false 来阻止提交   

6.      },   

7.      success:function(data){   

8.          alert(data)   

9.      }   

10. });   

11. // 提交 form   

12. $('#ff').submit();  

去做一个提交动作。

1.  // 调用 form  插件的 'submit' 方法来提交 form   

2.  $('#ff').form('submit', {   

3.      url:...,   

4.      onSubmit: function(){   

5.          // 做某些检查   

6.          // 返回 false 来阻止提交   

7.      },   

8.      success:function(data){   

9.          alert(data)   

10.     }   

11. });  

特性

名称

类型

说明

默认值

url

string

表单提交动作的 URL。

null

事件

名称

参数

说明

onSubmit

none

提交前触发,返回 false 来阻止提交动作。

success

data

当表单提交成功时触发。

onBeforeLoad

param

发出请求加载数据之前触发。返回 false 就取消这个动作。

onLoadSuccess

data

当表单数据加载时触发。

onLoadError

none

加载表单数据时发生某些错误的时候触发。

方法

名称

参数

说明

submit

options

做提交动作, options 参数是一个对象,它包含系列特性:
url:动作的 URL
onSubmit:提交之前的回调函数
success:提交成功之后的回调函数

load

data

加载记录来填充表单。
data 参数可以是一个字符串或者对象类型,字符串作为一个远程 URL,否则作为一个本地记录。

clear

none

清除表单数据。

validate

none

进行表单字段验证,当全部字段都有效时返回 true 。这个方法和 validatebox 插件一起使用。



注意:Form表单用于提交数据,封装成POJOs对象,进行数据库的CRUD操作。使用Form表单进行提交数据,常使用Validate进行表单验证,以使数据格式正确。


ValidateBox验证框


 

用 $.fn.validatebox.defaults 重写了 defaults。

用法

1.  <input id="vv" required="true" validType="email">  

 

1.  $('#vv').validatebox({   

2.      required:true  

3.  });  

验证规则

验证规则是通过使用 required 和 validType 特性来定义的, 这里是已经实施的规则:

  • email:匹配 email 正则表达式规则
  • url:匹配 URL 正则表达式规则
  • length[0,100]:允许从 x 到 y 个字符
  • remote['http://.../action.do','paramName']:发送 ajax 请求来验证值,成功时返回 'true' 。

要自定义验证规则,重写 $.fn.validatebox.defaults.rules ,来定义一个验证函数和无效的信息。例如,定义一个 minLength 验证类型:

<script type = "text/javascript">

1.  $.extend($.fn.validatebox.defaults.rules, {  解释,第一个参数表示通过$.extend重写了一个默认的validatebox方法。第二个参数是一个Json对象,对象的值也是一个Json对象。

2.      minLength: {   

3.          validator: function(value, param){   

4.              return value.length >= param[0];   

5.          },   

6.          message: 'Please enter at least {0} characters.'  

7.      }   

8.  });  

</script>

现在你可以使用这个 minLength 验证类型,去定义一个至少输入5个字符的输入框:

1.  <input class="easyui-validatebox" validType="minLength[5]">  

特性

名称

类型

说明

默认值

required

boolean

定义是否字段应被输入。

false

validType

string

定义字段的验证类型,比如 email、url,等等。

null

missingMessage

string

当文本框是空时出现的提示文字。

This field is required.

invalidMessage

string

当文本框的内容无效时出现的提示文字。

null

方法

名称

参数

说明

destroy

none

移除并且销毁这个组件。

validate

none

进行验证以判定文本框的内容是否有效。

isValid

none

调用 validate 方法并且返回验证结果,true 或者 false。



使用validatebox进行表单验证,可以创建自己 自定义验证规则,重写 $.fn.validatebox.defaults.rules ,

$.extend($.fn.validatebox.defaults.rules,{

midLength:{

validator:function(value,param){

return value.length >= param[0] && value.length <= param[1];

},

message :'用户名必须在2到五个字符之间!'

};

})


<td> <input   type ="text"  name="username"  class="easyui-validatebox"required="true"  validType="midLength[2,5]  value= """/></td>


如何对年龄进行校验:

NumberBox数字框


扩展自 $.fn.validatebox.defaults,用 $.fn.numberbox.defaults 重写了 defaults 。

依赖

  • validatebox

用法

1.  <input type="text" id="nn"></input>  

 

1.  $('#nn').numberbox({   

2.      min:0,   

3.      precision:2,   

 requird:true

4.  });  

特性

其特性扩展自 validatebox,下列是为 numberbox 增加的特性。

名称

类型

说明

默认值

disabled

boolean

定义是否禁用该域。

false

min

number

允许的最小值。

null

max

number

允许的最大值。

null

precision

number

显示在小数点后面的最大精度。

0

方法

其方法扩展自 validatebox,下列是为 numberbox 追加或重写的方法。

名称

参数

说明

disable

none

禁用该域。

enable

none

启用该域。

fix

none

把值固定为有效的值。



如何对日期进行校验:

DateBox日期框

扩展自 $.fn.combo.defaults。用 $.fn.datebox.defaults 重写了 defaults。

 

依赖

  • combo
  • calendar

用法

1.  <input id="dd" type="text"></input>  

 

1.  $('#birthday').datebox({   //通过id选择器,选中出生日期,添加配置项

2.      required:true  ,

 missingMessage ''生日必填"

3.  });  

特性

其特性扩展自 combo,下列是为 datebox 增加的特性。

名称

类型

说明

默认值

panelWidth

number

下拉日历面板的宽度。

180

panelHeight

number

下拉日历面板的高度。

auto

currentText

string

当前日期按钮上显示的文字。

Today

closeText

string

关闭按钮上显示的文字。

Close

okText

string

确定按钮上显示的文字。

Ok

disabled

boolean

为 true 时禁用该域。

false

formatter

function

格式化日期的函数,此函数有一个 'date' 参数,并返回一个字符串值。

 

parser

function

解析日期字符串的函数,此函数有一个 'date' 字符串参数,并返回一个日期值。

 

事件

名称

参数

说明

onSelect

date

当用户选择一个日期时触发。

方法

其方法扩展自 combo,下列是为 datebox 重写的方法。

名称

参数

说明

options

none

返回 options 对象。

calendar

none

获取 calendar 对象。

setValue

value

设置 datebox 的值。



<td>出生日期</td>

<td><input id ="birthday"  type ="text" name-"birthday"  value = "" /></td>

 

  • combo组合


 

扩展自 $.fn.validatebox.defaults 。 用 $.fn.combo.defaults 重写了 defaults 。

 

依赖

  • validatebox
  • panel

用法

1.  <input id="cc" value="001">  

2.  <select id="cc"></select>  

 

1.  $('#cc').combo({   

2.      required:true,   

3.      multiple:true  

4.  });  

特性

其特性扩展自 validatebox,下列是为 combo 增加的特性:

名称

类型

说明

默认值

Width

number

组件的宽度。

auto

panelWidth

number

下拉面板的宽度。

null

panelHeight

number

下拉面板的高度。

200

multiple

boolean

定义是否支持多选。

false

separator

string

多选时文本的分隔符。

,

editable

boolean

定义是否用户可以往文本域中直接输入文字。

true

disabled

boolean

定义是否禁用文本域。

false

hasDownArrow

boolean

定义是否显示向下箭头的按钮。

true

Value

string

默认值。

 

Delay

number

从最后一个键的输入事件起,延迟进行搜索。

200

keyHandler

object

当用户按键后调用的函数。默认的 keyHandler 像这样定义:

keyHandler: {

          up: function(){},

          down: function(){},

          enter: function(){},

          query: function(q){}

}

 

事件

说明

参数

说明

onShowPanel

none

当下拉面板显示的时候触发。

onHidePanel

none

当下拉面板隐藏的时候触发。

onChange

newValue, oldValue

当文本域的值改变的时候触发。

方法

其方法扩展自 validatebox,下列是为 combo 增加的方法。

名称

参数

说明

options

none

返回选项(options)对象。

panel

none

返回下拉面板对象。

textbox

none

返回文本框对象。

destroy

none

销毁组件。

resize

width

调整组件的宽度。

showPanel

none

显示下拉面板。

hidePanel

none

隐藏下拉面板。

disable

none

禁用组件。

enable

none

启用组件。

validate

none

验证输入的值。

isValid

none

返回验证结果。

clear

none

清除组件的值。

getText

none

获取输入的文本。

setText

text

设置文本值。

getValues

none

获取组件的值的数组。

setValues

values

设置组件的值的数组。

getValue

none

获取组件的值。

setValue

value

设置组件的值。

 

表单提交中,所属城市显示成一个下拉框显示中国所有城市,怎么实现:

<td>所属城市</td>

<td><input  name="city"  class="easyui-combobox"  url = "UserServlet?method=getCity" value=""

 valueField= "id"  textField="name"/></td>

url:用于发送一个异步的请求。返回数据,数据是以Json来传递的,把后台获得的城市数据打包成Json,

例如:List<City> clist = new ArrayLIst<City>();

   clist.add(new City(1,"北京"));

   

   clist.add(new City(2,"上海"));

           clist.add(new City(3,"广州"));


   JSONArray.fromObject(clist);//转换成Json格式数据

      System.out.println(JSONArray.fromObject(clist).toString());


   response.setContentType("text/html",charset=utf-8);

   String str = JSONArray.fromObject(clist).toString();

   response.getWriter().write(str);

首先导入Json的相关Jar包,利用提供的类,直接把一个对象转换成Json的数据。

ComboBox组合框


 

扩展自 $.fn.combo.defaults。 用 $.fn.combobox.defaults 重写了 defaults。

 

依赖

  • combo

用法

1.  <select id="cc" name="dept" style="width:200px;">  

2.      <option value="aa">aitem1</option>  

3.      <option>bitem2</option>  

4.      <option>bitem3</option>  

5.      <option>ditem4</option>  

6.      <option>eitem5</option>  

7.  </select>  

 

1.  <input id="cc" name="dept" value="aa">  

 

1.  $('#cc').combobox({   

2.      url:'combobox_data.json',   

3.      valueField:'id',   

4.      textField:'text'  

5.  });  

json 数据格式的示例

1.  [{   

2.      "id":1,   

3.      "text":"text1"  

4.  },{   

5.      "id":2,   

6.      "text":"text2"  

7.  },{   

8.      "id":3,   

9.      "text":"text3",   

10.     "selected":true  

11. },{   

12.     "id":4,   

13.     "text":"text4"  

14. },{   

15.     "id":5,   

16.     "text":"text5"  

17. }]  

特性

其特性扩展自 combo,下列是为combobox 增加的特性。

名称

类型

说明

默认值

valueField

string

绑定到 ComboBox 的 value 上的基础数据的名称。

value

textField

string

绑定到 ComboBox 的 text 上的基础数据的名称。

text

mode

string

定义在文本改变时如何加载列表数据。如果组合框从服务器加载就设为 'remote' 。

local

url

string

从远程加载列表数据的 URL 。

null

method

string

用来检索数据的 http method 。

post

data

array

被加载的列表数据。

null

filter

function

定义当 'mode' 设为 'local' 时如何过滤数据。这个函数有两个参数:
q:用户输入的文字
row:列表中的行数据。
返回 true 就允许显示该行。

 

formatter

function

定义如何呈现行。这个函数有一个参数:row。

 

事件

其事件扩展自 combo,下列是为 combobox 增加的事件。

名称

参数

说明

onLoadSuccess

none

当远程数据加载成功时触发。

onLoadError

none

当远程数据加载失败时触发。

onSelect

record

当用户选择一个列表项时触发。

onUnselect

record

当用户取消选择一个列表项时触发。

方法

其方法扩展自 combo,下列是为 combobox 追加或重写的方法。

名称

参数

说明

options

none

返回 options 对象。

getData

none

返回加载的数据。

loadData

data

加载本地列表数据。

reload

url

请求远程的列表数据。

setValues

values

把数组设置为组合框的值。

setValue

value

设置组合框的值。

clear

none

清除组合框的值。

select

value

选择指定的选项。

unselect

value

取消选择指定的选项。



开始时间和结束时间如何精准到时分秒:

<td>开始时间</td>

<td><input id="startTime" type="text" name="startTime" value=""/></td>

<td>结束时间</td>

<td><input id="endTime" type="text" name="startTime" value=""/></td>



DateTimeBox日期时间框


扩展自 $.fn.datebox.defaults。用 $.fn.datetimebox.defaults 重写了 defaults。

 

依赖

  • datebox
  • timespinner

用法

1.  <input id="dt" type="text"></input>  

 

1.  $('#startTime').datetimebox({   

2.    

 required:true;  

 missingMessage:'时间必填',

 editable:false

3.  });  

特性

其特性扩展自 datebox,下列是为 datetimebox 增加的特性。

名称

类型

说明

默认值

showSeconds

boolean

定义是否显示秒的信息。

true

方法

其方法扩展自 datebox,下列是为 datetimebox 重写的方法。

名称

参数

说明

options

none

返回 options 对象。

spinner

none

返回 timespinner 对象。

setValue

value

设置 datetimebox 的值。





©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页