表单验证可以通过 JavaScript 来完成

以下示例代码用于判断表单字段(Name)值是否存在,如果存在,则弹出信息,否则阻止表单提交:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<script type="text/javascript">
function myFunction(){ var x=document.forms["Form"]["Name"].value;
if(x=null||x=="")
{
alert("请输入名字!!");
return false;
}
} </script>
</head>
<body> <form name="Form" action="#" onsubmit="return myFunction()" method="post">
名字:<input type="text" name="Name">
<input type="submit" value="提交"> </form> </body>
</html>

JavaScript 验证输入的数字

示例:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>验证输入的数字</title>
</head>
<body>
<p><strong>请输入1到10之间的数字:</strong></p>
<input id="number">
<button type="button" onclick="myFunction()">提交</button> <script type="text/javascript">
function myFunction(){ var x=document.getElementById("number").value;//获取id="number"的值
//如果输入的值 x 不是数字或者小于 1 或者大于 10,则提示错误
if(isNaN(x)||x<1||x>10)
{
alert("您输入有误,请输入1到10之间的数字!!!");
}else{
alert("您输入正确");
}
} </script>
</body>
</html>

HTML 表单验证也可以通过浏览器来自动完成。

如果表单字段 (Name) 的值为空, required 属性会阻止表单提交:

required可实现点击提交按钮,如果输入框是空的,浏览器会提示错误信息。

示例:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML 表单自动验证</title>
</head>
<body>
&nbsp;&nbsp;
<form action="#" method="post" >
<input type="text" name="Name" required="required">
<input type="submit" value="提交">
</form>
</body>
</html>

注:Internet Explorer 9 及更早 IE 浏览器不支持表单自动验证。

最新文章

  1. Static List
  2. BZOJ1946 : [Ceoi2006]ANTENNA
  3. Poj(2784),二进制枚举最小生成树
  4. Mybatis+struts2+spring整合
  5. HDU 1272 小希的迷宫(并查集)
  6. 剑指Offer:面试题12——打印1到最大的n位数(java实现)
  7. Somebody That I Used to Know
  8. CentOS卸载openoffice
  9. spring mvc MultipartFile 上传文件错误解决
  10. Windows PowerShell 默认颜色
  11. MIP开发教程(二) 使用MIP-CLI工具调试MIP网页
  12. 题解 P4705 【玩游戏】
  13. 同步pod时区与node主机保持一致
  14. 原型设计工具—Axure
  15. 分布式版本控制系统Git的安装与使用 第二次作业
  16. SpringMVC之表单校验
  17. Java Collection 学习
  18. 【翻译自mos文章】Linux的/var/log/messages是空的(0k),messages.0, messages.1也是空的
  19. dubbo常见的一些面试题
  20. substr.js 字符串切割

热门文章

  1. MIT 6.828 JOS学习笔记4. Lab 1 Part 2.1: The Boot Loader
  2. 如何通过自定义注解实现AOP切点定义
  3. express 框架之 路由与中间件
  4. GO语言练习:struct基础练习
  5. NPOI简单操作excel
  6. [z] 人工智能和图形学、图像处理方面的各种会议的评级
  7. AssetBundle系列——打包前进行平台检测
  8. RDP协议
  9. cocos2dx 3.x(精灵的碰撞检测,点击移动与拖动精灵)
  10. SignalR 2.0入门
  11. BGP
  12. MFC中的HOOK编程
  13. 爸爸又给Spring MVC生了个弟弟叫Spring WebFlux
  14. sql报错注入:extractvalue、updatexml报错原理
  15. fetch请求get方式以及post提交参数为formdata类型的数据
  16. 解决Mac应用程序软件不出现在Launchpad里面的方法
  17. CRM项目再分析建表
  18. single number和变体
  19. Codeforces Round #519 题解
  20. 01: 重写Django admin