摘要:简单介绍form的提交方式、与validatebox的结合使用。
一:form简介
Easyui中的form有两种提交方式、结合自己新添加的一种ajax提交方式、本文简单说明form的三种提交方式、和结合validatebox使用来校验基本信息。
二:form提交
以登录为例:下面是登录页面、注意要导入easyui所需要的css和js。
要引入的css+js:
<link rel="stylesheet" type="text/css"href="css/easyui/default/easyui.css"> <link rel="stylesheet" type="text/css" href="css/easyui/icon.css"> <link rel="stylesheet" type="text/css" href="css/easyui/demo.css"> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
登录的div和表单:
简单说明:
1、登录是使用dialog来作为界面的、初始化dialog有几种方式——(1)使用class="easyui-dialog"定义、使用data-options="xxx"来定义dialog属性、这种适合只具有基本样式、不具有与后台交互功能的时候的页面使用。(2)使用js初始化、适合与后台交互的界面使用、(3)可以混合使用。
1、通过ajax提交:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
loginAndregist = $('#loginAndregist').dialog({ closable:false, modal:true, draggable:false, buttons:[{ text:'注册', handler:function(){ $('#regist').dialog('open'); } },{ text:'登录', handler:function(){ if( $('#loginInputForm').form('validate')){ $.ajax({ url:'login_login.action', data:$('#loginInputForm').serialize(), cache:false, dataType:'text', success:function(r){ console.info(r); if(r == "success"){ $('#loginAndregist').dialog('close'); $.messager.show({ title : '提示', msg : '登录成功' }); }else{ $.messager.alert('标题','用户名密码错误'); } } }); } } }], });
简单说明:if( $('#loginInputForm').form('validate')){...}是将form与其内部的validatebox绑定、可以使用validatebox提供的校验规则来校验输入。若不使用这个而直接使用ajax提交、则不会使用validatebox提供的校验规则、当然也可以自己加校验方式、onSubmit()。
2、通过先初始化form、再在点击登录触发函数中提交
初始化form表单:
//初始化登录表单 loginInputForm = $('#loginInputForm').form({ url:'login_login.action', success:function(r){ console.info(r); if(r == "success"){ $('#loginAndregist').dialog('close'); $.messager.show({ title : '提示', msg : '登录成功' }); }else{ $.messager.alert('标题','用户名密码错误'); } } });
点击登录时提交表单:
loginAndregist = $('#loginAndregist').dialog({ closable:false, modal:true, draggable:false, buttons:[{ text:'注册', handler:function(){ $('#regist').dialog('open'); } },{ text:'登录', handler:function(){ loginInputForm.submit(); } }], });
简单说明:这里不再需要像ajax一样添加一个校验的if、因为这种方式的form是与validatebox绑定的、会自动校验。
3、直接在点击登录触发函数中提交
loginAndregist = $('#loginAndregist').dialog({ closable:false, modal:true, draggable:false, buttons:[{ text:'注册', handler:function(){ $('#regist').dialog('open'); } },{ text:'登录', handler:function(){ if( $('#loginInputForm').form('validate')){ $('#loginInputForm').form('submit',{ url:'login_login.action', onSubmit: function(){ console.info('do some check !'); }, success : function(r){ console.info(r); console.info(r); if(r == "success"){ $('#loginAndregist').dialog('close'); $.messager.show({ title : '提示', msg : '登录成功' }); }else{ $.messager.alert('标题','用户名密码错误'); } } }); } } }], });
$('#loginInputForm').form('submit',{...})、当点击登录按钮时会直接提交表单、红色部分可以对表单提交之前做一些操作、比如校验。
三:form注意事项
注意获取对象的不同、显示隐藏的时候、获取的是包含form表单的div、提交的是form。两者千万不要弄混了、所以使用jquery获取这两个节点时要注意id的区别、
1、获取div的id用于将div初始化成dialog: $('#divId').dialog(...);
2、获取div中的form的id用于初始化form表单:$('#formId').form(...);
3、三种提交表单方式:(1)在div中使用ajax提交、(2)将初始化好的表单提交:$('#formId').form().submit();(3)在登录按钮触发函数中$('#formId').form('submit',{xxx})
四:form提交网页完整(包括注册)
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <html> <base href="<%=basePath%>"> <title>login</title> <link rel="stylesheet" type="text/css" href="css/easyui/default/easyui.css"> <link rel="stylesheet" type="text/css" href="css/easyui/icon.css"> <link rel="stylesheet" type="text/css" href="css/easyui/demo.css"> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.easyui.min.js"></script> <script type="text/javascript"> /* 注意获取对象的不同、显示隐藏的时候、获取的是包含form表单的div、提交的是form。两者千万不要弄混了、所以使用jquery获取这两个节点时要注意id的区别、 1、获取div的id用于将div初始化成dialog: $('#divId').dialog(...); 2、获取div中的form的id用于初始化form表单: $('#formId').form(...); 3、三种提交表单方式:(1)在div中使用ajax提交、(2)将初始化好的表单提交: $('#formId').form().submit();(3)在登录按钮触发函数中$('#formId').form('submit',{xxx}) */ //节点的引用、当被初始化一次之后、后面就可以直接拿来使用了 var loginAndregist; var loginInputForm; var registForm; $(function(){ //初始化登录窗口 loginAndregist = $('#loginAndregist').dialog({ closable:false, modal:true, draggable:false, buttons:[{ text:'注册', handler:function(){ $('#regist').dialog('open'); } },{ text:'登录', handler:function(){ //loginInputForm.submit(); if( $('#loginInputForm').form('validate')){ $.ajax({ url:'login_login.action', data:$('#loginInputForm').serialize(), cache:false, dataType:'text', success:function(r){ console.info(r); if(r == "success"){ $('#loginAndregist').dialog('close'); $.messager.show({ title : '提示', msg : '登录成功' }); }else{ $.messager.alert('标题','用户名密码错误'); } } }); } /* if( $('#loginInputForm').form('validate')){ $('#loginInputForm').form('submit',{ url:'login_login.action', onSubmit: function(){ console.info('do some check !'); }, success : function(r){ console.info(r); console.info(r); if(r == "success"){ $('#loginAndregist').dialog('close'); $.messager.show({ title : '提示', msg : '登录成功' }); }else{ $.messager.alert('标题','用户名密码错误'); } } }); }*/ } }], }); //初始化登录表单 loginInputForm = $('#loginInputForm').form({ url:'login_login.action', success:function(r){ console.info(r); if(r == "success"){ $('#loginAndregist').dialog('close'); $.messager.show({ title : '提示', msg : '登录成功' }); }else{ $.messager.alert('标题','用户名密码错误'); } } }); //初始化注册窗口 $('#regist').show().dialog({ modal:true, closed:true, draggable:true, buttons:[{ text:'确认', handler:function(){ $('#registForm').submit(); } },{ text:'取消', handler:function(){ $('#regist').dialog('close'); } }], }); //初始化注册表单 registForm = $('#registForm').form({ url:'login_regist.action', success : function(r){ console.info(r); if(r == "success"){ $('#regist').dialog('close'); $.messager.show({ title : '提示', msg : '注册成功' }); }else{ $.messager.show({ title : '警告', msg : '注册失败' }); } } }); }); </script> <div id="loginAndregist" title="用户登录" style="300px;height:200px;"> <form id="loginInputForm" method="post" action="logion_login.action"> <table> <tbody><tr> <th align="right">username: </th> <td><input type="text" class="easyui-validatebox" required="true" name="username"></td> </tr> <tr> <th align="right">password: </th> <td><input type="text" class="easyui-validatebox" required="true" name="password"></td> </tr> </tbody></table> </form> </div> <div id="regist" title="用户注册" style="300px;height:200px;display: none;"> <form id="registForm" method="post" action="logion_regist.action"> <table> <tbody><tr> <th align="right">username: </th> <td><input type="text" class="easyui-validatebox" required="true" name="username"></td> </tr> <tr> <th align="right">password: </th> <td><input type="text" class="easyui-validatebox" required="true" name="password"></td> </tr> <tr> <th align="right">confirmpassword: </th> <td><input type="text" class="easyui-validatebox" required="true" name="confirmpassword"></td> </tr> </tbody></table> </form> </div>