JavaScript 表单验证常用代码

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

被 JavaScript 验证的这些典型的表单数据有：

•用户是否已填写表单中的必填项目？
•用户输入的邮件地址是否合法？
•用户是否已输入合法的日期？
•用户是否在数据域 (numeric field) 中输入了文本？

下面是连同 HTML 表单的完整代码：

 代码如下 复制代码

<html>
<head>
<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>
</head>

<body>
<form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>

</html>

上面只是一个超简单的邮箱验证实例了，我们再看

验证功能如下:

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>

提交的地方: <a href="#" onclick="javascript:checkform(document.forms['form1']);">提交</a>&

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

时间： 2024-12-27 17:41:07

JavaScript 表单验证常用代码的相关文章

ASP动态生成的javascript表单验证代码

javascript|表单验证|动态 以网上down了一个ASP动态生成Form验证javascript的代码,自己扩容了一下.作者的大名我给忘了,不过我记得清楚,从第一条至第九条的代码都是该作者的原创.至于九至第十五条却是本人自己加的哦.而且由于本人水平有限,从第九条至第十五条不见得会条条生效啊?呵呵,其实把它贴在这里没有什么必要的,因为这点小会伎俩谁都会用的,我把它的作用定位为:开发时找不到该函数时到这里拷贝一下就可以了.呵,因为我即没有刻录机也没有移动硬盘.实在是没有办法把这些代码随身携带

常用javascript表单验证汇总_javascript技巧

实例讲解:验证输入的是否是数字,是否满足数字位数,如果错误,并进行友情提醒. 效果图: <!DOCTYPE html> <html> <body> <h1>我的第一段 JavaScript</h1> <p>请输入数字.如果输入值不是数字,浏览器会弹出提示框.</p> <input id="demo" type="text"> <script> function

JS表单验证的代码(常用)_javascript技巧

注册验证: <script language="JavaScript" src="js/jquery-1.9.1.min.js" type="text/javascript"></script> //验证表单 function vailForm(){ var form = jQuery("#editForm"); if(!vailNickName())return; if(!vailPhone())re

AngularJs表单验证实例代码解析_AngularJS

常用的表单验证指令如下详情: 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" required /> 2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": <input type="text" ng-minlength="5" /> 3.

JavaScript 表单处理实现代码_基础知识

一 表单介绍 在HTML中,表单是由<form>元素来表示的,而在JavaScript中,表单对应的则是HTMLFormElement类型; // HTMLFormElement继承了HTMLElement;因此它拥有HTML元素具有的默认属性,别且还独有自己的属性和方法;HTMLFormElement属性和方法属性或方法 说明 acceptCharset 服务器能够处理的字符集; action 接受请求的URL; elements 表单中所有控件的集合; enctype 请求的编码类型; l

简单的JavaScript表单验证

问题描述 简单的JavaScript表单验证 <script></script>中有两个同名函数,参数个数不同,为什么一次调用两个函数都执行了呢?onsubmit="return validate_form(this)这句代码不是应该只调用了一个函数吗? <html> <head> <script type="text/javascript"> function validate_required(field,ale

JavaScript表单验证实例之验证表单项是否为空_javascript技巧

表单验证几乎在每一个需要注册或者登陆的网站是必不可少的,有些验证则非常的复杂,可以说是各种各样给你的要求,不过本章节只介绍一下表单中最简单的验证方式,就是判断是否为空,有些要求比较低的网站对此已经满足需要了. 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://ww

javascript表单验证大全_javascript技巧

被 JavaScript 验证的这些典型的表单数据有以下几种: 1.用户是否已填写表单中的必填项目? 2.用户输入的邮件地址是否合法? 3.用户是否已输入合法的日期? 4.用户是否在数据域 (numeric field) 中输入了文本? 下面是用户名和密码验证代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> &

拥有一个属于自己的javascript表单验证插件_javascript技巧

自己编写了一个表单验证插件,使用起来很简单,以后还可以扩展更多的功能,比如ajax验证. 每个需要验证的表单元素下面有一个span标签,这个标签的class有一个valid表示需要验证,如果有nullable则表示可为空:rule表示验证规则,msg表示错误提示信息:to表示要验证的元素的name值,如果元素是单个的,to可以不写.该插件会遍历每个有valid的span标签,找出它前面需要验证的元素,根据rule验证,如果验证不通过,则显示边框为红色,鼠标放在元素上时显示错误信息.  验证时机: