第一种是最一般的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里的错误信息又会出现。
分享到:
相关推荐
我都测试过了,都是正确的
比如使用javascript来校验长度是否超长,格式是否正确,使用隐藏html表单字段进行数据传送,使用url参数传送数据等等。 但是,这样做存在一个基本的安全缺陷:用户能够完全控制客户端及提交的数据,即避开任何在...
直接完整的javascript客户端校验,复制粘贴就行
基于国内银行卡号制定规则,又由于卡号的客户端校验资源缺乏,又由于目前接触到的银行项目,故自己用js写了一个Luhm校验算法,不足之处还望各位大侠赐教! 附件为测试Demo,直接浏览即可。
1)客户端校验。 2)服务端校验。 3)WAF设备校验(根据不同的WAF产品而定)。 客户端javascript校验:一般都是在网页上写一段javascript脚本,校验上传文件的后缀名,有白名单形式也有黑名单形式。 判断方式:在...
校验js语法以及编写规范,可以用在Java客户端进行客户端校验
web端项目通过浏览器访问的项目获取客户端mac地址及ip地址,进行登录权限校验; web端通过浏览器访问的项目增加权限; 本次项目由于对数据安全性要求较为严格,所以增加了用户在登录时对于客户端电脑的ip地址和mac...
我这里设计了一个简单的javascript客户端验证工具,在页面中只需要对要进行验证的表单(form)及其所属的表单域对象(input)进行属性声明,即可完成配置,基本不需要手工书写javascript代码即可完成验证工作。
在这之前,页面开发者(JavaScript开发者)需要编写大量的JavaScript来与表单对象交互,并进行校验。常见的校验如不能为空,必须满足长度要求,必须为数字,必须为Email等等。根据一般的经验,如果表单中需
在这之前,页面开发者(JavaScript开发者)需要编写大量的JavaScript来与表单对象交互,并进行校验。常见的校验如不能为空,必须满足长度要求,必须为数字,必须为Email等等。根据一般的经验,如果表单中需要校验的...
通过将许多ActiveModel::Validation功能移植到JavaScript,Judge可以轻松地对Rails进行客户端表单验证。 最常见的验证通过存储在HTML5数据属性中的JSON字符串进行,并且仅在客户端执行。 无论您在何处,Judge都为...
包括ip验证,身份证验证,手机号码验证,电话号码,邮政编码验证,域名验证等,其实好的代码,都在应用中,大家多去扒代码吧。
Struts1.3 与1.2向比验证框架部分还是有所区别的,该例子通过一个简单的Email的校验,演示如何通过Struts Validate验证框架进行在页面中生成JavaScripte脚本,进行客户端校验。下完后记得评分,资源分就会回来,还能...
基于国内银行卡号制定规则,因为目前接触到的银行项目需要用到客户端校验银行卡号,故自己用js写了一个Luhm校验算法,不足之处还望各位大侠赐教!
OS.js客户端模块这是OS.js的主要客户端核心组件。 包含操作所需的基本服务,虚拟文件系统,面板和其他核心服务。用法ESM,Webpack等import { Core /*, ... */ } from '@osjs/client' ;UMD < script src =" ...
web端项目通过浏览器访问的项目获取客户端mac地址及ip地址,进行登录权限校验; web端通过浏览器访问的项目增加权限; 本次项目由于对数据安全性要求较为严格,所以增加了用户在登录时对于客户端电脑的ip地址和mac...
asp获取服务器时间,通过Javascript计算并即时显示出来
在这之前,页面开发者(JavaScript开发者)需要编写大量的JavaScript来与表单对象交互,并进行校验。常见的校验如不能为空,必须满足长度要求,必须为数字,必须为Email等等。根据一般的经验,如果表单中需要校验的...
顺序结构的应用 分支结构的应用 循环结构的应用 常用系统 函数的应用 自定义函数的应用 综合应用 顺序结构是程序设计中最常用的一种程序结构,是按照语句出现的顺序,从第一条语句开始一步一步逐条执行,直至最后一...
实时的数据校验是AJAX技术的重要优点之一,Struts校验框架通过加入这种技术进一步丰富了其MVC,从而...而且它也可以通过在请求页面上生成的JavaScript来实现客户端校验。 AJAX是一种能异步地调用服务器并返回XML文档的