JS客户端校验

jarrywin

浏览: 25767 次
性别:
来自: 广州

最近访客更多访客>>

liufeikl2008

Mr_Daner

chanworld

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (10)

社区版块

存档分类

JavaScript JSP 脚本 CSS prototype

在最近的一个项目中，用到了几种客户端校验方式，在这里和大家探讨一下。

第一种是最一般的js客户端校验，在提交表单的时候触发js里的一个方法，在这个方法里校验客户所填的数据是否合法，并给予提示。
例如：

<script>
function submitForm()
{
    var userName = document.getElementById("userName").value;
    if(userName==""){
    alert("姓名不能为空!");
    document.getElementById("userName").focus();
    return false;
    }    
	document.form.submit();
}
</script>

在JSP页面里

 <button onclick=”submitForm();”>提交</button>

这样一旦用户名为空，就会弹出一个对话框。这种方式比较古老，显示的对话框也不大美观。

第二种是利用例如文本框得到和失去焦点时调用不同的方法来实现校验，可以参考赶集网的校验方式：http://tetlaw.id.au/view/javascript/really-easy-field-validation。
简单的例子如下：
JS：

function click_email_input(thisinput)
{
		document.getElementById('regemailinfo').className='s1';
		document.getElementById('regemailinfo').innerHTML="请输入有效Email（电子邮件）";
}
//失去Email焦点
function check_email_input(thisinput)
{
	var re = /^[_\.0-9a-zA-Z-]+[0-9a-zA-Z]@([0-9a-zA-Z][0-9a-zA-Z-]+\.)+[a-zA-Z]{2,3}$/; 
	
	if ( (thisinput.value == '') ) {
		document.getElementById('regemailinfo').className="s2";
		document.getElementById('regemailinfo').innerHTML="系统检测到你未有任何输入，此项为必填内容，请重新填写！";

else if (!thisinput.value.match(re))
	{
		document.getElementById('regemailinfo').className = 's2';
		document.getElementById('regemailinfo').innerHTML = '你输入的内容不符合规范，请重新填写！';
	}
	
	else
	{
		document.getElementById('regemailinfo').className = 's3';
		document.getElementById('regemailinfo').innerHTML = '输入的内容符合规范，可以使用！';
	}
}

JSP片段：

  
<tr>
    <th scope="row"><div align="left"><span class="STYLE2">电子邮件：</span></div></th>
    <td>
      <div align="left">
        <input name="email" id="email" type="text" size="30" onblur="check_email_input(this)" onfocus="click_email_input(this)"/>
      </div></td>
    <td><span id="regemailinfo" class=""></span></td>
  </tr>

当鼠标点击文本框的时候调用click_email_input(this) 方法，离开文本框的时候调用check_email_input(this) 方法，改变span的CSS属性和span的内容来提示用户。这种方式给人以十分绚丽的感觉。

第三种方式是比较流行的，使用扩展基于prototype的validation.js ，

<script src="prototype.js" type="text/javascript"></script>
<script src="validation.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css" />

接着为表单控件设置class属性，属性名为预定义的(可扩展)的校验器名

<input class="required validate-number" id="field1" name="field1" />

最后创建一个 Validation 对象，以表单id为构造函数的参数

<script type="text/javascript">
    new Validation('form-id');

</script>

使用相当的简单，最可贵的就是假如脚本未能加载成功或者浏览器端的脚本被禁用，原始的表单仍然可以按传统的方式进行提交(配合后台校验)，这可算是优雅的 Unobtrusive JavaScript 的又一个经典范例。

下面是一个最简单的例子：

<body>


<form action="" id="test_form">
 
   金额:
    <input class="required validate-number" id="sum" name="sum" title="必须填写有效金额."/>
  
    
        <input name="submit" type="submit" value="提交"/>
    
</form>
<script type="text/javascript">
   
var valid = new Validation('test_form', {useTitles : true});
 
</script>
</body>

在表单控件的class属性中，required表示不能用空，validate-number表示所填内容必须为数字，
还有title属性表示显示错误信息的内容。最后创建一个 Validation 对象，以表单id为构造函数的参数，useTitles属性默认为false，表示显示错误信息为默认信息，把该属性设为true,则显示的错误信息为title属性所定义的内容。也可以假如其他属性，例如：immediate，默认也为false，在提交表单的时候才进行校验，把该属性设为true,则在表单控件失去焦点的时候丢相应空间进行校验。如果里面的校验类型还不能满足你的要求，也可以自定义校验类型
只需要添加

Validation.addAllThese([
							['validate-password', 'Your password must be more than 6 characters and not be \'password\' or the same as your name', {
								minLength : 7,
								notOneOf : ['password','PASSWORD','1234567','0123456'],
								notEqualToField : 'field1'
							}],
							['validate-password-confirm', 'Your confirmation password does not match your first password, please try again.', {
								equalToField : 'field8'
							}]
						]);

这个方法增加了密码和重复密码的校验。

从 validation.js 里截取的一段源码看其实现机制：

......
Event.observe(this.form,'submit',this.onSubmit.bind(this),false);
......由上代码可知该库注册了表单的 onsubmit 事件处理，当用户电击submit按钮的时候，校验被触发。
不过我在实际应用中遭遇了麻烦，因为我是用一个普通按钮调用JS的一个方法来模拟 submit 按钮的，问题就在于，由JavaScript代码模拟的提交行为居然是不激发 onsubmit 事件的，这样设置的校验行为就被直接跳过了。各位有什么好的建议请留言。

还有一个问题就是，错误信息显示的位置是固定的，都是在表单控件的下方，想要在特定的位置显示错误信息还要进行一些处理。

可以使用

 
<div id="advice-validate-one-required-test[]">
 </div>

id的模式等于:

 advice-$validatorName-$elementId

例如：

<div> 
<input type="checkbox" name="test[]"> a 
<input type="checkbox" name="test[]"> b 
<input type="checkbox" name="test[]" class="validate-one-required 
"> c 
</div> 
<div id="advice-validate-one-required-test[]"></div>

这样错误信息就显示在DIV中。这个例子是别人提供的，他想要的效果都出来了，但我自己试了一下：

<div align="left">
      <input  class="required "  title="请输入密码." name="pwd" id="pwd" type="password" size="25"/>
      </div>
      
      <div id="advice-required-pwd">请输入密码</div>

<script type="text/javascript">
    new Validation('form',{useTitles : true,immediate : true});
</script>

当输入信息符合要求时，DIV（id=advice-required-pwd）里的信息就会消失，将输入信息去掉，DIV里的错误信息又会出现。

分享到：

JavaDb学习笔记 | Servlet和Filter的url匹配url-pattern(来 ...

2007-10-28 10:46
浏览 2879
评论(1)
查看更多

1 楼 java-007 2007-12-19

师兄好，我是你下一级的同学，老师介绍来看看你的博客，搞的确实不错，挺实用的！

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论