有一个validation框架非常优雅地实现表单校验,它基于prototype和script.aculo.us。
从 [url]http://tetlaw.id.au/view/javascript/really-easy-field-validation[/url] 下载,有一个简单而详细的例子说明它的用法 。
I. 首先在页面头部引入js库
II. 加入一段css代码
III. HTML代码
当运行该页面,如果username不输入任何文字或者telephoNumber输入非数字和字母时,点击search按钮时,将看到错误信息提示。 class="required validate-alphanum" 是validation内建的校验规则名称。当执行new Validation('test', {immediate : true}),Field失去焦点或者执行表单提交动作时,该表单下的所有内建类校验名的校验规则将被触发。
[img]http://dl.iteye.com/upload/attachment/467120/e15210fa-29d6-393b-94f8-3967e0a34d34.gif[/img]
从 [url]http://tetlaw.id.au/view/javascript/really-easy-field-validation[/url] 下载,有一个简单而详细的例子说明它的用法 。
I. 首先在页面头部引入js库
<script type='text/javascript' src='prototype.js'></script>
<script type='text/javascript' src='validation.js'></script>
<script type='text/javascript' src='effects.js'></script>
II. 加入一段css代码
<style>
input.disabled {
border: 1px solid #F2F2F2;
background-color: #F2F2F2;
}
input.required, textarea.required {
border: 1px solid #00A8E6;
}
input.validation-failed, textarea.validation-failed {
border: 1px solid #FF3300;
color : #FF3300;
}
input.validation-passed, textarea.validation-passed {
border: 1px solid #00CC00;
color : #000;
}
.validation-advice {
margin: 5px 0;
padding: 5px;
background-color: #FF3300;
color : #FFF;
font-weight: bold;
}
</style>
III. HTML代码
<form id="test" action="#" >
<table border="1px">
<tr>
<td class = "label">Username</td>
<td><input type="text" name="username" id = "username" class="required"></td>
</tr>
<tr>
<td class = "label">Telephone Number</td>
<td><input type="text" name="telephoneNumber" class="required validate-alphanum" id = "telephoneNumber"></td>
</tr>
<tr>
<td colspan = "2" align = "center">
<button class = "submit" id = "search">Search</button>
</td>
</tr>
<table>
</form>
<script>
var valid = new Validation('test', {immediate : true});
</script>
当运行该页面,如果username不输入任何文字或者telephoNumber输入非数字和字母时,点击search按钮时,将看到错误信息提示。 class="required validate-alphanum" 是validation内建的校验规则名称。当执行new Validation('test', {immediate : true}),Field失去焦点或者执行表单提交动作时,该表单下的所有内建类校验名的校验规则将被触发。
[img]http://dl.iteye.com/upload/attachment/467120/e15210fa-29d6-393b-94f8-3967e0a34d34.gif[/img]