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)在

相关阅读:
ThreeJS-3D教学八-OBJLoader模型加载+动画
[附源码]计算机毕业设计springboot-Steam游戏平台系统论文
职场小技巧分享，想要成为受欢迎的人快来
绑定点击事件及解绑点击事件
代码随想录30——回溯：332重新安排行程、51N皇后、37解数独
Mac的Safari浏览器如何打开检查元素【网页控制台】
[EFI]戴尔Latitude 5310电脑 Hackintosh 黑苹果efi引导文件
docker使用笔记
GPT，GPT-2，GPT-3，InstructGPT的进化之路
内置式永磁同步电机复矢量电流调节器设计

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