[分享]一段封装的js表单合法性验证的代码

初来乍到，分享一下自己写的一小段代码，跟大家交流一下

实现功能：表单合法化判断
实现原理：在表单元素中扩展一个属性，利用此属性来指定表单值的合法格式，若不合法，则给出错误提示，并定位到当前错表单
一些优点：1) 可以减少大量判断表单合法性的代码
                      传统方式：一大堆 if 和中括号还有错误提醒整在一段js里面且独立于html中，增加了页面的体积，影响代码阅读
                 2) 元素名称无关性，元素改名无需调整其他代码，不影响判断结果。一个表单对应一个格式，不会因为“眼花”或者其他原因导致对应错误
                      传统方式：修改一个元素名称，必须修改js中所有跟此元素相关的代码，麻烦，而且容易出错
                 3) 基本上能够实现普通表单的一些合法性验证，在原来的功能基础上，可以自行扩展其他功能
                 4) 其他暂时没想到，欢迎大家补充

其他说明：有那么几个优点，必然存在很多缺点。由于我自身认识的局限性，也必然存在一些不足，欢迎大家给予指正～～争取让它能够满足越来越多的需求～～


js代码如下：

 

 

1. /**
2. Name : _Form
3. Vers : 1.0
4. Auth : 海边的水手
5. Desc : js实现的表单内容合法判断
6.         1，在表单中扩展一个属性 desc （可以自己命名，保证跟_Form的_style_name一致即可），desc的属性值包含了判断类型、错误提示等内容
7.            desc 的值格式如下（其中 ||| 是分隔符，必须跟 _Form 的 _split_word 一致）：
8.            1) 使用正则判断    0|||正则表达式|||错误提示 
9.            2) 不允许为空      1|||错误提示|||是否不允许与默认值相同    第三部分可省略，当第三部分的值为 1 时，不允许与默认值相同
10.            3) 必须是数字      2|||错误提示
11.            4) 判断内容是否一致 8|||对照的元素name|||错误提示          要求对照元素元素必须包含在同一个form里面
12.            5) 更多的例如email,电话号码，邮政编码等，可以自己去扩展
13.          2，表单提交使用 _Form.submit(); 例如<input type="button" value="提交" οnclick="_Form.submit(this.form);" /> 
14.         3，由于特殊需要，可能需要扩展可以使用如下：
15.              <input type="button" value="提交" οnclick="checkForm(this.form);" /> 
16.            function checkForm(form){
17.               _Form.load(form);
18.               //这里插入需要扩展的操作
19.                 if(_Form.check() == false)return; //如果出错，则直接返回
20.               //这里插入需要扩展的操作
21.                 _Form.submit();
22.            }
24. 我的联系方式 : email - flycat1022@gmail.com   qq : 80377391      欢迎交流，共同提高
25. 若有一些公用性的扩展，希望都能发一份到我邮箱里头哈～～～
26. 版权信息就没关系了，反正这东西大家都能写出来的～～关键是用得happy
27. 我个人来的写注释，所以转载的时候希望能够保留上面的说明文字
28.   */
29. var _Form = {
30. _form : null,    // 当前活动的表单
32. _style_name : 'desc',  // 元素扩展属性名称
34. _split_word : '|||',  // 分隔符
36. load : function(_obj){    // 加载form，可以是name，id或者form对象
37.   if(typeof _obj == 'string'){
38.    this._form = document.forms[_obj] || document.getElementById(_obj);
39.   }
40.   else{
41.    this._form = _obj;
42.   }
43.   if(!this._form || this._form.tagName.toLowerCase() != 'form')this._form = null;
44. },
46. _get_attribute : function(_e, _attrib){   // 根据属性名称获取元素属性值
47.   var _d = _e.attributes.getNamedItem(_attrib);
48.   if(_d)return _d.value;
49.   return '';
50. },
52. _get_element_name : function(_e){     // 获取元素name属性值或者id值
53.   return this._get_attribute(_e, 'name') || this._get_attribute(_e, 'id');
54. },
56. _check : function(_e){        // 进行单个表单验证
57.   var _ns = this._get_attribute(_e, this['_style_name']);
58.   if(!_ns)return null;
59.   
60.   var _nss = _ns.split(this['_split_word']);
61.   var _val = _e.value;
62.   
63.   switch(_nss[0]){
64.    case '1' :  // 1 - 判断不能为空   格式 1|||错误提示内容|||1  或 1|||错误内容提示
65.     return this._chk_null(_e, _val, _nss[1], _nss[2]);
66.     break;
67.    case '2' :  // 2 - 判断必须是数字       格式 2|||错误内容提示
68.     return this._chk_number(_e, _val, _nss[1]);
69.     break;
70.    case '8' :  // 8 - 判断与另一个表单是否一致    格式 8|||比较表单的名称|||不一致是提示的内容
71.     return this._chk_equal(_e, _val, _nss[2], _nss[1]);
72.     break;
73.    case '0' :  // 0 和默认使用正则比较        格式 0|||正则表达式|||错误提示内容
74.    default :
75.     return this._chk_reg(_e, _val, _nss[2], _nss[1]);
76.     break;
77.     
78.   }
79.   return null;
80. },
82. check : function(){    // 遍历form的所有子元素并进行格式判断
83.   var _theForm = this._form;
84.   var _len = _theForm.elements.length;
85.   var _ret = null;
86.   
87.   for(var _i = 0; _i < _len; _i++){
88.    if((_ret = this._check(_theForm.elements[_i])) !== null){
89.     alert(_ret);
90.     return false;
91.    }
92.   }
93.   return true;
94. },
96. submit : function(_form){    // 表单提交
97.   if(_form){
98.    this.load(_form);
99.    if(this.check() == false)return;
100.   }
101.   this._form.submit();
102. },
104. _chk_null : function(_e, _v, _er, _d){   // 判断是否为空或者默认值
105.   if(!_v){         // 判断是否为空
106.    _e.focus();
107.    return _er;
108.   }
109.   if(_d == '1' && _v == _e.defaultValue){  // 判断不能是默认值
110.    _e.focus();
111.    return _er;
112.   }
113.   return null;
114. },
116. _chk_number : function(_e, _v, _er){   // 判断是否是数字
117.   if(/^[/+/-]?/d+(/./d+)?$/.test(_v) == false){
118.    _e.focus();
119.    return _er;
120.   }
121.   return null;
122. },
124. _chk_equal : function(_e, _v, _er, _c){   // 进行一致性判断
125.   var _com = this._form.elements[_c].value;
126.   if(_com != _v){
127.    _e.focus();
128.    return _er;
129.   }
130.   return null;
131. },
133. _chk_reg : function(_e, _v, _er, _s){   // 进行正则判断
134.   if((new RegExp(_s, "gi")).test(_v) == false){
135.    _e.focus();
136.    return _er;
137.   }
138.   return null;
139. }
140. }

调用的实例

1. <form action="" method="get">
2. <input type="text" name="i1" desc="1|||不能为空！" /><br />
3. <input type="text" name="i2" desc="2|||必须是数字！" /><br />
4. <input type="text" name="i3" value="my default value" desc="1|||请填写内容！|||1" /><br />
5. <input type="text" name="i4" desc="8|||i1|||必须跟第一个一致！" /><br />
6. <input type="text" name="i5" desc="0|||^/S{1}$|||错误的格式！" /><br />
7. <input type="button" value="提交" onclick="_Form.submit(this.form);" />
8. </form>

 

这段代码用了快两年了。。

基本上可以满足大部分的表单验证，就是不知道在html元素里面扩展属性，会不会有些浏览器不认账。。

至少 ie6、ie7、ff2.0、ff3.0、safari3、opera9.0以及tt、遨游、the word、green browser等这些我常用的测试浏览器都能够通过～～