iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > html >Javascript中怎么实现表单验证
  • 338
分享到

Javascript中怎么实现表单验证

2024-04-02 19:04:59 338人浏览 安东尼
摘要

这篇文章将为大家详细讲解有关javascript中怎么实现表单验证,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。1.表单项不能为空: ﹤ scri

这篇文章将为大家详细讲解有关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中怎么实现表单验证就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

--结束END--

本文标题: Javascript中怎么实现表单验证

本文链接: https://www.lsjlt.com/news/69753.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Javascript中怎么实现表单验证
    这篇文章将为大家详细讲解有关Javascript中怎么实现表单验证,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。1.表单项不能为空: ﹤ scri...
    99+
    2024-04-02
  • JavaScript怎么实现表单验证
    这篇文章主要介绍“JavaScript怎么实现表单验证”,在日常操作中,相信很多人在JavaScript怎么实现表单验证问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JavaScript怎么实现表单验证”的疑...
    99+
    2023-07-02
  • JavaScript实现表单验证
    目录一、JavaScript 表单验证1、数据验证2、约束验证1、约束验证 HTML 输入属性2、约束验证 CSS 伪类选择器二、JavaScript 验证 API1、checkVa...
    99+
    2024-04-02
  • Javascript中如何实现表单验证
    本篇文章为大家展示了Javascript中如何实现表单验证,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。1. 检查一段字符串是否全由数字组成: ﹤ scr...
    99+
    2024-04-02
  • JavaScript实现表单验证示例
    HTML表单(form)通常用于收集用户信息,例如姓名,电子邮件地址,位置,年龄等。 但是很可能某些用户可能不会输入您期望的数据。HTML表单验证可以通过JavaScript完成。 ...
    99+
    2024-04-02
  • JavaScript实现表单验证案例
    本文实例为大家分享了JavaScript实现表单验证的具体代码,供大家参考,具体内容如下 需求 有如下注册页面,对表单进行校验,如果输入的用户名、密码、手机号符合规则,则允许提交;...
    99+
    2024-04-02
  • HTML5中怎么实现表单验证
    这篇文章将为大家详细讲解有关HTML5中怎么实现表单验证,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。<!DOCTYPE html>&...
    99+
    2024-04-02
  • JavaScript实现简单表单验证案例
    本文实例为大家分享了JavaScript实现简单表单验证的具体代码,供大家参考,具体内容如下 一.需求分析 要实现的功能: 1.出现如下图所示的内容:(HTML和CSS完成) 2....
    99+
    2024-04-02
  • javascript表单验证是否为空怎么实现
    这篇“javascript表单验证是否为空怎么实现”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“javascript表单验证...
    99+
    2023-07-06
  • 如何用JavaScript实现表单验证
    这篇“如何用JavaScript实现表单验证”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“如何用JavaScript实现表单...
    99+
    2023-06-30
  • jQuery怎么实现表单验证
    这篇文章将为大家详细讲解有关jQuery怎么实现表单验证,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体代码如下所示:<script type=&quo...
    99+
    2024-04-02
  • BootStrap怎么实现表单验证
    这篇文章主要为大家展示了“BootStrap怎么实现表单验证”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“BootStrap怎么实现表单验证”这篇文章吧。Boo...
    99+
    2024-04-02
  • css怎么实现表单验证
    本篇内容介绍了“css怎么实现表单验证”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!   原理   表...
    99+
    2024-04-02
  • javascript中怎么验证form表单数据
    javascript中怎么验证form表单数据,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。直接po截图和代码下面是Check...
    99+
    2024-04-02
  • JavaScript表单验证怎么完成
    本文小编为大家详细介绍“JavaScript表单验证怎么完成”,内容详细,步骤清晰,细节处理妥当,希望这篇“JavaScript表单验证怎么完成”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学...
    99+
    2024-04-02
  • 如何使用JavaScript实现表单验证
    本篇内容介绍了“如何使用JavaScript实现表单验证”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一、...
    99+
    2024-04-02
  • JavaScript表单验证实现过程详解
    目录一. 作用二. 需求三. 实现一. 作用 如果没有表单验证,错误的数据就会发往服务端,会造成服务端压力过大; 所以在前端对数据进行过滤,以减轻服务端压力; 二. 需求 1. 当输...
    99+
    2023-01-30
    JavaScript表单验证 JS表单验证
  • vue中的rules表单验证怎么实现
    这篇文章主要介绍“vue中的rules表单验证怎么实现”,在日常操作中,相信很多人在vue中的rules表单验证怎么实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue中的rules表单验证怎么实现”的疑...
    99+
    2023-07-02
  • jQuery实现表单验证
    使用jQuery实现表单验证,供大家参考,具体内容如下 register.html <!DOCTYPE html> <html lang="en"> &l...
    99+
    2024-04-02
  • layui表单验证select下拉框怎么实现验证
    这篇文章主要介绍layui表单验证select下拉框怎么实现验证,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!layui 的form表单里的select 一开始以为加上lay-ver...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作