【javascript学习指南】JavaScript 表单验证常用代码

更新时间:2018-01-26    来源:常用代码    手机版     字体:

【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>



Email:


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

验证功能如下:

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

本文来源:http://www.bbyears.com/css/38802.html

猜你感兴趣

热门标签

更多>>

本类排行