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. Vue学习笔记Day1

    1.vue初时 vue安装三种方式: 1:CDN引入 以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地. Staticfile CDN(国内) : https:// ...

  2. GPS NMEA-0183标准详解

    NMEA - 0183 是美国国家海洋电子协会(National Marine Electronics Association)为海用电子设备制定的标准格式.目前业已成了 GPS/北斗导航设备统一的 ...

  3. 学习SQL注入---1

    开始接触SQL注入了,最开始根据网上的思路做了两道注入的题,但对于SQL注入如何实现,怎么一个流程还是不理解.后来,在网上查找了很多资料,现在一点点去理解. 1.利用sqlmap注入的时候,不是所有页 ...

  4. filezilla无法登陆ubuntu虚拟机

    一般情况下,是新安装的虚拟机没有安装ssh造成的 进入虚拟机控制台,输入 sudo apt-get openssh-server 回车 等安装完成即可登陆.

  5. 事隔五年之后，开启第2版DSP数字信号处理和CMSIS-NN神经网络教程，同步开启三代示波器，前15章发布（2019-11-04）

    说明:1.第1版DSP教程发布于2014年末,纪念下:https://www.cnblogs.com/armfly/p/11274826.html2.这几年在信号处理的应用上积累了一些经验,也发现了很 ...

  6. Jmeter 查看结果树之界面功能介绍 [8]

    查看结果树显示所有请求响应的树,通过它可以查看任何请求的响应.除了显示响应之外,还可以查看获取响应所花费的时间以及一些响应代码.需要通过"查看结果树"来查看服务器处理请求之后的返回 ...

  7. asp.net core使用serilog将日志推送到腾讯云日志服务

    为什么是serilog? Serilog是 .NET 中最著名的结构化日志类库. 基于日志事件log events,而不是日志消息log message. 你可以将日志事件格式化为控制台的可读文本或者 ...

  8. Spring Cloud系列：不重启eureka，清除down掉的服务

    场景描述 做项目的时候,我的服务改了个ip,然后重新启动后,原ip的服务down掉了,但是没有清楚掉,还在上面,导致我用swagger测试的时候,访问不到真正up的程序.重启eureka又不划算,于是 ...

  9. SAP 下钻功能大全

    FORM ALV_USER_COMMAND USING R_UCOMM LIKE SY-UCOMM "作为reuse_alv_grid_display的事件i_callback_user_c ...

  10. Android Studio出现Failed to open zip file问题的解决方法

    直接在网上找到gradle-3.3-all.zip下载下来,不要解压缩,放在类似下面的目录中 C:\Users\Administrator\.gradle\wrapper\dists\gradle-3 ...