改善Form提交数据的UI 交互设计
数据一次校验 完整的数据校验需要前台页面（JS）和后台程序分别做校验 虽然有Commons validate 框架可以使用 但本质上还是分为这么 次校验 如果校验出错或者程序出错 都是后台采用redirect的方式返回到前台 虽然采用了struts之类框架的都是forward到前台 如果要是做复杂和耗时的校验（比如要进行数据库校验） 页面会长时间停留在后台页面 不是很友好和方便
验证信息友好化 让验证码 躲 起来 为了防止机器提交 都会采用验证码机制 对于正常操作的用户 每次都要输入验证码 显然不够不友好的 如果提交的时候能够做判断 如果是正常提交就不需要验证码 如果是被认定为机器提交 诸如连续提交等行为 则提示需要输入验证码才能提交数据 这样显然就进了一步
提交过程友好显示 拒绝滥用alert界面 通过为了简单 在返回任何数据的时候 都用alert提示给用户 alert最大的问题在于需要点击一下才能关闭 如果提交成功能自动关闭是不是比这种alert要好很多？
采用AJAX +JSON 方式提交数据 与传统提交数据 的比较
var ajaxSubmitFormData = {
form:false //用来保存正在提交的表单
debug:false
callback:false
dataType: json
onSubmit:function(data){
//正在提交数据提示
}
onResponse:function(response){
//当数据返回时触
}
onResponse :function(data){
alert( 恭喜你 数据提交成功 )
window location reload(false)
}
onResponse :function(data){
//输入验证码界面
var formId=ajaxSubmitFormData form
if (!$(formId) find( :input[name= verfiyCode ] ) length){
$(formId) append( <input type= text name= verfiyCode size= /><img src= verifyCode jsp >)
}
}
onResponse :function(data){
var s= 提交错误:\n
//alert(data length)
for(var i= i<data lengthi++){
s=s+data[i] id+ | +data[ssage+ \n
}
alert(s)
}
onResponse :function(data){
if (data length>){
window location=data[ssage
}else{
alert( 未定义跳转地址 )
}
}
}
$(document) ready(function(){
$( form ajaxForm ) submit(function() {
//alert($(this) attr( id ))
var formId=$(this) attr( id )
submitAjaxFormNow( # +formId)
return false// <important!
})
$( ajaxSubmitButton ) click(function(){
var formId=$(this) attr( formId )
//alert($(this) attr( formId ))
submitAjaxFormNow( # +formId)
})
})
function initSubmitAjax(formId returnFunc){
var options= {
beforeSubmit: function(formData jqForm options) {
if (ajaxSubmitFormData debug){
var queryString = $ param(formData)
alert( 正在提交的数据:\n + queryString)
}
if ($ isFunction(ajaxSubmitFormData onSubmit)) {
ajaxSubmitFormData onSubmit(formData)
}
return true
}
success:function (responseText statusText) {
try{
if (ajaxSubmitFormData debug){
alert( status: + statusText + \nresponseText:\n + responseText)
}
if ($ isFunction(ajaxSubmitFormData onResponse)) {
ajaxSubmitFormData onResponse(responseText)
}
ajaxSubmitFormData form =false
ajaxSubmitFormData callback =false
// TODO 改成触发事件方式
responseText=responseText replace(/\r\n/g )
//trim space
responseText=responseText replace(/^\s*|\s*$/g )
var response = eval(responseText)[ ]//转换成json格式
if (de == ){
if ($ isFunction(returnFunc)) {
ajaxSubmitFormData callback=returnFunc
returnFunc(ssages)
}else{
if ($ isFunction(ajaxSubmitFormData onResponse )) {
ajaxSubmitFormData onResponse (ssages)
}
}
//$(formId) triggerHandler( ajax_response_ ssages)
}
if (de == ){
//保存当前
ajaxSubmitFormData form = formId
ajaxSubmitFormData callback = returnFunc
if ($ isFunction(ajaxSubmitFormData onResponse )) {
ajaxSubmitFormData onResponse (ssages)
}
//$(formId) triggerHandler( ajax_response_ ssages)
}
if (de == ){
if ($ isFunction(ajaxSubmitFormData onResponse )) {
ajaxSubmitFormData onResponse (ssages)
}
//$(formId) triggerHandler( ajax_response_ ssages)
}
if (de == ){
if ($ isFunction(ajaxSubmitFormData onResponse )) {
ajaxSubmitFormData onResponse (ssages)
}
//$(formId) triggerHandler( ajax_response_ ssages)
}
}catch(e){
alert( 服务器返回的数据格式无效:\n +responseText+ \nError: +ssage)
}
}
clearForm:true
resetForm:true
timeout:
type: POST
}
$(formId) ajaxError(function(event request settings){
alert( 处理请求发生错误:\n +settings url+ \n请重新刷新页面或稍后再试 )
$ unblockUI()
})
return options
}
function submitAjaxFormNow(formId returnFunc){
if ($(formId))
$(formId) ajaxSubmit(initSubmitAjax(formId returnFunc))
}
function submitAjaxForm(formId returnFunc){
if ($(formId))
$(formId) ajaxSubmit(initSubmitAjax(formId returnFunc))
}
预览
lishixinzhi/Article/program/Java/hx/201311/27021
Command1.Action:=true-----（这个是“计算”的）双击“计算”按钮就可以写代码了
Command1.Action:=false-----（这个是“关闭”的）
表单，在网页中的作用不可小视，主要负责数据采集的功能，比如你可以采集访问者的名字和e－mail地址、调查表、留言簿等等。
1、表单的组成
一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。 为了顾及不同的网页设计工具，本文只讲述代码的设计，不具体讲述操作方法，下面就是表单的HTML代码设计要点：
1.1 表单标签＜form＞＜/form＞
<form action="add.php" method="post" name="myform">
标题：<br>
<input type="text" name="title"/><br><br>
内容：<textarea name="content" rows="10" cols="50" wrap="on"></textarea><br>
<input type="submit" name="tianjia" value="发布留言">
<input type="reset" value="重置">
</form>
For i = 1920 To 2220
List1.AddItem CStr(i) &"-6-1"
Next
For i = 0 To List1.ListCount - 1
If Weekday(CDate(List1.List(i))) = 6 Then
n = n + 1
End If
Next
Label1.Caption = n
End Sub
<input type="text" name="label1" value="信息工程学院">
<input onclick="document.form1.label1.value='汉语090301李玉'" type="button" value="command1">
<input onclick="document.form1.label1.value='信息工程学院'" type="button" value="command2">
</form>
你要是在IDE环境下，拖拽出来的窗体，那么双击窗体图标，就出现设计窗口了。
如果你是在form1中，直接new出来的，那么你看不到form2的窗口。
就是这样。
原因：因为你写在了form1中按钮的代码中，在设计模式下，那个form2还没有产生呢，所以你看不到form2的设计窗口。
明白没？
，肯定行
protected
override
void
WndProc(ref
Message
m)
{
if
(m.Msg
==
0x00A1
&&
m.WParam.ToInt32()
==
2)
return
base.WndProc(ref
m)
}
此组件为一个多行输入框，利用它可以快速实现表单验证，输入内容
此组件为一个单选框，数据在当前页面
当未选中任何值时，返回数据为null，否则返回数据对象{id:0,label:'名称'}。
此组件为一个多选框，数据在当前页面
当未选中任何值时，返回数据为[]，否则返回数据对象[{id:0,label:'名称'}]。
此组件为一个提交按钮，专为form表单设计使用
