请看下面的攻略。

JS实现表单验证功能(验证手机号是否存在，验证码倒计时)

概述

表单验证是Web开发中非常常见的操作，通常的表单验证方式是利用前后端的交互获取数据进行验证，但是这种方式需要进行网络请求，不仅影响用户体验，也增加了服务器的负担。而JS实现表单验证则可以在不进行网络请求的情况下，对用户输入的数据进行实时验证，从而提高用户体验以及减轻服务器压力。

本篇攻略主要介绍JS实现表单验证功能的方式，并以验证手机号是否存在、验证码倒计时为例进行说明。

验证手机号是否存在

前置条件

• HTML页面里需要包含一个手机号输入框及一个验证按钮。

<input type="text" id="tel" placeholder="请输入手机号码"/>
<button id="verBtn">获取验证码</button>

实现步骤

1. 定义手机号输入框和验证按钮的DOM对象，并获取对应的值。

var tel = document.getElementById('tel').value;
var verBtn = document.getElementById('verBtn');

1. 监听按钮的点击事件，当点击按钮时获取用户输入的手机号，并向后台发起请求判断是否存在该手机号。

verBtn.addEventListener('click', function() {
    var tel = document.getElementById('tel').value;
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var result = this.responseText;
            if(result === 'success') {
              //手机号可用
            } else if(result === 'fail') {
              //手机号已存在
            }
        }
    };
    xmlhttp.open('GET', '/checkTel?tel=' + tel, true);
    xmlhttp.send();
});

1. 后台接口收到请求后判断手机号是否存在，并将结果返回给前台。

if(tel) {
    // 从数据库里查询是否存在该手机号
    if(tel已存在) {
      response.send('fail');
    }else {
      response.send('success');
    }
}else {
    response.send('fail');
}

1. 根据返回的结果对页面做出相应的操作，例如提示用户已存在的手机号等。

以上是验证手机号是否存在的实现步骤，在实际开发中可能需要根据具体需求进行一些调整。

验证码倒计时

前置条件

• HTML页面里需要包含一个手机号输入框、一个验证码输入框和一个验证按钮。

<input type="text" id="tel" placeholder="请输入手机号码"/>
<input type="text" id="code" placeholder="请输入验证码"/>
<button id="verBtn">获取验证码</button>

实现步骤

1. 定义倒计时时间及计时器对象。

var wait = 60; //倒计时时间
var timer; //计时器对象

1. 监听验证按钮的点击事件，在点击按钮时开始倒计时，同时向后台发送请求获取验证码，将按钮禁用。

verBtn.onclick = function() {
  var tel = document.getElementById('tel').value;
  timer = setInterval(function() {
    if(wait == 0) {
      clearInterval(timer);
      verBtn.innerHTML = '获取验证码';
      wait = 60;
    } else {
      wait--;
      verBtn.innerHTML = '重新发送(' + wait + '秒)';
    }
  }, 1000);

  //向后台发起请求获取验证码
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var code = this.responseText;
      alert('验证码已发送到您的手机，请查收！');
    }
  };
  xmlhttp.open('GET', '/sendCode?tel=' + tel, true);
  xmlhttp.send();

  //禁用按钮
  verBtn.disabled = true;
};

1. 后台接收到请求后生成验证码，并将其返回给前台。

var code = 生成验证码;
response.send(code);

1. 用户输入完验证码并点击验证按钮后，将用户输入的手机号和验证码发送给后台进行验证，并在验证成功后进行一些相应操作，例如跳转到下一个页面等。

以上是验证码倒计时的实现步骤，在实际开发中可能需要根据具体需求进行一些调整。

总结

以上是JS实现表单验证功能(验证手机号是否存在，验证码倒计时)的完整攻略。本攻略只是指导如何实现基本的表单验证功能，实际开发中需要根据具体需求进行一些调整和优化。