jquery miniui java_jQuery MiniUI 快速入门：表单开发（四）

表单开发包括：布局、验证、加载、提交、清除、重置等。

效果图如下：

表单布局使用HTML Table标签实现任意丰富的表单布局：

姓名：

地址：

性别：

年龄：

备注：

数据验证监听处理控件的"validation"事件，自定义验证规则和错误描述信息：

onvalidation="onUserNameValidation"class="mini-textbox"required="true" />functiononUserNameValidation(e) {

if(e.isValid) {

if(isEmail(e.value) == false) {

e.errorText = "必须输入邮件地址";

e.isValid = false;

}

}

}

使用mini.Form组件对多个控件进行验证：

varform = newmini.Form("#form1");

form.validate();

加载表单

$.ajax({url:"../data/FormService.aspx?method=LoadData",type:"post",success:function(text) {vardata = mini.decode(text);//反序列化成对象form.setData(data);//设置多个控件数据}});

提交表单

//提交表单数据varform = newmini.Form("#form1");

vardata = form.getData(); //获取表单多个控件的数据varjson = mini.encode(data); //序列化成JSON$.ajax({

url: "../data/FormService.aspx?method=SaveData",

type: "post",

data: { submitData: json },

success: function(text) {

alert("提交成功，返回结果:"+ text);

}

});

清除表单   form.clear();

重置表单form.reset();

参考示例：