打印

简洁,人性化的表单验证程序[js]

mickeyboy [楼主]

宝疙瘩

高级会员

帖子: 383
体力: 845
威望: 35
当前: 山西太原
离线: 5 天

专长 JS,JAVA,MySQL

1^# 大中小发表于 2006-8-18 16:13

看了山人表单验证，又看了其他一些验证程序和相关的一些参考资料，写出了一个比较简洁的js表单验证程序。
功能简述：

验证：

http地址。
时间日期
e-mail
数字
字符长度检查
一项输入与另一项输入比较（例如：密码的确认输入）
大小比较（只能有一个比较符号）

特点

扩展容易，可以方便的添加自己需要的验证方式
兼容性好（ie5,6 firefox,oprea）。
可用性好，没有使用alert()来弹出提示;

编写思路：
整个程序的结构及较简单
为了能够验证一些常用的格式，先对js的内置对象进行了扩展
比如：
String.prototype.isUrl = function(){
var url = /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/;
var tmpStr = this;
return url.test(tmpStr);
}这个用来验证http地址。
然后写了一个对象叫做vform 包含了主要的功能
vform初始化的时候，会检查添加好的验证规则，并将要验证的表单控件对象扩展，添加validate() 和 validlength()两个函数，并且添加onblur事件来进行验证。
出错提示采用的建立div对象的方法，出错就显示，正确就隐藏。所以还需要给div定义一个样式。
使用前需要指定表单的id 注意是id不是name 要不然会出错
而规则添加的时候要指定的是表单控件的name属性不是id
验证规则参数为 obj,minLength,dataType,errmsg,maxLength

第一个为表单控件name

第二个是填写的字符串最小长度0意味着可以不填而1意味着是必添

第三个是验证格式有

e-mail
url
date
number
any
还有两种动态的格式用\开头, \表单控件的name 表示必须与之的值一样；
\>数字表示大于数字，类推；但是没有\>=这样的

第四个是最大长度。

与其他程序不一样的是：我对http地址与日期格式地址的处理不同，填入的地址没有http://我会添加上后验证，这样比较人性化，符合可用性的要求。日期的处理也是一样，先尽可能的对填写的数字进行格式转化，然后再验证。格式采用了yyyy-mm-dd的格式。

原始位置：http://lxbzj.com/product/vform/index.htm
原始文件应用一个日历输入控件在此省略。。。
总代码：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>vForm表单验证程序</title>
<style type="text/css">

