HTML5新增的客户端校验

1.使用校验属性执行校验

HTML5新增了表单的校验属性,如required、pattern等。

required:定义表单不能为空。属性值是required或者省略.
pattern:定义表单满足正则表单式

1.required属性

required属性用于不能为空。属性值是required或者省略.

代码如下：


  <form action="#">
        <input type="text" required>
        <input type="submit" value="提交">
    form>

当单击”提交“按钮时，会出现如下结果：

2.pattern属性

pattern属性定义表单满足相应的正则表达式。

代码如下：


<form action="#">
        手机号码: <input type="text" title="请输入11位有效的手机号" pattern="1[0-9]{10}" required>
        <input type="submit" value="提交">
    form>

运行结果：

2.自定义错误提示

在HTML5中，可以使用setCustomValidity()方法自定义错误提示信息，在提交表单时，就会看到弹出的提示框中包含自定义错误信息。

代码实现：


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titletitle>
    <script>
        function verify (input){
            if(input.value.length<15){
                input.setCustomValidity("感想不得少于15个字");
            }else{
                input.setCustomValidity("");
            }
        }
    script>
head>
<body>
    <form action="#">
        <input type="text" onchange="verify (this)">
        <input type="submit" value="提交">
    form>
body>
html>

运行结果：

3.关闭校验

如果需要关闭HTML5表单提供的校验功能，有以下两种方法来实现。

(1)在

相关阅读:
记录：Unity脚本的编写5.0
Crossover2022最新版虚拟机Mac和Linux系统兼容软件
SAP FI 项目号系统状态CRTD是活动的 BS013
java-php-net-python-个人理财管理系统答辩PPT计算机毕业设计程序
保护互联网数据安全：关键方法与最佳实践
Android 架构MVI、MVVM、MVC、MVP
深度学习神经网络协同过滤模型(NCF)与用户协同过滤(UCF)的区别
学习笔记2--高精度地图定义及价值
【408数据结构与算法】—队列的顺序表示和实现（十三）
【JavaSE】String类型

原文地址：https://blog.csdn.net/gjbss/article/details/128020661