`
rongyandong
  • 浏览: 31522 次
  • 性别: Icon_minigender_1
  • 来自: 内蒙古
社区版块
存档分类
最新评论

Javascript表单验证大全

阅读更多
         本文为Javascript表单验证大全第一部分,讲了长度限制、只能是汉字、只能是英文、只能是数字、只能是英文字符和数字、验证邮箱格式、屏蔽关键字和两次输入密码是否相同等八个方面的验证。

     

    1. 长度限制:

     

    ﹤ script ﹥
    function test() 
    {
    if(document.a.b.value.length﹥50)
    {
    alert("不能超过50个字符!");
    document.a.b.focus();
    return false;
    }
    }
    ﹤/ script ﹥
    ﹤form name=a onsubmit="return test()"﹥
    ﹤textarea name="b" cols="40" wrap="VIRTUAL" rows="6"﹥﹤/textarea﹥
    ﹤input type="submit" name="Submit" value="check"﹥
    ﹤/form﹥ 

     

     

    2. 只能是汉字:

     

     

    ﹤input onkeyup="value="/oblog/value.replace(/[^\u4E00-\u9FA5]/g,'')"﹥

     

     

    3.只能是英文:

     

     

    ﹤ script language=java script ﹥
    function onlyEng()
    {
    if(!(event.keyCode﹥=65&&event.keyCode﹤=90))
    event.returnvalue=false;
    }
    ﹤/ script ﹥

    ﹤input onkeydown="onlyEng();"﹥

     

     

    4. 只能是数字:

     

     

    ﹤ script language=java script ﹥
    function onlyNum()
    {
    if(!((event.keyCode﹥=48&&event.keyCode﹤=57)

    ||(event.keyCode﹥=96&&event.keyCode﹤=105))) //考虑小键盘上的数字键 event.returnvalue=false; } ﹤/ script ﹥

    ﹤input onkeydown="onlyNum();"﹥

     

     

    5. 只能是英文字符和数字:

     

     

    ﹤input onkeyup="value="/oblog/value.replace(/[\W]/g,"'')

    "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').

    replace(/[^\d]/g,''))"﹥

     

     

    6. 验证邮箱格式:


     

    ﹤ script LANGUAGE=java script RUNAT=Server﹥ function isEmail(strEmail) { if (strEmail.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+

    ((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1) return true; else alert("oh"); } ﹤/ script ﹥ ﹤input type=text onblur=isEmail(this.value)﹥

     

     

    7. 屏蔽关键字(这里屏蔽***和****):

     

     

    ﹤ script language="java script 1.2"﹥
    function test() {
    if((a.b.value.indexOf ("***") == 0)||(a.b.value.indexOf ("****") == 0))

    { alert(":)"); a.b.focus(); return false;} } ﹤/ script ﹥ ﹤form name=a onsubmit="return test()"﹥ ﹤input type=text name=b﹥ ﹤input type="submit" name="Submit" value="check"﹥ ﹤/form﹥

     

     

    8. 两次输入密码是否相同:

     

     

    ﹤FORM METHOD=POST ACTION=""﹥
    ﹤input type="password" id="input1"﹥
    ﹤input type="password" id="input2"﹥
    ﹤input type="button" value="test" onclick="check()"﹥
    ﹤/FORM﹥
    ﹤ script ﹥
    function check()
    { 
    with(document.all){
    if(input1.value!=input2.value)
    {
    alert("false")
    input1.value = "";
    input2.value = "";
    }
    else document.forms[0].submit();
    }
    }
    ﹤/ script ﹥

     

 

 

    本文为Javascript表单验证大全第二部分,讲了表单项不能为空、比较两个表单项的值是否相同、表单项是否为数字、表单项的长度、地址合法性判断和表单项输入字符是否合法等六个方面的验证。

     

    1.表单项不能为空:

     

     

    ﹤ script    language="java script "﹥
    ﹤!--
    function   CheckForm()
    {  
    if   (document.form.name.value.length   ==   0)   {  
    alert("请输入您姓名!");
    document.form.name.focus();
    return   false;
    }
    return   true;
    }
    --﹥
    ﹤/ script ﹥

     

     

    2.比较两个表单项的值是否相同:

     

     

    ﹤ script    language="java script "﹥ ﹤!-- function   CheckForm() if   (document.form.PWD.value   !=   document.form.PWD_Again.value)  

    {  alert("您两次输入的密码不一样!请重新输入."); document.ADDUser.PWD.focus(); return   false; } return   true; } --﹥ ﹤/ script ﹥

     

     

    3.表单项只能为数字和"_",用于电话/银行帐号验证上,可扩展到域名注册等:

     

     

    ﹤ script    language="java script "﹥
    ﹤!--
    function   isNumber(String)
    {  
    var   Letters   =   "1234567890-";   //可以自己增加可输入值
    var   i;
    var   c;
    if(String.charAt(   0   )=='-')
    return   false;
    if(   String.charAt(   String.length   -   1   )   ==   '-'   )
    return   false;
    for(   i   =   0;   i   ﹤   String.length;   i   ++   )
    {  
    c   =   String.charAt(   i   );
    if   (Letters.indexOf(   c   )   ﹤   0)
    return   false;
    }
    return   true;
    }
    function   CheckForm()
    {  
    if(!   isNumber(document.form.TEL.value))   {  
    alert("您的电话号码不合法!");
    document.form.TEL.focus();
    return   false;
    }
    return   true;
    }
    --﹥
    ﹤/ script ﹥
    

     

     


    4.表单项输入数值/长度限定:

     

     

    ﹤ script    language="java script "﹥
    ﹤!--
    function   CheckForm()  
    {  
    if   (document.form.count.value   ﹥   100   
    ||   document.form.count.value   ﹤   1)
    {  
    alert("输入数值不能小于零大于100!");
    document.form.count.focus();
    return   false;
    }
    if   (document.form.MESSAGE.value.length﹤10)
    {  
    alert("输入文字小于10!");
    document.form.MESSAGE.focus();
    return   false;
    }
    return   true;
    }
    //--﹥
    ﹤/ script ﹥
    

     

     

    5.中文/英文/数字/邮件地址合法性判断:

     

     

    ﹤ script    LANGUAGE="java script "﹥ ﹤!--

    function   isEnglish(name)   //英文值检测 {  if(name.length   ==   0) return   false; for(i   =   0;   i   ﹤   name.length;   i++)   {  if(name.charCodeAt(i)   ﹥   128) return   false; } return   true; }

    function   isChinese(name)   //中文值检测 {  if(name.length   ==   0) return   false; for(i   =   0;   i   ﹤   name.length;   i++)   {  if(name.charCodeAt(i)   ﹥   128) return   true; } return   false; }

    function   isMail(name)   //   E-mail值检测 {  if(!   isEnglish(name)) return   false; i   =   name.indexOf("   at   "); j   =   name   dot   lastIndexOf("   at   "); if(i   ==   -1) return   false; if(i   !=   j) return   false; if(i   ==   name   dot   length) return   false; return   true; }

    function   isNumber(name)   //数值检测 {  if(name.length   ==   0) return   false; for(i   =   0;   i   ﹤   name.length;   i++)   {  if(name.charAt(i)   ﹤   "0"   ||   name.charAt(i)   ﹥   "9") return   false; } return   true; }

    function   CheckForm() {  if(!   isMail(form.Email.value))   {  alert("您的电子邮件不合法!"); form.Email.focus(); return   false; } if(!   isEnglish(form.name.value))   {  alert("英文名不合法!"); form.name.focus(); return   false; } if(!   isChinese(form.cnname.value))   {  alert("中文名不合法!"); form.cnname.focus(); return   false; } if(!   isNumber(form.PublicZipCode.value))   {  alert("邮政编码不合法!"); form.PublicZipCode.focus(); return   false; } return   true; } //--﹥ ﹤/ script ﹥

     

     

    6.限定表单项不能输入的字符:

     

     

    ﹤ script    language="java script "﹥ ﹤!--

    function   contain(str,charset)//   字符串包含测试函数 {  var   i; for(i=0;i﹤charset.length;i++) if(str.indexOf(charset.charAt(i))﹥=0) return   true; return   false; }

    function   CheckForm() {  if   ((contain(document.form.NAME.value,   "%\(\)﹥﹤"))   ||   (contain(document.form.MESSAGE.value,   "%\(\)﹥﹤"))) {  alert("输入了非法字符"); document.form.NAME.focus(); return   false; } return   true; } //--﹥ ﹤/ script ﹥ 

     

 

    本文是Javascript表单验证大全第三部分,讲了检查是否为数字字符串、是否为字符、是否含有汉字、邮箱格式、数字格式、电话号码格式、输入是否为中文函数、综合判断输入的合法性、密码是否输入一致、用户名是否为数字字母下划线、form文本域等十一个方面的验证。

     

    1. 检查一段字符串是否全由数字组成:

     

     

    ﹤ script language="Java script "﹥
    ﹤!--function checkNum(str){return str.match(/\D/)==null}           
    alert(checkNum("1232142141"))           
    alert(checkNum("123214214a1"))           
    // --﹥﹤/ script ﹥      

     



    2. 怎么判断是否是字符:

     

     

    if (/[^\x00-\xff]/g.test(s)) alert("含有汉字");          
    else alert("全是字符");      

     

     


    3. 怎么判断是否含有汉字:

     

     

    if (escape(str).indexOf("%u")!=-1) alert("含有汉字");         
    else alert("全是字符");        

     




    4. 邮箱格式验证:

     

    //函数名:chkemail     
    //功能介绍:检查是否为Email Address     
    //参数说明:要检查的字符串     
    //返回值:0:不是 1:是     
    function chkemail(a)     
    { var i=a.length;     
    var temp = a.indexOf('@');     
    var tempd = a.indexOf('.');     
    if (temp ﹥ 1) {     
    if ((i-temp) ﹥ 3){     
    if ((i-tempd)﹥0){     
    return 1;     
    }     }     }     
    return 0;     
    }     
    

     





    5. 数字格式验证:

     

     

    //函数名:fucCheckNUM     
    //功能介绍:检查是否为数字     
    //参数说明:要检查的数字     
    //返回值:1为是数字,0为不是数字     
    function fucCheckNUM(NUM)     
    {     
    var i,j,strTemp;     
    strTemp="0123456789";     
    if ( NUM.length== 0)     
    return 0     
    for (i=0;i﹤NUM.length;i++)     
    {     
    j=strTemp.indexOf(NUM.charAt(i));     
    if (j==-1)     
    {     
    //说明有字符不是数字     
    return 0;     
    }     
    }     
    //说明是数字     
    return 1;     
    }     
    

     




    6. 电话号码格式验证:

     

     

    //函数名:fucCheckTEL     
    //功能介绍:检查是否为电话号码     
    //参数说明:要检查的字符串     
    //返回值:1为是合法,0为不合法     
    function fucCheckTEL(TEL)     
    {     
    var i,j,strTemp;     
    strTemp="0123456789-()# ";     
    for (i=0;i﹤TEL.length;i++)     
    {     
    j=strTemp.indexOf(TEL.charAt(i));     
    if (j==-1)     
    {     
    //说明有字符不合法     
    return 0;     
    }     
    }     
    //说明合法     
    return 1;     
    }    
    

     



    7. 判断输入是否为中文的函数:

     

     

    function ischinese(s){   
    var ret=true;   
    for(var i=0;i﹤s.length;i++)   
    ret=ret && (s.charCodeAt(i)﹥=10000);   
    return ret;   
    }   

     



    8. 综合的判断用户输入的合法性的函数:

     

     

    ﹤ script language="java script "﹥  
    //限制输入字符的位数开始  
    //m是用户输入,n是要限制的位数  
    function issmall(m,n)  
    {  
    if ((m﹤n) && (m﹥0))  
    {  
    return(false);  
    }  
    else  
    {return(true);}  
    }  
    

     



    9. 判断密码是否输入一致:

     

     

    function issame(str1,str2)  
    {  
    if (str1==str2)  
    {return(true);}  
    else  
    {return(false);}  
    }  
    

     

     


    10. 判断用户名是否为数字字母下滑线:

     

     

    function notchinese(str){ 
    var reg=/[^A-Za-z0-9_]/g 
    if (reg.test(str)){ 
    return (false); 
    }else{ 
    return(true);     } 
    } 

     

     

    11. form文本域的通用校验函数:

    作用:检测所有必须非空的input文本,比如姓名,账号,邮件地址等等。
    该校验现在只针对文本域,如果要针对form里面的其他域对象,可以改变判断条件。

    使用方法:在要检测的文本域中加入title文字。文字是在提示信息,
    你要提示给用户的该字段的中文名。比如要检测用户名
    html如下﹤input name="txt_1" title="姓名"﹥,当然,最好用可视化工具
    比如dreamweaver什么的来编辑域。
    如果要检测数字类型数据的话,再把域的id统一为sz.
    java script 判断日期类型比较麻烦,所以就没有做日期类型校验的程序了。

    程序比较草,只是提供一个思路。抛砖引玉! :)

    函数调用方法:

    ﹤ form   onsubmit="return dovalidate()"﹥

    function dovalidate() { fm=document.forms[0] //只检测一个form,如果是多个可以改变判断条件 for(i=0;i﹤fm.length;i++) {  //检测判断条件,根据类型不同可以修改 if(fm[i].tagName.toUpperCase()=="INPUT" &&fm[i].type. toUpperCase()=="TEXT" && (fm[i].title!="")) if(fm[i].value="/blog/="")// { str_warn1=fm[i].title+"不能为空!"; alert(str_warn1); fm[i].focus(); return false;         } if(fm[i].id.toUpperCase()=="SZ")//数字校验 { if(isNaN(fm[i].value)) { str_warn2=fm[i].title+"格式不对"; alert(str_warn2); fm[i].focus(); return false; } } } return true; }

分享到:
评论

相关推荐

    javaScript表单验证大全

    "JavaScript表单验证大全"这个主题涵盖了许多关于如何使用JavaScript有效地验证用户输入的重要概念。表单验证是确保用户提交的数据符合预设规则的关键步骤,它能防止无效数据进入数据库,提升用户体验,并减少服务器...

    javascript表单验证大全

    ### JavaScript表单验证大全 在Web开发中,前端表单验证是确保用户输入数据有效性的关键环节之一。本文档将详细介绍一系列JavaScript表单验证的方法和技术,涵盖了从基本的字符串长度限制到复杂的邮箱格式验证等...

    javascript表单验证 正则表达式验证表单

    比较实用的javascript做的表单验证,验证的表单域包括用户名、密码、密码确认、密码提示问题、邮箱、手机号码、身份证。表单域基本通过获得焦点显示提示信息,失去焦点进行验证,还有提交表单验证。提交表单先进行...

    javascript表单验证方式一

    本文将深入探讨"javascript表单验证方式一",介绍如何利用JavaScript进行表单验证,确保用户输入的数据符合预设规则,提高用户体验,同时也减轻了服务器端的压力。 首先,表单验证的基本目标是检查用户在HTML表单中...

    JavaScrpt表单验证大全

    "JavaScript表单验证大全"集合了各种表单验证方法和源码,旨在帮助开发者创建美观且功能强大的表单验证机制,提高用户体验,防止无效或错误的数据提交至服务器。 一、表单验证基础 1. **事件监听**:JavaScript可以...

    高级的javascript表单验证

    高级的javascript表单验证, 正则及常用验证 制作带关闭按钮的浮动窗口 制作全选全不选效果效果 DIV提示效果的表单验证

    JavaScript表单验证控制代码大全

    "JavaScript表单验证控制代码大全"是一个集成了多种表单验证技术和策略的资源集合,帮助开发者有效地确保用户输入的数据质量和安全性。下面我们将深入探讨这个主题,了解JavaScript如何对表单数据进行验证以及常见的...

    javascript表单验证器三方库.zip

    总的来说,"javascript表单验证器三方库.zip" 提供了一个强大的工具,用于处理JavaScript表单验证,它具有可配置性、递归数据验证等特性,是开发高效、健壮的Web应用的重要辅助工具。无论是初学者还是经验丰富的...

    JavaScript表单验证模板

    这个"JavaScript表单验证模板"是一个实用的工具,适合初学者学习和快速实现表单数据验证功能。表单验证是确保用户输入符合特定规则的关键步骤,它可以防止无效数据提交到服务器,提高用户体验,并减少服务器端处理...

    javascript表单美化和验证插件

    6. **表单验证**:这个插件提供了强大的验证功能,能自动检查用户输入的数据是否符合预设规则,如电子邮件格式、手机号码格式等。通过使用代码示例,开发者可以轻松集成和自定义验证逻辑。 在实际应用中,开发者会...

    jq表单验证大全.rar jq表单验证大全.rar

    《jq表单验证大全》是针对使用jQuery库进行前端表单验证的一份综合资源集合,主要涵盖各种常见的表单验证场景和解决方案。jQuery,作为一款轻量级的JavaScript库,因其简洁的API和强大的功能而广受欢迎,尤其在处理...

Global site tag (gtag.js) - Google Analytics