第二百二十一节，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 重写默认值对象。