JS 验证

**JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

**

JavaScript 表单验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

被 JavaScript 验证的这些典型的表单数据有：

  • 用户是否已填写表单中的必填项目？
  • 用户输入的邮件地址是否合法？
  • 用户是否已输入合法的日期？
  • 用户是否在数据域 (numeric field) 中输入了文本？

必填（或必选）项目

下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：

function validate_required(field,alerttxt)

{

with (field)

{

if (value==null||value=="")

  {alert(alerttxt);return false}

else {return true}

}

}

下面是连同 HTML 表单的代码：

<html>

<head>

<script type="text/javascript">

function validate_required(field,alerttxt)

{

with (field)

  {

  if (value==null||value=="")

    {alert(alerttxt);return false}

  else {return true}

  }

}

function validate_form(thisform)

{

with (thisform)

  {

  if (validate_required(email,"Email must be filled out!")==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>

E-mail 验证

下面的函数检查输入的数据是否符合电子邮件地址的基本语法。

意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：

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}

}

}

下面是连同 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>

JS 验证的更多相关文章

  1. JS验证图片格式和大小并预览

    用于上传图片的js验证: <%@ page language="java" contentType="text/html; charset=UTF-8"p ...

  2. 正则表达式的JS验证

    /判断输入内容是否为空    function IsNull(){        var str = document.getElementById('str').value.trim();      ...

  3. 【转】去除eclipse的JS验证

    第一步:去除eclipse的JS验证:将windows->preference->Java Script->Validator->Errors/Warnings->Ena ...

  4. js验证输入的金钱格式

    <html> <head> <title>js验证输入的金钱格式</title> <script type="text/javascri ...

  5. .NET中表单的JS验证

    JS验证代码如下:(需要引入两个JS包) <script type="text/javascript" src="/js/jquery.validate.min.j ...

  6. 九月二十八JS验证

    js表单验证 js可用发来在数据被送往服务器前对HTML表单中的这些输入数据进行验证 被js验证的这些典型的表单数据有: >用户是否已填写表单中的必填项目: >用户输入的邮件地址是否是合法 ...

  7. js验证姓名和身份证号

    js验证真实姓名,是用的unicode字符的来进行匹配,而中国人的姓名长度一般都是2-4,所以重复匹配{2,4}次 1.js验证真实姓名 1 var regName =/^[\u4e00-\u9fa5 ...

  8. SpringMVC学习系列-后记 结合SpringMVC和Hibernate-validator，根据后台验证规则自动生成前台的js验证代码

    在SpringMVC学习系列(6) 之 数据验证中我们已经学习了如何结合Hibernate-validator进行后台的数据合法性验证,但是通常来说后台验证只是第二道保险,为了更好的用户体验会现在前端 ...

  9. 让 ASP.NET JS验证和服务端的 双验证 更简单

    只用JavaScript验证安全不安全谁都知道,答案是不安全,非常的不安全.因为在客户端进行的验证相当于“让用户自己验证自己”,很明显是不靠谱的.你不能避免一些恶意用户人为的修改自己的表单进行欺骗,也 ...

  10. js验证电话号码的正则表达式

    在做程序时遇到js验证电话号码的问题,使用正则表达式来操作很简单的.一起来看一下吧. 1,这种是比较简单的验证号码: 电话号码只能包含”(“.“)”.“-”和数字 <input   type=t ...

随机推荐

  1. SuperMap iDesktop .NET 10i制图技巧-----如何利用二维平面数据起白膜

    1.打开超图的SuperMap iDesktop,加载数据源 udbx其实就是类似于arcgis中的gdb一样的东西,把数据压缩在里面了,这样也可以保证数据的统一集中 2.打开二维面数据,里面的结构如 ...

  2. 菜鸟刷面试题（四、Spring/Spring MVC/Spring Boot/Spring Cloud篇）

    目录: 为什么要使用 spring? 解释一下什么是 aop? 解释一下什么是 ioc? spring 有哪些主要模块? spring 常用的注入方式有哪些? spring 中的 bean 是线程安全 ...

  3. 集合系列 Map（十三）：LinkedHashMap

    我们之前说过 LinkedHashMap 是在 HashMap 的基础上,增加了对插入元素的链表维护.那么其到底是怎么实现的呢?今天这篇文章就带我们来一探究竟. public class Linked ...

  4. RDP矢量数据压缩算法

    在绘制对象边缘时涉及到了这个算法,记录一下. 该算法递归进行,首先设定一个阈值,在点集的第一个点和最后一个点间拉一条线段,找出剩下的点集中离线段最远的一个点,如果该点到线段的距离小于阈值则舍弃中间的所 ...

  5. day 27-1 反射、内置方法

    反射 反射:通过字符串来映射到对象的属性 class People(): def __init__(self, name, age): self.name = name self.age = age ...

  6. UML简单介绍—类图这么看就懂了

    如何看懂类图 1.类图简介 描述类的内部结构和类与类之间的关系,是一种静态结构图. 在UML类图中,常见的有以下几种关系: 泛化(Generalization),  实现(Realization),关 ...

  7. 45.QT-连接外部dll,lib库导入问题

    dll库问题 查看MZ_Card.dll对应的文档手册,如下图所示: 所以代码写为: typedef BOOL (*Fun)(BOOL IsOpenComm,unsigned long Port, u ...

  8. Flutter学习笔记（22）--单个子元素的布局Widget（Container、Padding、Center、Align、FittedBox、Offstage、LimitedBox、OverflowBox、SizedBox）

    如需转载,请注明出处:Flutter学习笔记(22)--单个子元素的布局Widget(Container.Padding.Center.Align.FittedBox.Offstage.Limited ...

  9. react学习之js-xlsx导入和导出excel表格

    前记:最近真的挺忙的,一件事接着一件,都忘了我的React项目,尽管这是一个没写概率没写离散的夜晚,我决定还是先做做我的React 好了,进入正题 项目需求,需要导入和导出表单,发现前端已经强大到无所 ...

  10. synchronized凭什么锁得住？

    相关链接: <synchronized锁住的是谁?> 我们知道synchronized是重量级锁,我们知道synchronized锁住的是一个对象上的Monitor对象,我们也知道sync ...