欢迎回家
我们一直在改变

JavaScript 表单 JS表单

JavaScript 表单验证

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

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

JavaScript 实例

function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == "") {
        alert("必须填写姓名");
        return false;
    }
}

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

HTML 表单实例

<form name="myForm" action="/action_page_post.php" onsubmit="return validateForm()" method="post">
姓名:<input type="text" name="fname">
<input type="submit" value="Submit">
</form>

JavaScript 能够验证数字输入

JavaScript 常用于验证数字输入:

请输入 1 到 10 之间的数字:提交 

自动 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 引入了一种新的 HTML 验证概念,名为约束验证(constraint validation)

HTML 约束验证基于:

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

约束验证 HTML 输入属性

属性描述
disabled规定 input 元素应该被禁用
max规定 input 元素的最大值
min规定 input 元素的最小值
pattern规定 input 元素的值模式
required规定输入字段需要某个元素
type规定 input 元素的类型

约束验证 CSS 伪选择器

选择器描述
:disabled选择设置了 “disabled” 属性的 input 元素。
:invalid选择带有无效值的 input 元素。
:optional选择未设置 “required” 属性的 input 元素。
:required选择设置了 “required” 属性的 input 元素。
:valid选择带有有效值的 input 元素。

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

赞(0)
未经允许不得转载:91coding » JavaScript 表单
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

立即登录   注册

91CODING 小白轻松上手,大牛稳健进步

关于我们免责声明