</style>
<script language="JavaScript" type="text/javascript">
// JavaScript Document
//vform.js
//表单验证程序
//版本1.0测试
//作者：2006-08-08
//网址：http://lxbzj.com
//email:lxbzmy@163.com
//程序基本思路：通过扩展对象来实现，将String扩展 将默认的表单元素扩展 定义两个自定义对象。
//String.isEmail
//String.isUrl
//表单元素.required
//表单元素.isvalid
//表单元素.validate
//
//字符串验证扩展
//├电子邮件验证
String.prototype.isEmail = function(){
	var tmpStr = this;
	var email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
	return email.test(tmpStr)
}
//├http地址验证
String.prototype.isUrl = function(){
	var url = /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/;
	var tmpStr = this;
	return url.test(tmpStr);
}
//├日期验证（第一部分）
String.prototype.isDateTime = function(){
	if(Date.parse(this)||Date.parseDate(this))
	{
		return true;
	}
	else
	{
		return false;
	}
}
String.prototype.isInteger = function()
{
	var _i = /^[-\+]?\d+$/;
	var _s = this; 
	return _i.test(_s);
}
Date.prototype.toIsoDate = function()
{
	var _d = this;
	var _s;
	_Y =_d.getFullYear();
	_M = _d.getMonth() + 1;
	_D = _d.getDate();
	_H = _d.getHours();
	_I = _d.getMinutes();
	_S = _d.getSeconds();
	with(_d)
	{
		_s = [getMonth() + 1,getDate(),getHours(),getMinutes(),getSeconds()];
	}
	for(var i = 0; i < _s.length; i++)
	{
		if (_s[i].toString().length == 1)_s[i]= '0'+_s[i];
	}
		return (_Y + '-'+_s[0]+'-'+_s[1]+' '+_s[2]+':'+_s[3]+':'+_s[4])
}
//├日期验证（第二部分）
Date.parseDate = function(str, fmt) {
	fmt = fmt||"%Y-%m-%d %H:%M";
	var today = new Date();
	var y = 0;
	var m = -1;
	var d = 0;
	var a = str.split(/\W+/);
	var b = fmt.match(/%./g);
	var i = 0, j = 0;
	var hr = 0;
	var min = 0;
	for (i = 0; i < a.length; ++i) {
		if (!a[i])
			continue;
		switch (b[i]) {
		    case "%d":
		    case "%e":
			d = parseInt(a[i], 10);
			break;
		    case "%m":
			m = parseInt(a[i], 10) - 1;
			break;
		    case "%Y":
		    case "%y":
			y = parseInt(a[i], 10);
			(y < 100) && (y += (y > 29) ? 1900 : 2000);
			break;
		    case "%b":
		    case "%B":
			for (j = 0; j < 12; ++j) {
				if (Calendar._MN[j].substr(0, a[i].length).toLowerCase() == a[i].toLowerCase()) { m = j; break; }
			}
			break;
		    case "%H":
		    case "%I":
		    case "%k":
		    case "%l":
			hr = parseInt(a[i], 10);
			break;
		    case "%P":
		    case "%p":
			if (/pm/i.test(a[i]) && hr < 12)
				hr += 12;
			else if (/am/i.test(a[i]) && hr >= 12)
				hr -= 12;
			break;
		    case "%M":
			min = parseInt(a[i], 10);
			break;
		}
	}
	if (isNaN(y)) y = today.getFullYear();
	if (isNaN(m)) m = today.getMonth();
	if (isNaN(d)) d = today.getDate();
	if (isNaN(hr)) hr = today.getHours();
	if (isNaN(min)) min = today.getMinutes();
	if (y != 0 && m != -1 && d != 0)
		return new Date(y, m, d, hr, min, 0);
	y = 0; m = -1; d = 0;
	for (i = 0; i < a.length; ++i) {
		if (a[i].search(/[a-zA-Z]+/) != -1) {
			var t = -1;
			for (j = 0; j < 12; ++j) {
				if (Calendar._MN[j].substr(0, a[i].length).toLowerCase() == a[i].toLowerCase()) { t = j; break; }
			}
			if (t != -1) {
				if (m != -1) {
					d = m+1;
				}
				m = t;
			}
		} else if (parseInt(a[i], 10) <= 12 && m == -1) {
			m = a[i]-1;
		} else if (parseInt(a[i], 10) > 31 && y == 0) {
			y = parseInt(a[i], 10);
			(y < 100) && (y += (y > 29) ? 1900 : 2000);
		} else if (d == 0) {
			d = a[i];
		}
	}
	if (y == 0)
		y = today.getFullYear();
	if (m != -1 && d != 0)
		return new Date(y, m, d, hr, min, 0);
	return today;
};
//扩展完成
//对象定义
var vform = new Object;
//获取弹出提示的显示位置
vform.getAbsolutePos = function(el) {
	var _p = { x: 0, y: 0 };
	 do{
				_p.x += (el.offsetLeft - el.scrollLeft);
				_p.y += (el.offsetTop - el.scrollTop); 
		}
		 while(el=el.offsetParent)
     return _p;
      };
