@Author：Runsen
@Date：2020/5/30

作者介绍：Runsen目前大三下学期，专业化学工程与工艺，大学沉迷日语，Python， Java和一系列数据分析软件。导致翘课严重，专业排名中下。.在大学60%的时间，都在CSDN。决定今天比昨天要更加努力。

我要反复查漏补缺，将2018年的东西捡回来，形成高效学习。

今天，我要写的是JavaScript表单中的验证API，写之前，先去W3C教程看看，偷窥学习一下JavaScript表单中的验证API。

文章目录

表单标签
HTML 表单实例
验证数字输入
失去焦点
判断是不是数值
封装函数
代码
验证API

表单标签

在HTML中，表单是由<form>元素来表示的，<input>就是用户输入的标签。其实在有一些<input>输入类型本身就拥有一些内在的约束。将 type 设置为 “email”, “number” 或者 “URL” 的话，就会自动检查输入的值是否是有效的电子邮件地址、数字或者 URL，例如:

<input type="email">

HTML 表单实例

这是来自W3C教程的例子。这里我不知道document.forms["myForm"]["fname"].value的用法，所以拿过来。

<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {// document.forms["myForm"]["fname"].value 都是namevar x = document.forms["myForm"]["fname"].value;if (x == "") {alert("必须填写姓名！");return false;}
}
</script>
</head>
<body><form name="myForm" action="/demo/action_page.php" οnsubmit="return validateForm()" method="post">姓名：<input type="text" name="fname"><input type="submit" value="提交">
</form></body>
</html>

验证数字输入

下面验证输入的是不是成绩，要求就是成绩必须在0-100之间，效果如下gif所示。

失去焦点

所谓焦点,就是鼠标移上文本框的时候那个一闪一闪的光标，失去焦点用户就是要输入。onblur就是失去焦点事件，通过$("score").value获取输入的内容。

判断是不是数值

获取输入的内容，就是一个parseFloat判断是不是数值，然后就是添加class，修改样式。

封装函数

由于三次判断需要处理公共的样式，那么就直接写一个dealStyle函数。当输入框获得焦点，也需要一个函数。

代码

具体代码如下。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>#prompt{font-size: 13px;color: darkgray;}#score{border:1px solid darkgray;}.right{background-size:15px 15px;padding-left: 20px;color: lightgreen !important;}.error{background-size:15px 15px;padding-left: 20px;color: red !important;}</style>
</head>
<body><div id="box"><label>您的成绩:</label><input id="score" type="text" placeholder="请输入分数"><span id="prompt">请输入您的成绩!</span></div>
<script>window.onload = function () {// 当输入框失去焦点$('score').onblur = function () {// 1. 获取输入的内容var value = parseFloat($("score").value);// 2.验证if(isNaN(value)){ // 不是一个数/* $('prompt').innerText = "输入成绩不正确";$('prompt').className = 'error';$('score').style.borderColor = 'red';*/dealStyle('输入成绩不正确', 'error', 'red');}else if(value >= 0 && value <= 100){ // 合法的/*$('prompt').innerText = "输入成绩正确";$('prompt').className = 'right';$('score').style.borderColor = 'lightgreen';*/dealStyle('输入成绩正确', 'right', 'lightgreen');}else { // 超出/*$('prompt').innerText = "成绩必须在0-100之间";$('prompt').className = 'error';$('score').style.borderColor = 'red';*/dealStyle('成绩必须在0-100之间', 'error', 'red');}};// 当输入框获得焦点$('score').onfocus = function () {/*$('prompt').innerText = "请输入您的成绩!";$('prompt').className = '';$('score').style.borderColor = 'darkgray';*/$('score').style.outline = 'none';$('score').value = '';dealStyle("请输入您的成绩!", '', 'darkgray');};/*** 处理公共的样式* @param {string}msg* @param {string}className* @param {string}color*/function dealStyle(msg, className, color) {$('prompt').innerText = msg;$('prompt').className = className;$('score').style.borderColor = color;}};function $(id) {return typeof id === "string" ? document.getElementById(id) : null;}
</script>
</body>
</html>

这是你会好奇$('score').，其实这是jQuery 的写法，由于没有导入jQuery，所以定义了function $(id) 的函数。

验证API

还有很多验证API，比如常见的checkValidity和setCustomValidity

属性	描述
checkValidity()	返回 true，如果 input 元素包含有效数据
setCustomValidity()	设置 input 元素的 validationMessage 属性。

具体的查看W3C教程，我不想照搬。

十四、JavaScript表单中的验证API相关推荐

数据验证html,JavaScript 表单数据验证
JavaScript 表单 HTML 表单验证可以通过 JavaScript 来完成. HTML 表单验证也可以通过浏览器来自动完成. 如果表单字段 (fname) 的值为空, required 属性 ...
SQL2K数据库开发十四之表操作设置用户对表的权限
1.在企业管理器中双击Products表,打开表的属性窗口,如下图: 2.点击"权限"按钮可以设置用户或数据库角色对该表所拥有的各种操作的权限.如下图: 3.点击"列&q ...
第一百八十四节，jQuery-UI，验证注册表单
jQuery-UI,验证注册表单 html <form id="reg" action="123.html" title="会员注册" ...
7 Javascript:表单与验证-非空验证
表单提交前要检查数据的合法性在要对表单里的数据进行验证的时候,能够利用getElementById()来訪问网页上不论什么一个元素每一个表单域都有一个form对象,可被传给不论什么验证表单数据的函 ...
camunda框架学习（十四）表单系列
一.表单生命周期.定义方式表单使用两种方式 FormService: 表单定义支持的节点: 二.外置表单 <bpmn:startEvent id="StartEvent_1" ...
第十四篇表单控件 - 购物车页面
上一篇内容已经简单的介绍了表单控件以及表单控件的绑定,有登录界面输入的用户信息(userInfo)是否需要启动 "记住" 功能,"记住" 是一个记录登录状态, ...
JavaScript表单信息验证案例——使用正则
文章目录展示设计完整代码简约版豪华版展示设计首先建立我们的输入框 QQ号:<input type="text" id="txtQQ"> ...
2021年大数据Flink（十四）：流批一体API Connectors JDBC
目录 Connectors JDBC 代码演示 Connectors JDBC Apache Flink 1.12 Documentation: JDBC Connector 代码演示 package ...
DVWA靶场练习十四—JavaScript
这是DVWA靶场的最后一关,JS攻击练习主要是为了帮助用户了解如何在浏览器中使用JavaScript和攻击者如何控制JavaScript实施攻击. 一.低级(Low Level) ...

十四、JavaScript表单中的验证API