xworker.html.jqueryesayui.form.validatebox
事物 validatebox(validatebox)

描述者：

MetaDescriptor3

thing

继承：

EasyUIThing

Override defaults with $.fn.validatebox.defaults.

The validatebox is designed to validate the form input fields. If users enter invalid values, it will change the background color, display the alarm icon and a tooltip message. The validatebox can be integrated with form plugin and will prevent invalid fields from submission.

Dependencies

• tooltip

Usage

Create validatebox from markup.

Create validatebox using javascript.

To check password and retype password are same.

Validate Rule

The validate rule is defined by using required and validType property, here are the rules already implemented:

• email: Match email regex rule.
• url: Match URL regex rule.
• length[0,100]: Between x and x characters allowed.
• remote['http://.../action.do','paramName']: Send ajax request to do validate value, return 'true' when successfully.

To custom validate rule, override $.fn.validatebox.defaults.rules that defines a validator function and invalid message. For example, to define a minLength valid type:

Now you can use the minLength validtype to define an input box that should be inputed at least 5 characters:

delay

Delay to validate from the last inputting value. This property is available since version 1.3.2.

deltaX

Tooltip offset in the X direction. This property is available since version 1.3.3.

generateDiv

是否先生成一个DIV。

id

对应的div的id属性值。

invalidMessage

ooltip text that appears when the content of text box is invalid.

label

missingMessage

Tooltip text that appears when the content of text box is invalid.

name

otherAttributes

一些其他属性，如：

onClick="javascript:void(0)" align="left"

required

Defines if the field should be inputed.

style

html的style属性，如：

width:100px;height:100px;

tipPosition

Defines the position of tip message when the content of text box is invalid. Possible values: 'left','right'. This property is available since version 1.3.2.

validType

Defines the field valid type, such as email, url, etc. Possible values are:
1) a valid type string, apply a single validate rule.
2) an valid type array, apply multiple validate rules. The multiple validate rules on a field are available since version 1.3.2.

Code example:

<input class="easyui-validatebox" data-options="required:true,validType:'url'">
<input class="easyui-validatebox" data-options="
	required:true,
	validType:['email','length[0,20]']
">

getClass

返回EsayUI的class名称，一般是easyui-draggable，其中draggable是事物名的小写。

getHtmlTag

一般EasyUi事物对应的html标签是div，如果有其他的，比如form中的元素，那么可能是input，则需要重载此方法。

toHtml

toJavaScriptCode

ExtJs

EXtjs组件。

FormLayout(表单布局)

 表单布局使用Table布局，表单布局认为子事物都含有标签和输入，因此表单布局默认。

HtmlTag

可以自定义简单的HTML标签。

JavaScript

作用

用于生成JavaScript代码片段，所有能够生成JavaScript代码片段的都应注册到此子事物下。

• toHtml
  如果放在一般的HTML事物节点下，那么生成一个<script type="javascript">的标签，然后把代码片段放到这个标签下。
   
• toJavaScriptCode
  如果放在其他JavaScript的节点下，那么只会调用toJavaScriptCode方法生成JavaScript代码片段。

JavaScript注册

所有能够生成 JavaScript代码的事物都应该注册到本事物下。

重载toHtml方法

如果一个事物继承了JavaScript并且只是用于生成JavaScript代码的，那么应该重载toHtml方法，返回在toHtml方法里返回null，可以使用NOOP动作。

XWRemoteSupport

提供打开窗口、打开TabItem等功能。

button(按钮)

checkBox(复选框)

code(代码)

可以直接编辑HTML的地方。

comboBox(下拉框)

dateInput(日期输入)

diagram(图表)

div

简单的div标签。

form(表单)

grid(数据格)

hidden(隐藏输入)

隐藏字段。

htmlCode(HTML代码)

通过XWorker内置的HTML编辑器编写HTML代码。

label(标签)

list(列表)

menu(菜单)

password(密码框)

radioButton(选项按钮)

span

简单的span标签。

table(表格)

textArea(文本区)

textField(文本框)

yui-ext