vform.toString = function()
{
	return("vForm表单验证程序\n版本：1.0beta\n作者：雷晓宝\n时间：2006-07-31\n网址：http://lxbzj.com\n许可：LGPL");
}
vform.rules = new Array;
vform.rules.add = function(obj,minLength,dataType,errmsg,maxLength,rule,patams)
{
    var curlen = this.length;
        this[curlen] = [obj,minLength,dataType,errmsg,maxLength,rule,patams];
        //this[curlen] = [ 0 ,    1    ,    2   ,   3  ,   4  ,  5 ,   6  ];
    return this.length;
}
vform.init= function()
{
	if(document.getElementById(this.form_id))
	{
		//获取表单
		var o = document.getElementById(this.form_id);
		//遍历规则
		for(var i = 0 ;i< this.rules.length;i++)
		{
			_r = this.rules[i]
			//如果存在元素，则添加验证程序
			if(_o = o.elements[_r[0]])
			{
				//判断是是否必填,是否有最小长度
				if(_r[1] > 0 )
				{
					_o.required = true;//必填的含义和最小长度为1是一样的
					_o.minLength = parseInt(_r[1]);
				}
				else
				{
					_o.required = false;
					_o.minLength = 0;
				}
				//判断是否有最大长度;
				if(_r[4])
				{
					_o.maxLength = parseInt(_r[4]);
				}
				//添加长度验证函数
				_o.validLength = function ()
				{
					var b =true;
					if(this.minLength)
					{
						b = (this.minLength <= this.value.length);
					}
					if(this.type == 'textarea' && this.maxLength )
					{
						b = b && (this.maxLength >= this.value.length );
					}
					return (b);
				}
				//添加验证，进行格式验证
				switch(_r[2])
				{
					case 'e-mail':
						_o.validate = function()
						{
							this.isvalid = this.validLength() && this.value.isEmail();
							return (this.isvalid);
						};
						break;
					case 'url':
						_o.validate = function()
						{
							if (this.value.substring(0,7) != 'http://')this.value = 'http://' +this.value;
							this.isvalid = this.validLength() && this.value.isUrl();
							return (this.isvalid);
						}
						break;
					case 'date':
						_o.validate = function()
						{
							var _d = Date.parse(this.value)||Date.parseDate(this.value);
							this.value =  _d.toIsoDate();
							
							this.isvalid = this.validLength() && this.value.isDateTime();
							return (this.isvalid);
							a=a>b?1:1;
						}
						break;
					case 'number':
						_o.validate = function()
						{
							this.isvalid = this.validLength() && this.value.isInteger();
							return (this.isvalid);
						}
						break;
					case 'any':
						_o.validate = function()
						{
							this.isvalid = this.validLength();
							return  this.isvalid
						}
						break;
					default :
						var regexp = /^\\\w+$/;
						if ( regexp.test(_r[2]))//表示必须和同表单下的某个字段的值一样。用于重复输入的验证
						{
							_el = _r[2].substring(1);
							if (o.elements[_el]){
								_o.equal = _el;
								_o.validate = function()
								{
									if(_o = this.form.elements[this.equal])
									{
										if ( (_o.value == this.value) && this.validLength())
										{
											return true;
										}else {
										return false;
										}
									}else{
										alert('setup error');
									}
								
								}
							}else
							{
								alert(_el + 'is not a valid form element');
								_o.validate = function(){return true;}
							}
						}
						var regexp1 = /^\\(==|!=|>=|<=|>|<)/;
						if ( regexp1.test(_r[2]) )
						{
							_s0 = _r[2];
							_s1 = RegExp.$1;
							_s2 = _s0.replace(regexp1,'');
							_operator = _s1.substring(0);//比较操作符
							var regexp2 = /^\w+$/;
							if (regexp2.test(_s2))//是一个标志符，整数 或者变量
							{
								_o.operation = _operator+_s2;
								_o.validate = function()
								{
									_b = true;
									if (this.value.length !=0)
									{
										_b = eval(this.value+this.operation+';');
									}									
									_b = _b && this.validLength();
									return _b;
								}
							}
						};
						break;
						
				}
				//添加验证提示(div标签)并初始化
				var _p = vform.getAbsolutePos(_o);
				_o.tip = new tip(_r[3],vform.err_class,_p.x+_o.offsetWidth+3,_p.y);
				_o.tip.init();
				//失去焦点时，开始验证
				_o.onblur =function(e)
				{
					if(this.minLength || this.value.length >0) 
					{ 
						if( this.validate() )
						{
							this.tip.hide();
						}else
						{
							this.tip.show();//显示错误信息
							//this.focus(); 添加这句在ie里会导致死循环 :(
							return false;
						}
					}
				}
			}
		}
	//焦点验证可能会失败,所以最后需要表单提交前的验证作为最后的补充。
		document.getElementById(this.form_id).onsubmit = function()
		{
			var valid = true;
			for(i=0;i<this.elements.length;i++)
			{
				_o = this.elements[i];
				if(_o.minLength && !_o.validate())
				{
					_o.tip.show();
					valid = false;
				}
			}
			return valid;
		}
	}
}
//弹出提示定义
function tip(text,className,x,y)
{
	var o = document.createElement("div");
	o.style.display = "none";
	o.innerHTML = text;
	//var t = document.createTextNode(text);
	document.body.appendChild(o);
	//o.appendChild(t);
	
	this.init = function(dis)
	{
		o.className = className;
		o.style.left = x+"px";
		o.style.top = y+"px";
		o.style.zindex = 100;
		if(dis)
		{
			o.style.display = "";
		}
		else
		{
			o.style.display = "none";
		}
	}
	this.show = function()
	{
		o.style.display = "";
	}
	this.hide = function()
	{
		o.style.display = "none";
	}
}
function start()
{
	vform.form_id = 'form1';//必须是表单的id
	vform.err_class = 'info';//出错提示的样式
	//验证规则，逐条填写
		with(vform.rules)
		{
			add('frm_name',1,'e-mail','请您按照 user@domain.com 的格式输入电子邮件地址。<br /><span style="color:#f00">必填项目</span>');
			add('myweb',1,'url','请您按照 http://www.domain.com 的格式输入您的网址。<br /><span style="color:#f00">必填项目</span>');
			add('dateinput',0,'date','请按2000-03-05 的格式输入日期。<br /><span style="color:#f00">必填项目</span>');
			add('qq',0,'number','这必须是一个整数');
			add('least10',10,'any','您必须至少填写10个<br /><span style="color:#f00">必填项目</span>');
			add('ok100',1,'any','这里被限制为100个字符<br /><span style="color:#f00">必填项目</span>',100);
			add('r_pass0',5,'any','密码最短5位最长20位<br /><span style="color:#f00">必填项目</span>',20);
			add('r_pass1',5,"\\r_pass0",'确认密码错误<br /><span style="color:#f00">必填项目</span>',20);
			add('frm_sel',1,"\\>2",'必须大于2000<br /><span style="color:#f00">必填项目</span>');
		}
		with(vform)
		{
			init();
		}
	
}
</script>
</head>
<body onload="start()">
<form id="form1" name="form1" method="get" action="">
	<label for="frm_name">e-mail:
	<input name="frm_name" type="text" class="text_input" id="frm_name" title="输入一个电子邮箱地址"/>
	</label>
	*
	<p>
		<label for="r_pass0">输入密码：
		<input name="r_pass0" type="text" class="text_input" id="r_pass0" title="输入您希望的密码 " />
		</label>
	*</p>
	<p>
		<label for="r_pass1">密码确认：
		<input name="r_pass1" type="text" class="text_input" id="r_pass1" title="将密码确认一次" />
		</label>
	*</p>
	<p>
		<label for="frm_sel">选择：
		<select name="frm_sel" id="frm_sel" title="请选择一个答案">
			<option value="0">请选择一个答案</option>
			<option value="1" selected="selected">1000</option>
			<option value="2">2000</option>
			<option value="3">3000</option>
			<option value="4">4000</option>
			<option value="5">5000</option>
			<option value="6">6000</option>
		</select>
