`
jdw
  • 浏览: 161420 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js表单验证控制代码大全

    博客分类：
  • web
JavaScriptDreamweaverJ#Blog 
阅读更多

目录:


1.1:js 字符串长度限制、判断字符长度 、js限制输入、限制不能输入、textarea 长度限制
1.2.:js判断汉字、判断是否汉字 、只能输入汉字
1.3:js判断是否输入英文、只能输入英文
1.4:js只能输入数字,判断数字、验证数字、检测数字、判断是否为数字、只能输入数字
1.5:只能输入英文字符和数字
1.6: js email验证 、js 判断email 、信箱/邮箱格式验证
1.7:js字符过滤,屏蔽关键字
1.8:js密码验证、判断密码

1.9:屏蔽右键


2.1: js 不为空、为空或不是对象 、判断为空 、判断不为空
2.2:比较两个表单项的值是否相同
2.3:表单只能为数字和"_",
2.4:表单项输入数值/长度限定
2.5:中文/英文/数字/邮件地址合法性判断
2.6:限定表单项不能输入的字符
2.7:表单的字符控制
2.8:form文本域的通用校验函数

 

1.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>

 

1.2. 只能是汉字

 

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

 

1.3. 只能是英文

<script language=javascript>
  function onlyEng()
  {
    if(!(event.keyCode>=65&&event.keyCode<=90))
      event.returnvalue=false;
  }
</script>

<input onkeydown="onlyEng();">

 

1.4. 只能是数字

<script language=javascript>
  function onlyNum()
  {
    //考虑小键盘上的数字键
    if(!((event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=96&&event.keyCode<=105)))    event.returnvalue=false;
  }
</script>

<input onkeydown="onlyNum();">

 

1.5. 只能是英文字符和数字

<input onkeyup="value="/oblog/value.replace(/[\W]/g,"'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">

 

1.6. 验证邮箱格式

<SCRIPT LANGUAGE=javascript 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)>

 

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

<script language="javascript1.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>

 

1.8. 两次输入密码是否相同

<script>
  function check()
  {
    with(document.all){
      if(input1.value!=input2.value){
        alert("false")
        input1.value = "";
        input2.value = "";
      }else 
        document.forms[0].submit();
    }
  }
</script>

<FORM METHOD=POST ACTION="">
  <input type="password" id="input1">
  <input type="password" id="input2">
  <input type="button" value="test" onclick="check()">
</FORM>

 

1.9.屏蔽右键

<BODY oncontextmenu="return false" ondragstart="return false" onselectstart="return false">
</BODY>

 

2.1  表单项不能为空

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

 

 2.2  比较两个表单项的值是否相同

<script  language="javascript">
<!--
  function  CheckForm() 
    {
    if  (document.form.PWD.value  !=  document.form.PWD_Again.value)  {  
      alert("您两次输入的密码不一样！请重新输入.");
      document.ADDUser.PWD.focus();
      return  false;
    }
    return  true;
  }
-->
</script>

 

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

<script  language="javascript">
<!--
  function  isNumber(String)
  {  
    var  Letters  =  "1234567890-";  //可以自己增加可输入值 Z
    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>

 

 

2.4  表单项输入数值/长度限定

<script  language="javascript">
<!--
  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>

 

2.5  中文/英文/数字/邮件地址合法性判断

<SCRIPT  LANGUAGE="javascript">
<!--

  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>

 

2.6  限定表单项不能输入的字符

<script  language="javascript">
<!--

  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>

 

2.7 表单的字符控制

<script language="Javascript">

  //检查一段字符串是否全由数字组成
  function checkNum(str){return str.match(/\D/)==null}          
  alert(checkNum("1232142141"));
  alert(checkNum("123214214a1")) ;

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

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

  //函数名：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;    
  }    

  //函数名：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;    
  }    

  //函数名：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;    
  }    

  //判断是否全为中文
  function ischinese(s)
  {  
    var ret=true;  
    for(var i=0;i<s.length;i++)  
      ret=ret && (s.charCodeAt(i)>=10000);  
    return ret;  
  }

  //判断用户名是否为数字字母下滑线
  function notchinese(str)
  {
    var reg=/[^A-Za-z0-9_]/g
    if (reg.test(str))
      return (false);
   else
      return(true); 
  }

</script>

 

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

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

 

使用方法：在要检测的文本域中加入title文字。文字是在提示信息，你要提示给用户的该字段的中文名。比如要检测用户名
html如下<input name="txt_1" title="姓名">,当然，最好用可视化工具比如dreamweaver什么的来编辑域。

< form  onsubmit="return dovalidate()"></form>

<scriptlanguage="Javascript">

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

</script>

 
如果要检测数字类型数据的话，再把域的id统一为javascript判断日期类型比较麻烦，所以就没有做日期类型校验的程序了.高手可以补充。

分享到：
| JS key大全
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JavaScript表单验证控制代码大全

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

    史上最全最完整的js表单验证控制代码大全

    根据提供的标题、描述以及部分代码内容，我们可以整理出一系列与JavaScript表单验证相关的知识点。以下是对这些知识点的详细解析： ### 1. 基础表单元素验证 #### 1.1 文本框（`&lt;input&gt;`）与文本区域（`&lt;textarea&gt;...

    js表单验证控制代码大全.

    根据提供的文件信息，我们可以整理出一系列关于JavaScript表单验证的相关知识点。这些知识点涵盖了常见的表单字段验证需求，例如文本输入、数字输入、电子邮件格式验证等。下面将详细展开每个部分的知识点。 ### 1....

    js表单验证控制代码大全.txt

    根据提供的文件信息，我们可以将其中的关键知识点...通过上述知识点的归纳总结，可以有效地帮助开发者理解和应用这些常用的表单验证技巧。这些方法不仅能够提高表单数据的有效性和安全性，还能够提升用户的交互体验。

    js表单验证控制代码部分实例大全

    JS 表单验证控制：Textarea 长度限制 在网页表单中，经常需要对用户输入的数据进行长度限制，特别是文本区域 (`textarea`)。下面是一个简单的例子，它通过 JavaScript 来实现对 `textarea` 输入内容的长度进行限制...

    JS表单验证与JS常见问题解决方案

    "JavaScript常见问题整理.txt"、"表单验证大全.txt"、"JavaScript表单验证控制代码大全.txt"、"JavaScript验证表单函数大全.txt"这些文件将提供更具体的信息和示例代码，帮助深入理解和掌握这一主题。

    JS注册表单验证

    网上常见的用JS编写的注册表单验证的代码，非常实用哦

    js表单验证代码 很全很强大

    总的来说，JavaScript表单验证代码库提供了一套完整的解决方案，帮助开发者轻松实现对用户输入的验证，提升网站或应用的用户体验和数据质量。开发者在实际使用时，需要根据项目需求选择合适的验证规则，配置错误提示...

    js通用表单验证代码

    本文将深入探讨“js通用表单验证代码”这一主题，以及如何利用JavaScript进行有效的表单验证。 首先，我们要理解JavaScript在表单验证中的角色。JavaScript是一种客户端脚本语言，它可以在用户的浏览器上运行，无需...

    java表单验证完整代码+++表单验证大全

    在javaScript中我只是介绍了一个简单的表单验证的代码，虽然这个例子的代码不能够实现像网络中的功能那样的牛，但那也是我辛辛苦苦编写的源代码，当然这是我那时初学时写的。我敢肯定我把微软的课程一学完就能够编写...

    一行代码搞定整站的表单验证js代码

    这个“一行代码搞定整站的表单验证js代码”很可能通过封装这些验证方法，提供了一个简洁的接口，使得开发者在表单元素上简单调用即可实现多种验证。这种做法大大减少了开发时间和复杂度，对于快速开发和维护是极其...

    js手机注册表单验证代码.zip

    综上所述，"js手机注册表单验证代码.zip" 提供了一个基本的前端验证框架，涵盖了手机注册所需的关键步骤，包括输入验证、验证码发送和接收，以及表单的最终提交。开发者可以根据自己的项目需求对这些代码进行修改和...

    JS表单验证程序源代码

    这是一个表单验证的JavaScript源文件代码，

    原生js带提示留言表单验证代码.zip

    本资源"原生js带提示留言表单验证代码.zip"提供了一套完整的原生JavaScript实现的表单验证解决方案，尤其适用于留言功能。以下是关于这个代码包中的关键知识点的详细说明： 1. **原生JavaScript**：原生JavaScript...

    jQuery表单验证实例代码

    在本文中，我们将深入探讨如何使用jQuery进行表单验证，主要基于给定的"jQuery表单验证实例代码"。jQuery库简化了JavaScript的DOM操作，使得表单验证变得更加容易和直观。以下是一些关于这个主题的关键知识点： 1. ...

Magicbox
Global site tag (gtag.js) - Google Analytics