JS学习(三)JavaScript表单验证之约束验证 HTML 输入属性+表单验证API

最新推荐文章于 2024-05-17 13:52:13 发布

masiro_zhao

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量768

点赞数

分类专栏： JavaScript 文章标签： javascript js html

本文链接：https://blog.csdn.net/weixin_44024159/article/details/103850312

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一般情况下，我们做表单验证分为两种：

发送到后端，让后端程序进行验证
前端进行验证

今天主要涉及的是前端验证的一些小技巧。通常，我们会直接写函数，设置约束条件，规定输入值的类型，大小等等，不符合要求就弹出错误提示信息。
写一个例子，验证输入的值是否为大于100且小于300的值，当然，以下代码的限制条件不完整，仅仅作为例子进行展示，如下：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <p>请输入大于100且小于300的数字</p>
    <input id="id1" type="text" name="" value=""><button type="button" name="button" onClick="myFunction()">提交</button>
    <p id="p1"></p>
    <script type="text/javascript">
      function myFunction(){
        var val = document.getElementById('id1').value;
        if(val == ''){ //若输入的值为空
          document.getElementById("p1").innerHTML = '请输入数字';
          return;
        }
        if(val < 100 || val > 300){ //若输入的值大于300或小于100
          document.getElementById("p1").innerHTML = '输入错误';
          return;
        }else{
          document.getElementById("p1").innerHTML = '输入正确';
          return;
        }
      }
    </script>
  </body>
</html>

我们会发现我们需要设置很多限制条件去验证输入框内容的类型，值的大小，等等，还需要设置弹出来的错误信息，很麻烦，但其实JS结合HTML的属性约束提供了更方便的方法来做这件事。

HTML属性约束

首先我们要知道约束验证 HTML 输入属性，如下：

min：输入框内的最小值
max：输入框的最大值
pattern：正则表达式，以验证输入的内容是否符合要求
disabled：该输入框是否可用
required：是否为必输项
type：输入框输入值的类型

格式：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <p>输入大于100且小于300的数字</p>
    <input type="number" min="100" max="300" required>
  </body>
</html>

以上代码规定了，该输入框输入值类型为数字，最小值100，最大值300，必输。

JS对HTML进行表单验证的API

JS对html的input提供了两种方法，方便进行表单验证：

input.checkValidity()：在html的input元素中设定好约束之后，在js中，通过document.getElementById(‘xxxx’).checkValidity()，使用约束条件对输入内容进行验证
input.validationMessage：通过document.getElementById(‘xxxx’).validationMessage直接调用，会自动根据html的写好的约束条件弹出对应的提示信息。

我们直接来看一下怎么使用，代码如下：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <p>输入大于100且小于300的数字</p>
    <input id='input1' type="number" name="" value="" min="100" max="300" required><button type="button" name="button" onclick="myFunction()">提交</button>
    <p id='message'></p>
    <script type="text/javascript">
      function myFunction(){
        if (document.getElementById('input1').checkValidity() == false){
          document.getElementById('message').innerHTML = document.getElementById('input1').validationMessage;
        }else{
          document.getElementById('message').innerHTML = '输入正确';
        }
      }
    </script>
  </body>
</html>

masiro_zhao

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS学习(三)JavaScript表单验证之约束验证 HTML 输入属性+表单验证API

一般情况下，我们做表单验证分为两种：发送到后端，让后端程序进行验证前端进行验证今天主要涉及的是前端验证的一些小技巧。通常，我们会直接写函数，设置约束条件，规定输入值的类型，大小等等，不符合要求就弹出错误提示信息。写一个例子，验证输入的值是否为大于100且小于300的值，当然，以下代码的限制条件不完整，仅仅作为例子进行展示，如下：<!DOCTYPE html><ht...
复制链接

扫一扫