初来乍到,分享一下自己写的一小段代码,跟大家交流一下
实现功能:表单合法化判断
实现原理:在表单元素中扩展一个属性,利用此属性来指定表单值的合法格式,若不合法,则给出错误提示,并定位到当前错表单
一些优点:1) 可以减少大量判断表单合法性的代码
传统方式:一大堆 if 和中括号还有错误提醒整在一段js里面且独立于html中,增加了页面的体积,影响代码阅读
2) 元素名称无关性,元素改名无需调整其他代码,不影响判断结果。一个表单对应一个格式,不会因为“眼花”或者其他原因导致对应错误
传统方式:修改一个元素名称,必须修改js中所有跟此元素相关的代码,麻烦,而且容易出错
3) 基本上能够实现普通表单的一些合法性验证,在原来的功能基础上,可以自行扩展其他功能
4) 其他暂时没想到,欢迎大家补充
其他说明:有那么几个优点,必然存在很多缺点。由于我自身认识的局限性,也必然存在一些不足,欢迎大家给予指正~~争取让它能够满足越来越多的需求~~
js代码如下:
- /**
- Name : _Form
- Vers : 1.0
- Auth : 海边的水手
- Desc : js实现的表单内容合法判断
- 1,在表单中扩展一个属性 desc (可以自己命名,保证跟_Form的_style_name一致即可),desc的属性值包含了判断类型、错误提示等内容
- desc 的值格式如下(其中 ||| 是分隔符,必须跟 _Form 的 _split_word 一致):
- 1) 使用正则判断 0|||正则表达式|||错误提示
- 2) 不允许为空 1|||错误提示|||是否不允许与默认值相同 第三部分可省略,当第三部分的值为 1 时,不允许与默认值相同
- 3) 必须是数字 2|||错误提示
- 4) 判断内容是否一致 8|||对照的元素name|||错误提示 要求对照元素元素必须包含在同一个form里面
- 5) 更多的例如email,电话号码,邮政编码等,可以自己去扩展
- 2,表单提交使用 _Form.submit(); 例如<input type="button" value="提交" οnclick="_Form.submit(this.form);" />
- 3,由于特殊需要,可能需要扩展可以使用如下:
- <input type="button" value="提交" οnclick="checkForm(this.form);" />
- function checkForm(form){
- _Form.load(form);
- //这里插入需要扩展的操作
- if(_Form.check() == false)return; //如果出错,则直接返回
- //这里插入需要扩展的操作
- _Form.submit();
- }
- 我的联系方式 : email - flycat1022@gmail.com qq : 80377391 欢迎交流,共同提高
- 若有一些公用性的扩展,希望都能发一份到我邮箱里头哈~~~
- 版权信息就没关系了,反正这东西大家都能写出来的~~关键是用得happy
- 我个人来的写注释,所以转载的时候希望能够保留上面的说明文字
- */
- var _Form = {
- _form : null, // 当前活动的表单
- _style_name : 'desc', // 元素扩展属性名称
- _split_word : '|||', // 分隔符
- load : function(_obj){ // 加载form,可以是name,id或者form对象
- if(typeof _obj == 'string'){
- this._form = document.forms[_obj] || document.getElementById(_obj);
- }
- else{
- this._form = _obj;
- }
- if(!this._form || this._form.tagName.toLowerCase() != 'form')this._form = null;
- },
- _get_attribute : function(_e, _attrib){ // 根据属性名称获取元素属性值
- var _d = _e.attributes.getNamedItem(_attrib);
- if(_d)return _d.value;
- return '';
- },
- _get_element_name : function(_e){ // 获取元素name属性值或者id值
- return this._get_attribute(_e, 'name') || this._get_attribute(_e, 'id');
- },
- _check : function(_e){ // 进行单个表单验证
- var _ns = this._get_attribute(_e, this['_style_name']);
- if(!_ns)return null;
- var _nss = _ns.split(this['_split_word']);
- var _val = _e.value;
- switch(_nss[0]){
- case '1' : // 1 - 判断不能为空 格式 1|||错误提示内容|||1 或 1|||错误内容提示
- return this._chk_null(_e, _val, _nss[1], _nss[2]);
- break;
- case '2' : // 2 - 判断必须是数字 格式 2|||错误内容提示
- return this._chk_number(_e, _val, _nss[1]);
- break;
- case '8' : // 8 - 判断与另一个表单是否一致 格式 8|||比较表单的名称|||不一致是提示的内容
- return this._chk_equal(_e, _val, _nss[2], _nss[1]);
- break;
- case '0' : // 0 和默认使用正则比较 格式 0|||正则表达式|||错误提示内容
- default :
- return this._chk_reg(_e, _val, _nss[2], _nss[1]);
- break;
- }
- return null;
- },
- check : function(){ // 遍历form的所有子元素并进行格式判断
- var _theForm = this._form;
- var _len = _theForm.elements.length;
- var _ret = null;
- for(var _i = 0; _i < _len; _i++){
- if((_ret = this._check(_theForm.elements[_i])) !== null){
- alert(_ret);
- return false;
- }
- }
- return true;
- },
- submit : function(_form){ // 表单提交
- if(_form){
- this.load(_form);
- if(this.check() == false)return;
- }
- this._form.submit();
- },
- _chk_null : function(_e, _v, _er, _d){ // 判断是否为空或者默认值
- if(!_v){ // 判断是否为空
- _e.focus();
- return _er;
- }
- if(_d == '1' && _v == _e.defaultValue){ // 判断不能是默认值
- _e.focus();
- return _er;
- }
- return null;
- },
- _chk_number : function(_e, _v, _er){ // 判断是否是数字
- if(/^[/+/-]?/d+(/./d+)?$/.test(_v) == false){
- _e.focus();
- return _er;
- }
- return null;
- },
- _chk_equal : function(_e, _v, _er, _c){ // 进行一致性判断
- var _com = this._form.elements[_c].value;
- if(_com != _v){
- _e.focus();
- return _er;
- }
- return null;
- },
- _chk_reg : function(_e, _v, _er, _s){ // 进行正则判断
- if((new RegExp(_s, "gi")).test(_v) == false){
- _e.focus();
- return _er;
- }
- return null;
- }
- }
调用的实例
- <form action="" method="get">
- <input type="text" name="i1" desc="1|||不能为空!" /><br />
- <input type="text" name="i2" desc="2|||必须是数字!" /><br />
- <input type="text" name="i3" value="my default value" desc="1|||请填写内容!|||1" /><br />
- <input type="text" name="i4" desc="8|||i1|||必须跟第一个一致!" /><br />
- <input type="text" name="i5" desc="0|||^/S{1}$|||错误的格式!" /><br />
- <input type="button" value="提交" onclick="_Form.submit(this.form);" />
- </form>
这段代码用了快两年了。。
基本上可以满足大部分的表单验证,就是不知道在html元素里面扩展属性,会不会有些浏览器不认账。。
至少 ie6、ie7、ff2.0、ff3.0、safari3、opera9.0以及tt、遨游、the word、green browser等这些我常用的测试浏览器都能够通过~~
基本上可以满足大部分的表单验证,就是不知道在html元素里面扩展属性,会不会有些浏览器不认账。。
至少 ie6、ie7、ff2.0、ff3.0、safari3、opera9.0以及tt、遨游、the word、green browser等这些我常用的测试浏览器都能够通过~~