</label>
	*</p>
	<p>
		<label for="input3">输入网址：
		<input name="myweb" type="text" class="text_input" id="input3" title="输入一个网址" onmousemove="" value="http://" maxlength="100"/>
		</label>
	*</p>
	<p>
		<label for="dateinput">输入日期
		<input name="dateinput" type="text" class="text_input" title="输入一个日期" id="dateinput"/>
</label>
	*</p>
	<p>
		<label for="mub">输入数字
		<input name="qq" type="text" class="text_input" title="填写数字" id="mub"/>
		</label>
	</p>
	<p>
		<label for="len">输入任意但长度限制为10个
		<input name="least10" type="text" class="text_input" maxlength="88" id="len"/>
		*
		</label>
	</p>
	<p>
		<label for="text">只能输入100个
		<textarea name="ok100" cols="40" rows="5" id="text" title="详细内容"></textarea>
		*
		</label>
	</p>
	<p>
		<input type="submit" name="Submit" value="提交" />
		<button onclick="alert(vform)" >关于验证程序</button>
	</p>
</form>

<script type="text/javascript">
			Calendar.setup({
			inputField     :    "dateinput",   // 把这个改成你需要的 id
			ifFormat       :    "%Y-%m-%d %H:%M", // format of the input field
			showsTime      :    true,
			//button		   :    "dateinput_btn", 
			timeFormat     :    "24"
		 });
	</script>

