JavaScript实现表单验证
表单验证可以通过 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>
<form action="#" method="post" >
<input type="text" name="Name" required="required">
<input type="submit" value="提交">
</form>
</body>
</html>
注：Internet Explorer 9 及更早 IE 浏览器不支持表单自动验证。
JavaScript实现表单验证的更多相关文章
- 第一百五十四节，封装库--JavaScript，表单验证--提交验证
封装库--JavaScript,表单验证--提交验证 将表单的所有必填项,做一个判断函数,填写正确时返回布尔值 最后在提交时,判断每一项是否正确,全部正确才可以 提交 html <div id= ...
- 第一百五十三节，封装库--JavaScript，表单验证--备注字数验证
封装库--JavaScript,表单验证--备注字数验证 效果图 html <div id="reg"> <h2 class="tuo"> ...
- 第一百五十二节，封装库--JavaScript，表单验证--年月日注入
封装库--JavaScript,表单验证--年月日注入 效果图 html <div id="reg"> <h2 class="tuo"> ...
- 第一百五十一节，封装库--JavaScript，表单验证--密码确认验证--回答验证--电子邮件验证加自动补全
封装库--JavaScript,表单验证--密码确认验证--回答验证--电子邮件验证加自动补全 效果图 html <div id="reg"> <h2 class ...
- 第一百五十节，封装库--JavaScript，表单验证--密码验证
封装库--JavaScript,表单验证--密码验证 效果图 html <div id="reg"> <h2 class="tuo">& ...
- 第一百四十九节，封装库--JavaScript，表单验证--验证用户名
封装库--JavaScript,表单验证--验证用户名 注册验证功能,顾名思义就是验证表单中每个字段的合法性,如果全部合法才可以提交表单. 效果图 聚集光标时 信息不合法是 信息合法时 html &l ...
- JavaScript：表单验证模型
之前做的验证提示以弹框的形式出现太丑陋了,不符合标准的验证提示.如果要想进行更好的数据验证操作,那么必须进行一些模块化设计,通过表单样式的改变来提示.其实,一般的数据验证无非就是那么几种,例如: 大多 ...
- JavaScript常用表单验证正则表达式（身份证、电话号码、邮编、日期、IP等）
身份证正则表达式 //身份证正则表达式(15位)isIDCard1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;//身份证正则表达式 ...
- JavaScript之表单验证讲解
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些 ...
随机推荐
- ubuntu-server-18.04 设置开机启动脚本
ubuntu-16.10 开始不再使用initd管理系统,改用systemd systemd is now used for user sessions. System sessions had al ...
- 背包----Proud merchants
一件物品p,q,v 分别表示物品的价格,钱少于q时就不能买,和物品的价值 n表示物品数量,m表示初始有的钱 问最多能买多少东西 01背包 注意点是,因为有一个q作为限制条件,所以n件物品不是随意选的了 ...
- TOP100summit 2017：投资千亿成立达摩院，揭秘阿里在人工智能领域的探索
今天上午,阿里巴巴云栖大会在杭州开幕,第一条重磅消息是阿里首席技术官张建锋宣布成立达摩院,在全球各地建立实验室,3年内投入千亿在全球建立实验室.和高校建立研究所.建立全球研究中心等事务. 该院由全球实 ...
- ubuntu16.04安装 lrzsz
编译安装 root 账号登陆后,依次执行以下命令: tar zxvf lrzsz-.tar.gz cd lrzsz- ./configure make make install 上面安装过程默认把ls ...
- 冒泡排序之python
冒泡排序(Bubble sort) 两两比较相邻记录的关键字,如果反序则交换,直到没有反序记录为止. 1.算法描述: 比较相邻的元素.如果第一个比第二个大,就交换它们两个: 对每一对相邻元素作同样的工 ...
- linux：任务计划crontab
crontab 简介 crontab 命令常见于 Unix 和类 Unix 的操作系统之中(Linux 就属于类 Unix 操作系统),用于设置周期性被执行的指令. crontab 命令从输入设备读取 ...
- ArcGIS earth 1.0 beta体验报告——给我一个按钮我将转动整个地球
随着Esri研发中心的ArcGIS earth 1.0 beta版本的全新发布,声势浩大,很多人为之好奇静待观摩其阵容.抽出五分钟体验,良心用户,必得出炉一份体验报告了. -------------- ...
- 学习计划 nginx try_files的作用
之前的nginx配置中,我链接了php和nginx之间是怎么通信和$_SERVER参数的作用. 现在有一个问题,我要配置自己的框架,我需要的参数的是 IP/控制器/方法/参数 但是现在配置的话ngin ...
- 改革春风吹满地---hdu2036（多边形用差积求面积）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2036 #include<iostream> #include<stdio.h> ...
- requests的post请求：百度翻译
import json import requests class Trans(object): def __init__(self, juzi): self.juzi = juzi self.bas ...