【EasyUI篇】Form表单组件

微信公众号：程序yuan
关注可获得更多资源。问题或建议，请公众号留言;

查看--> 全套EasyUI示例目录

27.Form表单组件

Controller文件

@RequestMapping(value = "/validateUser")
@ResponseBody
public String validateUser(String name, String email,String code){
    System.out.println(name);
    System.out.println(email);
    System.out.println(code);
    //简单拼成json格式的字符串
    return "{\"name\":\""+name+"\",\"email\":\""+email+"\",\"code\":\""+code+"\"}";
}

@RequestMapping(value = "/getUserInfo")
@ResponseBody
public String validateUser(){
    String name = "ooyhao";
    String email = "[email protected]";
    String code = "123456789";
    //简单拼成json格式的字符串
    return "{\"name\":\""+name+"\",\"email\":\""+email+"\",\"code\":\""+code+"\"}";
}

JSP文件

<%--
  Created by IntelliJ IDEA.
  User: ooyhao
  Date: 2018/7/29 0029
  Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    
    
    
    
    
    
    
    
    
    
    



    <%--只有JS加载方式--%>
    
        

        

            Name:
            
        
        

        

            Email:
            
        
        

        
    

    


    按钮

JS文件

$(function () {

    //使用submit方法提交
     $('#box').form(/*'submit',*/{
        url:'http://localhost:8081/easyui/validateUser.action',
        onSubmit:function (param) {

            // param.name = 'yanghao';
            // param.email = '[email protected]';
            param.code = '1234567';
            //返回false停止提交
            //通过验证的结果来判断是否需要进行表单提交
            return $('#box').form('validate');
        },
        success:function (data) {
            //将字符串转换为json串
            var v = eval('('+data+")");
            if(v.name)
                alert(v.name);
            if(v.email)
                alert(v.email);
            if(v.code)
                alert(v.code);

        },

        onLoadSuccess:function (data) {
            alert(data);
        },
        onLoadError:function () {
            alert("cuowu");
        }
    });
    $('#box').form('disableValidation');
    $('#btn').click(function () {
        //验证表单
        // alert($('#box').form('validate'));
        //禁用表单验证
        // $('#box').form('disableValidation');
        //启用表单验证
        $('#box').form('enableValidation');
    });

   /* $('#box').form({
        onBeforeLoad:function (param) {
            alert("before Load");
        },
        onLoadSuccess:function (data) {
            console.log(data);
        },
        onLoadError:function () {
            alert("load 失败");
        }
    });*/
     // $('#box').form('load', 'http://localhost:8081/easyui/getUserInfo.action');

});

效果图

 

 

 

------------------------------------------------

关注小编微信公众号获取更多资源