<div class="title">
	<h1>vForm1.0beta</h1>
	<ul>
		<li>作者：雷晓宝</li>
		<li>时间：2006-08-08</li>
		<li>网址：http://lxbzj.com</li>
		<li>e-mail:lxbzmy@163.com</li>
		<li>许可：LGPL</li>
	</ul>
	<h2>功能简述：</h2>
	<ol>
	  <li>
	    <h3>验证：</h3>
	    <ul>
	      <li>http地址。</li>
          <li>时间日期</li>
	      <li>e-mail</li>
	      <li>数字</li>
	      <li>字符长度检查</li>
	      <li>一项输入与另一项输入比较（例如：密码的确认输入）</li>
	      <li>大小比较（只能有一个比较符号）</li>
        </ul>
	  </li>
      <li>
        <h3>特点</h3>
        <ul>
          <li>扩展容易，可以方便的添加自己需要的验证方式</li>
          <li>兼容性好（ie5,6 firefox,oprea）。</li>
        <li>可用性好，没有使用alert()来弹出提示;</li>
        </ul>
      </li>
  </ol>
	<p> </p>
	<h2>使用方法</h2>
	<p>使用时，需要定义一个出错提示框的样式，本例的样式为：<code>div.info {
	    width: 170px;<br />
    overflow:visible;<br />
    height:auto;<br />
    font-size: small;<br />
    position: absolute;<br />
    background-color: #FFffdd;<br />
    border: 1px solid #000;<br />
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#111111,direction=135,strength=3);<br />
    padding: 5px;<br />
    }</code></p>
	<p>然后在网页&lt;head&gt;部分中添加<code>&lt;script type="text/javascript" src="calendar/calendar.js"&gt;&lt;/script&gt;</code><br />
	  ，然后可以写一个函数设置表单名称，验证规则，<code>function start()<br />
	  { 
	  <br />
	  vFormvform.form_id = 'form1';<br />
		vform.err_class = 'info';<br />
		// (obj,required(true/false),dataType,errmsg,minlen,maxlen,rule,patams)<br />
		//验证规则，逐条填写<br />
		vform.rules.add('frm_name',1,'e-mail','请您按照 user@domain.com 的格式输入电子邮件地址。&lt;br /&gt;&lt;span style="color:#f00"&gt;必填项目&lt;/span&gt;');<br />
		vform.rules.add('myweb',1,'url','请您按照 http://www.domain.com 的格式输入您的网址。&lt;br /&gt;&lt;span style="color:#f00"&gt;必填项目&lt;/span&gt;');<br />
		vform.rules.add('dateinput',0,'date','请按2000-03-05 的格式输入日期。&lt;br /&gt;&lt;span style="color:#f00"&gt;必填项目&lt;/span&gt;');<br />
		vform.rules.add('qq',0,'number','这必须是一个整数');<br />
		vform.rules.add('least10',10,'any','您必须至少填写10个&lt;br /&gt;&lt;span style="color:#f00"&gt;必填项目&lt;/span&gt;');<br />
		vform.rules.add('ok100',1,'any','这里被限制为100个字符&lt;br /&gt;&lt;span style="color:#f00"&gt;必填项目&lt;/span&gt;',100);<br />
	  vform.init();<br />
	  }</code>最后为body添加onload事件。	  <code>	  &lt;body onload="start();"&gt;
	</code></p>
	<p> </p>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

