JS 表单

最新推荐文章于 2023-02-03 10:00:00 发布

望望byte

最新推荐文章于 2023-02-03 10:00:00 发布

阅读量510

点赞数

分类专栏： JavaScript学习笔记文章标签： javascript

原文链接：https://www.w3school.com.cn/js/js_validation_api.asp

版权

JavaScript学习笔记专栏收录该内容

71 篇文章 0 订阅

订阅专栏

文章目录

JS 表单验证
JS 验证API

JS 表单验证

HTML 表单验证能够通过 JS 来完成

如果某个表单字段（fname）是空的，那么该函数会发出一条警告消息，并返回 false，以防止表单被提交出去

HTML表单实例

<form name="myForm" action="/action_page_post.php" onsubmit="return vailddateForm() " method="post">
姓名： <input type="text" name="fname">
<input type="submit" value="提交">
</form>

JS实例

function validdataForm() {
	var x= document.forms["myForm"]["fname"].value;
	if (x == ""){
		alert("please wirte your name,guys");
		return false;
	}
}

该函数能够在表单提交时被调用：

JS能够验证数字输入

JS 常用于验证数字输入：
在这里插入图片描述

<!DOCTYPE html>
<html>
<body>
<p>请输入 1 到 10 之间的数</p>
<input id="numb">
<button type="button" onclick="myFunciton()" >提交</button>
<p id="demo"></p>
<script>
function myFunction() {
	var x, text;
	x= document.getElementById("numb").value;
	if(isNaN(x) || x <1 || x>10) {
		text="输入无效";
	}else {
		text="输入有效";
	}
	document.getElementById("demo").innerHTMl= text;
}
</script>
</body>
</html>

自动HTML表单验证

HTML 表单验证能够被浏览器自动执行
如果表单字段（fname）是空的，required 属性防止表单被提交：

HTML 表单实例

<form action="/action_page_post.php" method="post">
   <input type="text" name="fname" required>
   <input type="submit" value="Submit">
</form>

自动 HTML 表单验证不适用于 Internet Explorer 9 或更早的版本。

数据验证

定义：
数据验证是指确保干净、正确、和有用的用户输入过程。
作用：
确保正确的用户输入

典型的验证任务是：

用户是否已填写所有的必需字段？
用户是否输入有效的日期？
用户是否在数字字段中输入了文本？

验证可以通过不同的方法来定义，并且可以使用不同的方法来开发

服务器验证：
是由Web服务器执行的，在输入被送往服务器之后
客户端验证：
是由Web浏览器执行的，在输入被送往Web服务器之前

HTMl 约束验证（HTML5新引入）

HTML5 引入了一种新的HTML 验证概念，名为约束验证（constraint validation）

HTML 约束验证基于：

约束验证 HTML输入属性
约束验证 CSS伪选择器
约束验证 DOM属性和方法

约束验证HTML输入属性

在这里插入图片描述

约束验证 CSS伪选择器

在这里插入图片描述

JS 验证API

约束验证DOM方法

在这里插入图片描述

checkValidity（）方法

<!DOCTYPE html>
<html>
<body>
<p>请输入数字并点击提交</p>
<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction">提交</button>
<p>如果该数字小于 100 或大于 300，将显示错误消息。</p>
<p id="demo"></p>
<script>
function myFunction() {
	var inpObj= document.getElementById("id1");
	if(!inpObj.checkValidity()) {	document.getElementById("demo").innerHTML= inpObj.validationMessage;
	}else {
		document.getElementById("demo").innerHTML="输入有效";
	}
}
</script>
</body>
</html>

在这里插入图片描述

约束验证 DOM属性

在这里插入图片描述

合法性属性：

input 元素的 validity 属性包含了与数据合法性相关的一系列属性：
在这里插入图片描述

rangeOverflow属性：

实例：
如果输入字段总的数字大于100 （input 元素的max属性），则显示一条消息

<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>

<p id="demo"></p>

<script>
function myFunction() {
    var txt = "";
    if (document.getElementById("id1").validity.rangeOverflow) {
        txt = "值太大";
    }
     document.getElementById("demo").innerHTML = txt;
}
</script>

rangeUnderflow属性：

实例：
如果输入字段总的数字小于100 （input 元素的min属性），则显示一条消息

<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>

<p id="demo"></p>

<script>
function myFunction() {
     var txt = "";
    if (document.getElementById("id1").validity.rangeUnderflow) {
        txt = "值太小";
    }
     document.getElementById("demo").innerHTML = txt;
}
</script>

望望byte

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS 表单

文章目录JS 表单验证HTML表单实例JS实例JS能够验证数字输入自动HTML表单验证数据验证HTMl 约束验证（HTML5新引入）约束验证HTML输入属性约束验证 CSS伪选择器JS 验证API约束验证DOM方法checkValidity（）方法约束验证 DOM属性合法性属性：rangeOverflow属性：rangeUnderflow属性：JS 表单验证HTML 表单验证能够通过 JS 来完成如果某个表单字段（fname）是空的，那么该函数会发出一条警告消息，并返回 false，以防止表单被提交
复制链接

扫一扫