正文
第二百二十一节，jQuery EasyUI，Form(表单)组件
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
jQuery EasyUI，Form(表单)组件
学习要点：
1.加载方式
2.属性列表
3.事件列表
4.方法列表
本节课重点了解 EasyUI 中 Form(表单)组件的使用方法，这个组件不依赖于任何组件
一．加载方式
表单组件只能在 JS 区域设置，首先定义一张表单。
<form id="box" method="post">
<div>
<label>用户名:</label>
<input type="text" name="name"/>
</div>
<div>
<label>邮箱:</label>
<input type="text" name="email"/>
</div>
<input type="submit">
</form>
JS 加载调用
form()将form表单元素执行表单组件方法
$(function () {
$('#box').form({
url: 'user.php',
onSubmit: function (param) { //在提交前触发
param.code = '320902'; //接收的参数可以自定义，额外发送数据，以定义名称=值
},
success: function (data) { //发送后触发，
alert(data); //接收响应内容
}
});
});
解析 JSON 数据
远程返回代码
//JSON类型
{
"name" : "bnbbs",
"email" : "bnbbs@163.com"
}
js代码
//读取JSON里面的email值
success: function (data) {
var data = eval('(' + data + ')'); //将字符串转换成JSON类型
if (data.email) {
alert(data.email); //读取JSON里面的email值
}
}
自动提交，只有在form()方法里，第一个参数写上'submit'就会自动提交
$(function () {
$('#box').form('submit',{
url: 'user.php',
onSubmit: function (param) { //在提交前触发
param.code = '320902'; //接收的参数可以自定义，额外发送数据，以定义名称=值
},
success: function (data) { //发送后触发，
alert(data); //接收响应内容
}
});
});
二．属性列表
url string 提交表单动作的 URL 地址。默认值 null。
$(function () {
$('#box').form('submit',{
url: 'user.php',
onSubmit: function (param) { //在提交前触发
param.code = '320902'; //接收的参数可以自定义，额外发送数据，以定义名称=值
},
success: function (data) { //发送后触发，
alert(data); //接收响应内容
}
});
});
三．事件列表
onSubmit param 在提交之前触发，返回 false 可以终止提交。
$(function () {
$('#box').form({
url: 'user.php',
onSubmit: function (param) { //在提交前触发
param.code = '320902'; //接收的参数可以自定义，额外发送数据，以定义名称=值
},
success: function (data) { //发送后触发，
alert(data); //接收响应内容
}
});
});
success data 在表单提交成功以后触发。
$(function () {
$('#box').form({
url: 'user.php',
onSubmit: function (param) { //在提交前触发
param.code = '320902'; //接收的参数可以自定义，额外发送数据，以定义名称=值
},
success: function (data) { //发送后触发，
alert(data); //接收响应内容
}
});
});
注意：以下3个事件要结合load方法使用，也就是一般要在获取数据填充到表单时使用
onBeforeLoad param在请求加载数据之前触发。返回 false 可以停止该动作。【不推荐】
$(function () {
$('#box').form({
onBeforeLoad: function (param) {
alert('在请求之前');
param.code = '320902'; //接收的参数可以自定义，额外发送数据，以定义名称=值
},
onLoadSuccess: function (data) {
alert('在请求完成之后');
alert(data);
},
onLoadError: function (param) {
alert('在请求出错后');
}
});
$('#box').form('load','uer.php'); //获取数据
});
onLoadSuccess data 在表单数据加载完成后触发。【不推荐】
$(function () {
$('#box').form({
onBeforeLoad: function (param) {
alert('在请求之前');
param.code = '320902'; //接收的参数可以自定义，额外发送数据，以定义名称=值
},
onLoadSuccess: function (data) {
alert('在请求完成之后');
alert(data);
},
onLoadError: function (param) {
alert('在请求出错后');
}
});
$('#box').form('load','uer.php'); //获取数据
});
onLoadError none 在表单数据加载出现错误的时候触发。
$(function () {
$('#box').form({
onBeforeLoad: function (param) {
alert('在请求之前');
param.code = '320902'; //接收的参数可以自定义，额外发送数据，以定义名称=值
},
onLoadSuccess: function (data) {
alert('在请求完成之后');
alert(data);
},
onLoadError: function (param) {
alert('在请求出错后');
}
});
$('#box').form('load','uer.php'); //获取数据
});
四．方法列表
submit options 执行自动提交操作，该选项参数是一个对象。
$(function () {
$('#box').form('submit',{
url: 'user.php',
onSubmit: function (param) { //在提交前触发
param.code = '320902'; //接收的参数可以自定义，额外发送数据，以定义名称=值
},
success: function (data) { //发送后触发，
alert(data); //接收响应内容
},
});
});
load data 读取记录填充到表单中。
$(function () {
$('#box').form({
url: 'user.php',
onSubmit: function (param) { //在提交前触发
param.code = '320902'; //接收的参数可以自定义，额外发送数据，以定义名称=值
},
success: function (data) { //发送后触发，
alert(data); //接收响应内容
},
});
$('#box').form('load', { //将对象里的数据填充到对应的输入框
name: 'bnbbs', //将值填充到name为name的输入框
email: 'bnbbs@163.com', //将值填充到name为email的输入框
});
//当然也可以将远程JSON数据填充到输入框如,xxx.php里是JSON数据
// $('#box').form('load','xxx.php');
});
clear none 清除表单数据。
$(function () {
$('#box').form({
url: 'user.php',
onSubmit: function (param) { //在提交前触发
param.code = '320902'; //接收的参数可以自定义，额外发送数据，以定义名称=值
},
success: function (data) { //发送后触发，
alert(data); //接收响应内容
},
});
$('#box').form('clear');
});
reset none 重置表单数据。
$(function () {
$('#box').form({
url: 'user.php',
onSubmit: function (param) { //在提交前触发
param.code = '320902'; //接收的参数可以自定义，额外发送数据，以定义名称=值
},
success: function (data) { //发送后触发，
alert(data); //接收响应内容
},
});
$('#box').form('reset');
});
validate none做表单字段验证，当所有字段都有效的时候 返 回 true 。 该 方 法 使 用validatebox(验证框)插件。【重点】
$(function () {
$('input[name=name]').validatebox({ //验证表单
required: true, //不能为空
});
$('#box').form({
url: 'user.php',
onSubmit: function (param) { //在提交前触发
return $(this).form('validate'); //当所有字段都有效的时候 返 回 true ，返回false不能提交表单
param.code = '320902'; //接收的参数可以自定义，额外发送数据，以定义名称=值
},
success: function (data) { //发送后触发，
alert(data); //接收响应内容
}
});
});
enableValidation none 启用验证。
$(function () {
$('input[name=name]').validatebox({ //验证表单
required: true, //不能为空
});
$('#box').form({
url: 'user.php',
onSubmit: function (param) { //在提交前触发
return $(this).form('validate'); //当所有字段都有效的时候 返 回 true ，返回false不能提交表单
param.code = '320902'; //接收的参数可以自定义，额外发送数据，以定义名称=值
},
success: function (data) { //发送后触发，
alert(data); //接收响应内容
}
});
$('#box').form('enableValidation');
});
disableValidation none 禁用验证。
$(function () {
$('input[name=name]').validatebox({ //验证表单
required: true, //不能为空
});
$('#box').form({
url: 'user.php',
onSubmit: function (param) { //在提交前触发
return $(this).form('validate'); //当所有字段都有效的时候 返 回 true ，返回false不能提交表单
param.code = '320902'; //接收的参数可以自定义，额外发送数据，以定义名称=值
},
success: function (data) { //发送后触发，
alert(data); //接收响应内容
}
});
$('#box').form('disableValidation');
});
使用$.fn.form.defaults 重写默认值对象。