[ 本帖最后由 mickeyboy 于 2006-10-10 08:53 编辑 ]

本帖最近评分记录

Sheneyan 威望 +3 原创内容 2006-8-20 01:00

Extjs,JQuery
ibatis,glassfish
Dream,Eclipse

TOP

西部数码分布式集群主机傲视群雄 | Adobe设计师狂欢节在线讲座免注册进入

dobeta

新手上路

帖子: 8
体力: 28
威望: 0
离线: 296 天

2^# 大中小发表于 2006-8-23 08:32

关闭js没有作用了,能强制使用吗?

TOP

PSD网页模板下载,高端实用 | 俄罗斯大蜘蛛反病毒软件

Sheneyan

子虚乌有

荣誉管理团队

认证
帖子: 8309
体力: 19573
威望: 187
当前: 福建厦门
离线: 4 天

专长 JS,JAVA,Oracle

3^# 大中小发表于 2006-8-23 08:50

验证这种东西，最好服务端和客户端都要做，这种冗余比较必要。

子叶：子乌的叶子
文抄公

TOP

国际动画人才海外高薪就业

mickeyboy [楼主]

宝疙瘩

高级会员

帖子: 383
体力: 845
威望: 35
当前: 山西太原
离线: 5 天

专长 JS,JAVA,MySQL

4^# 大中小发表于 2006-8-23 09:22

时下，表单验证程序总是在用户把表格填写完成以后，鼠标点击提交按钮时才进行输入数据的正确性验证，但这往往是滞后了验证的时间。其实最佳的验证时机是用户在输入数据时或者一项内容填写完成以后,通过及时的获取用户输入的数据然后进行验证。这样用户可以在第一时间知晓数据的正确性，帮助用户在最短的时间里填写完正确的表格，省去了从头检查的烦恼，更为人性化。(山人的程序也有这个配置)

   JavaScript中,可供验证程序使用的事件有click submit keypress keydown keyup focus blur等等，我们可以通过使用keypress 和 onblur事件来达到实时验证这个目标。

   用户在输入框中输入文字的时候会触发keypress事件，我们就可以启动一个程序来获取用户的输入内容进行检验，如果输入不能被接受，我们就可以弹出提示框来提示用户修改输入。
用户填写完一项后一般会填写其它项输入这时会触发blur事件，我们也可以启动程序验证输入的正确性。
表单验证是一个很广泛的应用，所以对该程序的兼容性要格外的严格一些，由于浏览器版本与JavaScript紧密相关，所以就以浏览器的版本来要求验证程序的兼容性，最基本的要求是：兼容当下流行，应用广泛的浏览器(ie5.5 ie6.0 ie7.0 firefox mozila opera )

   对于无法做到兼容的浏览器，则必须要通过服务器端的验证程序来弥补（这一过程也是必须的，也只有服务器端的验证是安全的，也就是说客户端的验证只是可用性的提高）。

[ 本帖最后由 mickeyboy 于 2006-8-23 09:24 编辑 ]

Extjs,JQuery
ibatis,glassfish
Dream,Eclipse

TOP

明天教室职业插画师培训计划

Sheneyan

子虚乌有

荣誉管理团队

认证
帖子: 8309
体力: 19573
威望: 187
当前: 福建厦门
离线: 4 天

专长 JS,JAVA,Oracle

5^# 大中小发表于 2006-8-23 09:47

对了，楼主，有个应用上的修改最好加一下：

最后一个出错的提示最好设置它的z-index最大，否则提示可能会被其它的出错提示遮住

子叶：子乌的叶子
文抄公

TOP

wnsj

初级会员

