本教程将向您展示如何验证一个表单。easyui框架提供一个validatebox插件来验证一个表单。在本教程中,我们将创建一个联系表单,并应用validatebox插件来验证表单,然后您可以根据自己的需求来调整这个表单。
创建表单
让我们创建一个简单带有name、email、subject和message字段的联系表单:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<
div
style
=
"padding:3px 2px;border-bottom:1px solid #ccc"
>Form Validation</
div
>
<
form
id
=
"ff"
method
=
"post"
>
<
div
>
<
label
for
=
"name"
>Name:</
label
>
<
input
class
=
"easyui-validatebox"
type
=
"text"
name
=
"name"
required
=
"true"
>
</
div
>
<
div
>
<
label
for
=
"email"
>Email:</
label
>
<
input
class
=
"easyui-validatebox"
type
=
"text"
name
=
"email"
required
=
"true"
validtype
=
"email"
>
</
div
>
<
div
>
<
label
for
=
"subject"
>Subject:</
label
>
<
input
class
=
"easyui-validatebox"
type
=
"text"
name
=
"subject"
required
=
"true"
>
</
div
>
<
div
>
<
label
for
=
"message"
>Message:</
label
>
<
textarea
name
=
"message"
style
=
"height:60px;"
></
textarea
>
</
div
>
<
div
>
<
input
type
=
"submit"
value
=
"Submit"
>
</
div
>
</
form
>
|
我们添加一个样式名为easyui-validatebox到input标记中,所以input标记将根据validType属性应用验证。
当表单无效时阻止表单提交
当用户点击表单的submit按钮时,如果表单是无效的,我们应该阻止表单提交。
1
2
3
4
5
6
7
8
9
|
$(
'#ff'
).form({
url:
'form3_proc.php'
,
onSubmit:
function
(){
return
$(
this
).form(
'validate'
);
},
success:
function
(data){
$.messager.alert(
'Info'
, data,
'info'
);
}
});
|
如果表单是无效的,将显示一个提示信息。
下载EasyUI示例:easyui-form-demo.zip
有兴趣的朋友可以点击查看更多有关jQuery EasyUI的教程>>