JavaScript 表单验证常用代码-自学php网

JavaScript 表单验证常用代码

来源：自学PHP网时间：2014-09-19 14:47 作者：阅读:次

[导读] 本文章来给大家收集了大量关于各种各样表单验证的js代码，包括了些常用jquery表单验证插件了，有需要了解的同学可进入参考这些验证实例。...

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 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;
}

提交的地方: <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

js 验证手机号合法性程序代码

js验证身份证号码真实性实现代码

子栏目

JavaScript 表单验证常用代码

最新评论

添加评论

更多文章推荐

添加评论