帖子: 71
体力: 50
威望: 0
当前: 广东广州
离线: 98 天

专长 网页设计,前端制作,SEO

6^# 大中小发表于 2006-9-4 21:32

不错！！
其实网站要的就是它的人性化！！
学习！！

悟！

TOP

9999999999999

银牌会员

帖子: 832
体力: 1902
威望: 0
当前: 安徽芜湖
离线: 442 天

7^# 大中小发表于 2006-9-4 21:41

不太美观还容易出错不是太好这是我的意见。。。

TOP

Satellite

新手上路

认证
帖子: 432
体力: 33
威望: 11
当前: 北京海淀区
离线: 104 天

8^# 大中小发表于 2006-9-5 10:11

提示太多每次鼠标onblur的时候都提示这样会给用户造成困扰应该只在提交的时候提示相应错误

www.achome.cn

TOP

e98123

初级会员

帖子: 33
体力: 82
威望: 0
离线: 88 天

9^# 大中小发表于 2006-9-5 21:49

思路很好哩！

TOP

mickeyboy [楼主]

宝疙瘩

高级会员

帖子: 383
体力: 845
威望: 35
当前: 山西太原
离线: 5 天

专长 JS,JAVA,MySQL

10^# 大中小发表于 2006-9-6 11:32

引用:

原帖由 Satellite 于 2006-9-5 10:11 发表
提示太多每次鼠标onblur的时候都提示这样会给用户造成困扰应该只在提交的时候提示相应错误

当你要真真的填写这个表单的时候，正确的会大于错误量。谁也不会专门看那么多的错误吧？

Extjs,JQuery
ibatis,glassfish
Dream,Eclipse

TOP

mickeyboy [楼主]

宝疙瘩

高级会员

帖子: 383
体力: 845
威望: 35
当前: 山西太原
离线: 5 天

专长 JS,JAVA,MySQL

11^# 大中小发表于 2006-9-6 16:17

引用:

原帖由 SinNeR 于 2006-9-6 14:27 发表
还是有bug的。。。

努力改进它！

Extjs,JQuery
ibatis,glassfish
Dream,Eclipse

TOP

wyq29

金牌会员

帖子: 1656
体力: 3320
威望: 0
当前: 河南郑州
离线: 42 天

12^# 大中小发表于 2006-9-6 17:51

alibaba的验证很强.......

TOP

Jennal

初级会员

帖子: 59
体力: 133
威望: 0
当前: 福建厦门
离线: 77 天

13^# 大中小发表于 2006-9-7 22:29

引用:

原帖由 9999999999999 于 2006-9-4 21:41 发表
不太美观还容易出错不是太好这是我的意见。。。

觉得不美观可以自己改CSS。。。

楼主兄，多谢分享，不过能不能写个接口说明？要看你的程序恐怕得花一段时间，既然共享了，却不写接口说明，好像有点失去了共享的意义。。。(PS:虽然你解释了参数，但只说了前5个，我发现你的函数有7个参数)
还有个问题：init以后能不能再rule.add？

发现问题。。。确实没有问题的数据，在blur验证通过以后，却在submit的时候提示有错。。。真奇怪。。。

[ 本帖最后由 Jennal 于 2006-9-7 22:43 编辑 ]

queslite.com

TOP

Jennal

初级会员

帖子: 59
体力: 133
威望: 0
当前: 福建厦门
离线: 77 天

14^# 大中小发表于 2006-9-7 23:13

经过检查把onsubmit里的!_o.isvalid改成!_o.validate()，似乎就没有问题了

希望加入deleterule功能～～～就可以实现动态项目的判断了。。。

queslite.com

TOP

mickeyboy [楼主]

宝疙瘩

高级会员

帖子: 383
体力: 845
威望: 35
当前: 山西太原
离线: 5 天

专长 JS,JAVA,MySQL

15^# 大中小发表于 2006-10-10 08:48

引用:

原帖由 Jennal 于 2006-9-7 23:13 发表
经过检查把onsubmit里的!_o.isvalid改成!_o.validate()，似乎就没有问题了

