<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>文本提示</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />
<script src="../../scripts/boot.js" type="text/javascript"></script>
<style type="text/css">
.errorText
{
color:red;
}
</style>
</head>
<body>
<h1>文本提示</h1>
<div id="form1">
<table>
<tr>
<td>
<label for="username$text">帐号：</label>
</td>
<td>
<input name="username" errorMode="none" onvalidation="onUserNameValidation" vtype="email" class="mini-textbox" required="true" requiredErrorText="帐号不能为空"/>
</td>
<td id="username_error" class="errorText"></td>
</tr>
<tr>
<td>
<label for="pwd$text">密码：</label>
</td>
<td>
<input name="pwd" errorMode="none" onvalidation="onPwdValidation" class="mini-password" required="true" vtype="minLength:5" minLengthErrorText="密码不能少于5个字符"/>
</td>
<td id="pwd_error" class="errorText"></td>
</tr>
<tr>
<td>
</td>
<td>
<input value="Login" type="button" οnclick="submitForm()" />
</td>
</tr>
</table>
</div>
<script type="text/javascript">
mini.parse();
function submitForm() {
var form = new mini.Form("#form1");
form.validate();
if (form.isValid() == false) return;
//提交数据
var data = form.getData();
var json = mini.encode(data);
$.ajax({
url: "../data/FormService.jsp?method=SaveData",
type: "post",
data: { submitData: json },
success: function (text) {
alert("提交成功，返回结果:" + text);
}
});
}
//
function updateError(e) {
var id = e.sender.name + "_error";
var el = document.getElementById(id);
if (el) {
el.innerHTML = e.errorText;
}
}
function onUserNameValidation(e) {
updateError(e);
}
function onPwdValidation(e) {
updateError(e);
}
</script>
<div class="description">
<h3>Description</h3>
<p>设置表单控件"errorMode=none"，验证失败时，控件将不显示任何错误提示。
</p>
<p>在"onvalidation"事件处理函数中，调用updateError方法，将不同控件的错误信息集中在一个DOM元素内显示。</p>
</div>
</body>
</html>
1847
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
