为表单域添加属性实现表单验证
对表单的字段进行有效性验证也是个非常麻烦的事情，目前各种服务器端的程序(如Struts和WebWork)已经提供了Validation的机制，其实，若不需要那么高的安全性，完全可以把对表单的数据验证交给客户机来运行。这里我利用了Javascript灵活的语法和动态运行的功能(eval函数)提供了一个表单验证的javascript模型。并实现了常用的类型验证。
假设有一个表单是这样的：
<form name=”form0”>
<input type=text name=”field1”>
<input type=text name=”field2”>
<input type=text name=”field3”>
<input type=text name=”field4”>
</form>
有一种验证方式是这样的:将所有需要进行验证的字段及其验证类型等信息放入一个数组arr：
Var arr=array(
(‘form0.field1’,’Integer’,’true’//allow empty,’ field1 must be an integer!’//when error alert this),
(‘form0.field2’,’Float’,’true’//allow empty, ’ field2 must be a float number!’),
(‘form0.field3’,’DateTime’,’false’//allow empty,’’),
(‘form0.field4’,null,’true’//allow empty,’’)
);
在提交时进行下面的判断：
If(checkAll(arr)){
form0.submit();
}
可以猜到checkAll函数的内容就是遍历arr并依次进行验证，错误时则返回false并作响应的提示。
上面的方法非常类似于定义一个xml文件对各字段的验证类型进行映射。
而利用上面的思想，加上html元素的可定制性，我将方法做如下修改：
首先修改html表单的定义：
<form name=”form0”
οnsubmit=”return Validator.check(this)” desc=”
字段
1”>
<input type=text name=”field1”
allow_empty=true validator=”Integer” desc=”
字段
2”>
<input type=text name=”field2”
allow_empty=true validator=”Float” desc=”
字段
3”>
<input type=text name=”field3”
validator=”DateTime” desc=”
字段
4”>
<input type=text name=”field4”
allow_empty=true desc=”
字段
5”>
</form>
然后建立FormValidator类，并实例化一个对象Validator，并且，FormValidator除了有一个check(form)方法外，还拥有许多isXXX(str)的方法，其中XXX与validator=””对应（如Integer），check时，遍历该form的所有elements,找出拥有allow_empty和validator属性的字段，并验证之，下面给出了FormValidator的实现，其中的数据结构Iterator和Map请参考我的其他文章。
/*
*
*
*
*FormValidator
*
*
*
*/
function FormValidator(){
}
FormValidator.prototype.handleValid=function(elem){
}
FormValidator.prototype.handleInvalid=function(elem){
elem.focus();
elem.select();
}
FormValidator.prototype.check=function(form){
try{
var elems=new Iterator(form.elements);
while(elems.hasNext()){
var elem=elems.next();
var value=elem.value;
var validator=elem.validator;
var allow_empty=elem.allow_empty;
var desc=elem.desc;
if(!desc){
desc="";
}
if(allow_empty&&(allow_empty.toLowerCase()=="false"||allow_empty.toLowerCase()=="no"||allow_empty=="0")){
if(this.isEmpty(elem.value)){
alert(desc+"
不允许空值
!");
try{
this.handleInvalid(elem);
}catch(e){}
return false;
}else{
try{
this.handleValid(elem);
}catch(e){}
}
}
if(validator){
try{
var msg=eval("this.is"+validator+"(value)");
if(msg){
alert("
输入不符合要求
:"+desc+msg);
try{
this.handleInvalid(elem);
}catch(e){}
return false;
}else{
try{
this.handleValid(elem);
}catch(e){}
}
}catch(e){
}
}
}
}catch(e){
alert(e);
return false;
}
return true;
}
FormValidator.prototype.isEmpty=function(value){
if(value==null||value==""){
return true;
}
}
FormValidator.prototype.isInteger=function(value){
if(value==""){
return;
}
myRegExp = /^[-+]?([0-9]+)$/;
var valid=myRegExp.test(value);
if(!valid){
return "
请输入整数
!";
}
}
FormValidator.prototype.isPhone=function(value){
if(value==""){
return;
}
myRegExp = /^([0-9]+)(([0-9]|[-])+)([0-9]+)$/;
var valid=myRegExp.test(value);
if(!valid){
return "
请输入正确的电话号码
!";
}
}
FormValidator.prototype.isFloat=function(value){
if(value==""){
return;
}
myRegExp = /^[-+]?([0-9]+)([.]?[0-9]*)([eE]?[1-9]*)$/;
var valid=myRegExp.test(value);
if(!valid){
return "
请输入数字
!";
}
}
FormValidator.prototype.isEmail=function(value){
if(value==""){
return;
}
myRegExp = /^([a-zA-Z0-9_.]+)([@])([a-zA-Z0-9._]+)([.])([a-zA-Z]+)$/;
var valid=myRegExp.test(value);
if(!valid){
return "
请输入正确的邮件格式
!";
}
}
var Validator=new FormValidator();
/*
* End Validator
*/
字段2（浮点数，可空)
字段3（Email，非空)
字段4（电话，非空)
扫一扫
479
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