希望加入deleterule功能～～～就可以实现动态项目的判断了。。。

哦这个问题，确实存在，改过后忘记补充了。
那个参数的问题，是为了以后更改补充而设置的，因为有些验证还没有遇到过。参数现只用到了5个。

Extjs,JQuery
ibatis,glassfish
Dream,Eclipse

TOP

prcen

初级会员

帖子: 23
体力: 51
威望: 0
当前: 北京东城区
离线: 564 天

16^# 大中小发表于 2006-10-18 11:08

在填写表单时，有时我并不是按顺序去填写的。比如我的密码设置问题还没想好。我就先填写其它项。有点像考试做题一样。
　还是不错的。支持！

TOP

sssider

新手上路

帖子: 26
体力: 40
威望: 0
离线: 343 天

17^# 大中小发表于 2006-10-20 22:24

引用:

原帖由 Sheneyan 于 2006-8-23 08:50 发表
验证这种东西，最好服务端和客户端都要做，这种冗余比较必要。

这个的确是实际操作的重点. 就是因为这个, 我客户端一般不写验证.

不过小的一直都十分支持晓宝兄的程序.

TOP

xxcn2006

小小菜鸟

钻石会员

帖子: 3092
体力: 5649
威望: 0
当前: 北京海淀区
离线: 14 天

专长 PHP,AS

18^# 大中小发表于 2006-10-20 23:24

喜欢，收下了，

经典论坛泡出来的...^^.

TOP

GreatGhoul

初级会员

帖子: 56
体力: 112
威望: 0

19^# 大中小发表于 2006-10-21 20:07

这作品速度是不是有点问题？我在输入内容时经常出现停顿。

TOP

xxcn2006

小小菜鸟

钻石会员

帖子: 3092
体力: 5649
威望: 0
当前: 北京海淀区
离线: 14 天

专长 PHP,AS

20^# 大中小发表于 2006-10-21 20:18

再顶，非常支持
收下改改自己用

经典论坛泡出来的...^^.

TOP

c_xiaobing

中级会员

帖子: 164
体力: 294
威望: 3
当前: 北京海淀区
离线: 235 天

21^# 大中小发表于 2007-1-27 13:16

收藏了。。。觉得挺有用。

huaworld.com

TOP

ycmspace

初级会员

帖子: 55
体力: 103
威望: 0
离线: 152 天

22^# 大中小发表于 2007-1-27 23:06

看淘宝的注册，个人认为不错

TOP

psart

初级会员

帖子: 71
体力: 145
威望: 0
离线: 251 天

23^# 大中小发表于 2007-1-28 00:10

谢谢！收藏待用。

中国八景旅游网

TOP

lanbo66

初级会员

帖子: 67
体力: 146
威望: 0
离线: 662 天

24^# 大中小发表于 2007-1-28 11:05

焦点不好选上啊

在点几点鼠标才能选上,那个一闪一闪的提示不太好

TOP

infozero

初级会员

帖子: 52
体力: 69
威望: 1
离线: 22 天

25^# 大中小发表于 2008-6-4 12:46

还是提交时一次性的验证比较好

学会从心底感谢别人，学会赞赏和超越自己，学会用平常心去面对现实，该争取的一定要努力，那你就是好样的！

TOP

bopooo

榕树下的落叶

中级会员

认证
帖子: 508
体力: 322
威望: 2
当前: 湖北武汉
离线: 2 天

专长 网页设计,前端制作,JS

26^# 大中小发表于 2009-11-18 08:47

我觉得楼主 2006年的时候对js的认识已经达到了一个比较高的层次
虽然现在那些代码看起来有很多的问题
但对于2006那个年代已经非常不错了
相信楼主如果一直努力到现在
肯定非常的厉害

TOP

jiaking

中级会员

帖子: 81
体力: 214
威望: 0

27^# 大中小发表于 2009-11-24 11:54

其实即时提醒也挺好。刚blur的时候就能知道哪里出问题了。喜欢。只是，界面效果不大好。呵呵

TOP