再谈表单验证
多数时候,我们可以用submitAjaxForm将表单数据发送给服务器,由服务器对输入结果进行验证处理,参考:submitAjaxForm
不过如果表单中包括文件上传组件,那么需要比较长的时间,才能将所有数据和文件上传到服务器,验证通过也罢,如果验证失败,时间的浪费是很可惜的。
其实验证通常只是针对数据,而不是针对文件,我们可以用submitAjaxFileds将需要验证的数据发送到服务器,验证成功,才提交整个表单数据。
一个例子
希望设计一个下图所示的输入界面,当用户单击提交按钮的时候,可以先将产品、数量和折扣三列的数据提交到服务器,由服务器进行验证,验证通过后,再提交整个表单的数据和文件:
知识准备
用户单击确定按钮提交表单的时候,会触发表单的onsubmit事件,这个事件如果返回false,将终止提交表单。
例如下面的定义表单的代码,表示提交表单前,先执行validit函数:
wb.AddForm("","form1","addnew.htm").Attribute="onsubmit='return validit()'"
我们在validit函数中将需要验证的数据,用submitAjaxFileds将要验证的数据提交给服务器,根据服务器返回的结果,决定是否正常提交表单。
设计步骤
1、在"d:\web"目录下,建立一个子目录lib,在这个目录建立一个文本文件,文件名为"ajaxform.js",文件内容为:
function
validit(){
var result=submitAjaxFileds("valid.htm","","产品","数量","折扣",false);
if(result=="OK"){
return true;
}
else{
showTopTips("toptip1",result,2500);
return false;
}
}
这段js代码在提交表单之前执行,将产品、数量和折扣提交到服务器的valid.htm页面进行验证,如果服务器返回OK,则允许提交表单,否则显示一个错误提示,并禁止提交表单。
2、HttpRequest事件代码:
Select
Case e.Path
Case
"addnew.htm"
If e.PostValues.Count
= 0
Then
Dim wb
As New
weui
wb.AddTopTips("","toptip1","")
'用于显示动态错误提示
wb.AddForm("","form1","addnew.htm").Attribute="onsubmit='return
validit()'"
With wb.AddInputGroup("form1","ipg1","新增订单")
.AddSelect("产品","产品","|PD01|PD02|PD03")
.AddInput("数量","数量","number")
.AddInput("单价","单价","number").Step
= 0.1
.AddInput("折扣","折扣","number").Step
= 0.01
With .AddUploader("up1","图片",True)
.TextPosition =
0
'标题靠左
.AddImage("./images/shuqi2.jpg")
End
With
End
With
With wb.AddButtonGroup("form1","btg1",True)
.Add("btn1",
"确定","submit")
End
With
wb.AppendHTML("<script
src='./lib/ajaxform.js'></script>")
'引入脚本文件
e.WriteString(wb.Build)
Else
Dim sb
As New
StringBuilder
sb.AppendLine("<meta
name='viewport' content='width=device-width,initial-scale=1,user-scalable=1'>")
sb.AppendLine("我已经收到您提交的数据和文件")
e.WriteString(sb.Tostring)
End
If
Case
"valid.htm"
If e.PostValues.ContainsKey("产品")
AndAlso e.PostValues.ContainsKey("数量")
AndAlso e.PostValues.ContainsKey("折扣")
Then
If e.PostValues("产品")
= "PD01" AndAlso
e.PostValues("数量")
> 1000
Then
e.WriteString("PD01库存只剩1000啦!")
ElseIf e.PostValues("产品")
= "PD01" AndAlso
e.PostValues("折扣")
> 0.1
Then
e.WriteString("PD01的最大允许折扣为0.1哦")
Else
e.WriteString("OK")
End
If
Else
e.WriteString("请完整输入订单内容!")
End
If
End
Select