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}

}

}

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>

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

JavaScript 表单验证入门的更多相关文章

  1. JavaScript表单验证年龄

    JavaScript表单验证年龄,判断一个输入量是否符合年龄,通过正则表达式实现. //检查年龄 function isAge(str){ var mydate=new Date; var now=m ...

  2. 前端工具 - 15个最佳的 JavaScript 表单验证库

    客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...

  3. JavaScript表单验证和正则表达式

    JavaScript表单验证 分为四类: 1.非空验证 常用于用户名等 2.相等验证 常用于验证两次输入的密码 3.范围验证 常用于年龄等 4.正则验证 用于手机号,邮箱号等 以下是实例: <! ...

  4. 15个最佳的 JavaScript 表单验证库

    客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...

  5. JavaScript 表单验证 案例

    JavaScript 表单验证 案例 版权声明:未经授权,严禁转载!   编写 HTML 文件,搭建主体界面 <html> <head> <meta charset=&q ...

  6. 10个强大的Javascript表单验证插件推荐

    创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计.开发与测试等等环节.实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的.本文介绍了10个不错的JavaScri ...

  7. JavaScript 表单验证正则表达式大全

    JavaScript 表单验证正则表达式大全[转载] 匹配中文字符的正则表达式: [u4e00-u9fa5] 评注:匹配中文还真是个头疼的事,有了这个表达式就好办了 匹配双字节字符(包括汉字在内):[ ...

  8. javascript表单验证

    表单HTML <form action="" method="post"> <fieldset class="login" ...

  9. JavaScript表单验证实例

    1. 长度限制<script>function test(){if(document.a.b.value.length>50){alert("不能超过50个字符!" ...

随机推荐

  1. MySQL在线大表DDL操作 （转）

    http://www.cnblogs.com/janehoo/p/5382474.html 线大表DDL操作的方法: 1.主从架构轮询修改 需要注意: a.主库会话级别的记录binglog的参数关闭 ...

  2. （转）【风宇冲】Unity3D教程宝典之Blur

    原创文章如需转载请注明:转载自风宇冲Unity3D教程学院                   BlurBlur模糊其实理解了以后非常简单.核心原理就是 1个点的颜色 并不用该点的颜色,而是用该点周围 ...

  3. Sublime 格式化代码 设置快捷键以及插件使用

    实在sublime中已经自建了格式化按钮: Edit  ->  Line  ->  Reindent 只是sublime并没有给他赋予快捷键,所以只需加上快捷键即可 Preference ...

  4. Mac 隐私与安全没有允许任何来源选项

    mac 允许任何来源的 app 在 macOS Sierra 10.12 及之后的版本,都没有 打开任何来源 的选项,解决方法: 终端执行命令: sudo spctl --master-disable

  5. 放入MP3的文件夹显示一些没用的标题，艺术家，唱片集怎么办？

    原来的文件大小,类型,修改日期,创建日线都没了,怎么办? 右键点击名称,标题,艺术家那一行,在右键菜单中,去掉没用的,勾选有用的,如下图:

  6. TinyCore Nginx server with php-cgi and vsftpd

    http://blog.matchgenius.com/tinycore-nginx-server-with-php-cgi-and-vsftpd/ Create fast testing serve ...

  7. 使用CSS3生成的电子时钟特效

    在线演示 本地下载 突然觉得自己对带工作的态度亟需改正,虽然不喜欢现在的加班生活,但是自己要去接受自己不喜欢的,才能获得自己喜欢的. 这是自己好久之前丛过的一个时钟,网上应该有这个的教程,虽然实现的效 ...

  8. 微信小程序 - 自定义swiper dots样式（非组件）

      自定义须知: :组件内无法使用自定义样式变化,需要自定义 :原理就是利用swiper change事件与下标index匹配,显示不同的样式 swiper组件须知: :一旦swiper用于组件化,就 ...

  9. NGINX源代码自我总结（一）

    查看源代码入门 这是一篇关于NGINX的MAIN()函数入门说明文章,相比其他这篇十分枯燥,其实写的时候更是无聊,不过学了这么长时间的WEB开发,连NGINX源代码都没有读下来,总是觉得有些缺憾,希望 ...

  10. JavaScript的valueOf和toString

    深度好文 http://www.cnblogs.com/coco1s/p/6509141.html 知识要点 不同对象调用valueOf和toString的顺序不一样 高阶函数的使用,替代for循环 ...