【www.bbyears.com--常用代码】
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
被 JavaScript 验证的这些典型的表单数据有:
•用户是否已填写表单中的必填项目?
•用户输入的邮件地址是否合法?
•用户是否已输入合法的日期?
•用户是否在数据域 (numeric field) 中输入了文本?
下面是连同 HTML 表单的完整代码:
代码如下
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
{email.focus();return false}
}
}
</script>
上面只是一个超简单的邮箱验证实例了,我们再看
验证功能如下:
1. 当表单输入元素在获得焦点时出现信息提示
2. 当表单输入元素在失去焦点时进行验证
3. 表单提交时进行整个表单的验证.
验证效果如下:
1. 获得焦点的状态
2. 失去焦点验证失败的样式
3. 失去焦点验证成功的样式
4. 没有输入内容直接单击提交按钮时进行验证的状态
其中包含了两个源文件,一个是checkform.js文件,一个包含了表单html文件
里面有几个重点吧.不过对高手来说是小事一桩了.
1.getElementById
var obj=document.getElementById(_obj.id);
var info=document.getElementById(_obj.id+"info");
获得验证的表单元素,传递的时候使用this,接收过来的自然就是对象了.
2.正则表达式
自已找合适的啦.择日会贴些常用的与大家分享
3.info.innerHTML = "xxxx"
向指定的结点中插入验证状态信息
4.info.style.color = "blue";
改变指定的样式,如果指定样式的话就使用info.className = "";
5.返回值的使用
JS/**//*
验证要求:在表单的失去焦点事件和表单提交时进行验证
表单说明:在表单的旁边应有一个元素存储提示信息,命名为表单元素名+info,同时为验证表单元素指定ID
函数说明:接收表单的元素名称及表单状态(0为获得焦点,1为失去焦点进行验证),将验证的结果插入到表单旁边的ID中
验证过程: 1.接收传表单元素的ID和表单状态,并获取值; 2.拟定正则表达式 3.验证处理
4.反馈处理结果到指定表单旁的区域中.*/
//验证是否为空
function isEmpty(_obj,flag){
var obj = document.getElementById(_obj.id);
var info = document.getElementById(_obj.id+"Info");
if(flag){
if(obj.value.length == 0){
showInfo(info,"该内容不能为空","red")
return false;}
else{
showInfo(info,"√","green")
return true;}
}
else{
showInfo(info,"请输入相应表单内容!","blue")
return false;
}
}
//验证邮编,内容非必填字段,如果填写则进行验证
function isPostCode(_obj,flag){
var obj = document.getElementById(_obj.id);
var info = document.getElementById(_obj.id+"Info");
var reg = /^d{6}$/;
if(flag){
if(obj.value.length>0){
if(reg.test(obj.value)==false){
showInfo(info,"请输入6位数字为合法的邮政编码格式!","red")
return false;}
else{
showInfo(info,"√","green")
return true;}
}
else{
showInfo(info,"邮编为可选填的内容","black")
return true;}
}
else{
showInfo(info,"邮编的格式为6位数字","blue")
}
}
//验证电子邮件
//参数:Email表单元素ID,是否有必填,表单状态
function isEmail(_obj,isempty,flag){
var obj = document.getElementById(_obj.id);
var info = document.getElementById(_obj.id+"Info");
var reg =/^[w-]+(.[w-]+)*@[w-]+(.[w-]+)+$/;
if (flag){
if(isempty){
if(obj.value == ""){
showInfo(info,"电子邮件不能为空","red")
return false; }
if (reg.test(obj.value)==false){
showInfo(info,"电子邮件格式不正确","red")
return false;}
else{
showInfo(info,"√","green")
return true;}
}
else{
if (obj.value.length>0){
if (reg.test(obj.value)==false){
showInfo(info,"电子邮件格式不正确","red")
return false;}
else{
showInfo(info,"√","green")
return true; }
}
else{
showInfo(info,"如果没有,也可以不留!","black")
return true; }
}
}
else{
showInfo(info,"填写此项以便我们与您取得联系","blue") }
}
//电话验证:非必填内容
function isPhone(_obj,flag){
var obj=document.getElementById(_obj.id);
var info=document.getElementById(_obj.id+"Info");
var reg=/(^[0-9]{3,4}-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^([0-9]{3,4})[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/;
if(flag){
if(obj.value.length>0){
if(reg.test(obj.value)==false){
showInfo(info,"电话格式不正确","red")
return false; }
else{
showInfo(info,"√","green")
return true;
}
}
else{
showInfo(info,"如果方便请填写此项!","black")
return true;
}
}
else{
showInfo(info,"如果方便请填写此项!","blue")
}
}
//显示信息
function showInfo(_info,msg,color){
var info=_info;
info.innerHTML = msg;
info.style.color=color;
}
<script language="javascript" type="text/javascript">
function checkform(frm){
var refalg=false;
var f1,f2,f3,f4,f5,f6,f7;
f1 = isEmpty(frm.title,1)
f2 = isEmpty(frm.name,1)
f3 = isEmpty(frm.addr,1)
f4 = isEmpty(frm.content,1)
f5 = isPhone(frm.tel,1)
f6 = isEmail(frm.mail,0,1)
f7 = isEmail(frm.msn,0,1)
refalg = f1 && f2 && f3 && f4 && f5 && f6 && f7
// alert(refalg)
// return refalg;
if(refalg)
{
frm.submit();
}
else
{
alert("请检查表单内容是否填写完整!");
}
}
</script>
提交的地方: 提交&
10个强大的Javascript表单验证插件推荐
10个不错的JavaScript表单验证插件,使用它们完全可以节省你的时间!希望你喜欢。
1. validate.js
Validate.js是一个非常不错的JavaScript表单验证库,源于CodeIgniter API。该库相当轻巧(不到1KB),不要求任何JavaScript框架,可以在所有主流浏览器中运行(包括IE 6)。
2. Zebra Form
Zebra_Form是一个免费的PHP库,它能够很好地处理表单验证。你只需使用少量的PHP代码即可设计一个安全、别致的表单。Zebra_Form在前端集成了jQuery,用以显示警告及错误提示。
3. jFormer
jFormer是一个基于jQuery的表单框架,允许你生成漂亮、兼容标准的表单。功能包括:客户端验证;服务器端验证;Ajax提交;可通过CSS定制外观;验证码支持;通用表单模板等。
4. jQuery.validVal
jQuery.validVal插件旨在简化表单验证功能。此插件可用于任意的HTML表单(包括Ajax异步加载的),通过定义各种验证规则实现表单的验证功能。
5. Validity
Validity是一个强大灵活的jQuery表单框架,可实现客户端和服务器端同时验证。它只有9KB大小,能够执行各种简单或是复杂的验证,包括动态的或设定条件的验证。该插件还可以控制验证信息将如何显示,使其与网站的外观/风格相适应。
6. ValidForm Builder
ValidForm Buider是一个简单的、使用XHTML 1.0和CSS的Web表单生成工具。它是一个开源的PHP和JavaScript(jQuery)库,非常不错,可快速安全地制作出专业的Web验证表单。
7. Ketchup
Ketchup是一个易于定制(从外观至功能)的jQuery表单插件,可用于客户端对用户表单进行验证。
8. Validatious
Validatous是一个易于使用的Unobtrusive JavaScript表单验证库,不依赖于任何JS框架。内置数值、e-mail、URL、最大/最小字符数验证等功能。
9. Form Validator
功能广泛的表单验证方案,适用于任何表单。验证失败时将弹出浮动错误提示。
10. VanadiumJS