JavaScript表单约束验证

这是我参与8月更文挑战的第30天，活动详情查看：8月更文挑战

我们在采集用户输入内容的时候肯定是需要判断用户输入的内容是否为我们需要的内容，js中有很多Api可以辅助我们来约束用户输入正确内容。

required属性专门用于设置判断input，textarea，select元素内容是否为空，如果为空的话会自动提示内容。

代码语言：javascript复制

 <input type="text" value="" required>

注意，有些浏览器版本可能不支持这个属性，以下就是支持的浏览器版本。我把这个查询兼容链接放在这里吧，这个是每个前端人必须要知道的Can I use... Support tables for HTML5, CSS3, etc。

input元素在html5规范时候增加了email和url属性，这俩个都是浏览器提供的自定义验证。

email 验证邮箱

url 浏览器地址

代码语言：javascript复制

      <input type="email" value="" > <br>
      <input type="url" value="" /><br>
      <button type="submit">提交</button>

这个也有浏览器版本限制，大家可以用查询兼容的查看一下。

除了上面那俩个属性，还有：

"number"、"range"、"datetime"、"datetime-local"、"date"、"month"、"week" 和"time"。

并非所有主流浏览器都支持这些类型，因此使用时要当心。

以上这些都可以指定min(最小值)max(最大值),还有step(步长值)，如果只能输入0-100，3的倍数我们可以这样写

代码语言：javascript复制

 <input type="number" max="100" min="0" step="3">

pattern属性，这个属性用来指定一个正则表达式。用户输入的内容必须和正则匹配。

代码语言：javascript复制

<input type="text" pattern="[0-9]" > //设置数值0-9之间，并且只是一位数

我们写了一个很简单的正则：设置数值0-9之间，并且只是一位数，可以看图，我们输入内容不一致它也会提示。

使用checkValidity()方法可以检测表单中的内容是否有效，如果有效返回true，无效返回false。

代码语言：javascript复制

<input type="text" value="11" pattern="[0-9]" >

let inputs = document.querySelectorAll('input');
console.log(inputs[0].checkValidity())

novalidate属性，这个属性可以禁止对表单进行任何验证，怎么说呢，如果我们设置了很多表单，尤其是for循环出来的，其中又有不需要校验的，可以给他设置禁用验证属性。

感觉开发几乎用不到这个，这玩意容易被sql注入，还会引发其他危害。

以上的这些都是比较新的东西，虽然也不新，出来好长时间了。我们如果项目中需要兼容老版本浏览器的话还是尽量不要使用这些，容易出现兼容问题。

0 人点赞