JS函数验证总结(方便js客户端输入验证)

2023年6月11日上午6:51 • JavaScript

JS函数验证是用JavaScript编写的表单客户端输入验证，目的是方便用户输入验证，减少对服务器沟通请求，缩短请求响应时间和提高用户体验。下面是JS函数验证的完整攻略：

1.概述

JS函数验证是对用户的输入数据预先验证，验证的方式可以使用JS正则表达式、API等方式，可以在用户提交表单到服务器之前，即在本地网页浏览器中对数据进行验证。这样可以减少不必要的请求或降低恶意提交的数据，提升服务器的性能。

2.验证方式

常见的JS函数验证方式有以下几种：

2.1 正则表达式验证

常见的正则表达式验证方式包括数字验证、邮箱验证、手机号验证、身份证验证、IP地址验证等。

// 验证输入是否为正整数
function isPositiveInteger(input) {
  var reg = /^[1-9]\d*$/;
  return reg.test(input);
}

2.2 API验证

除了使用正则表达式外，也可以使用JS提供的API进行验证。例如，使用isNaN()函数可以验证是否为数字，使用Date.parse()函数可以验证是否为日期等。

// 验证是否为数字
function isNumber(input) {
  return !isNaN(input);
}

// 验证是否为日期格式，例如"2019-10-01"
function isDate(input) {
  return !isNaN(Date.parse(input));
}

2.3 自定义验证

除了使用正则表达式和API外，还可以自定义验证函数来满足特定的验证需求。例如，从数据库中获取列表，在客户端验证输入是否存在，或验证输入是否符合条件等。

// 自定义验证用户名是否已存在
function isUsernameExist(input) {
  var userList = ['user1', 'user2', 'user3'];
  return userList.indexOf(input) !== -1;
}

3.应用场景

JS函数验证适用于表单输入验证、登录验证、数据提交验证等场景。下面是常见的表单输入验证示例。

3.1 输入框不能为空

<input type="text" id="input" placeholder="请输入内容" onblur="checkEmpty()">

<script>
// 验证输入框不能为空
function checkEmpty() {
  var input = document.getElementById("input");
  if (input.value === "") {
    alert("输入框不能为空！");
  }
}
</script>

3.2 输入内容长度限制

<textarea id="content" onkeyup="checkLength()"></textarea>
<div id="info"></div>

<script>
// 验证输入内容长度限制
function checkLength() {
  var content = document.getElementById("content");
  var info = document.getElementById("info");
  var max = 100;
  if (content.value.length > max) {
    info.innerHTML = "已输入超过"+ max +"个字符！";
  } else {
    info.innerHTML = "还可以输入"+ (max - content.value.length) +"个字符！";
  }
}
</script>