用js写一个标单验证 条件如下2)添加正则验证：用户名称只能包含数字、字母、下划线，且不能以数字开头，长度在6-20位之间；手机号11位纯数字，只能为1开头， 3)输入框中要有默认提示文字(不允许使用placeholder属性) 4)数据在输入框失去焦点时进行验证 5)错误提示信息使用弹出层显示，2s后自动消失 6)给登录框加上滑动验证，过程如 图2 所示，滑动到 图3 时，验证通过

好的，这里是一个简单的前端表单验证的例子，包含您所提到的所有条件：

HTML代码：

<div class="container">
  <h2>登录</h2>
  <form id="loginForm">
    <div>
      <label for="username">用户名:</label>
      <input type="text" id="username" name="username" data-validate="username" data-message="用户名只能包含数字、字母、下划线，且不能以数字开头，长度在6-20位之间" />
    </div>
    <div>
      <label for="phone">手机号:</label>
      <input type="text" id="phone" name="phone" data-validate="phone" data-message="手机号必须为11位纯数字，且以1开头" />
    </div>
    <div>
      <label for="password">密码:</label>
      <input type="password" id="password" name="password" data-validate="required" data-message="密码不能为空" />
    </div>
    <button type="submit">登录</button>
  </form>
</div>

<!-- 弹出层 -->
<div id="alertBox"></div>

JS代码：

// 验证规则
const rules = {
  username: /^[a-zA-Z_]\w{5,19}$/,
  phone: /^1\d{10}$/,
  required: /.+/,
};

// 默认提示文字
const defaultMessages = {
  username: '请输入6-20位字母、数字或下划线，不能以数字开头',
  phone: '请输入11位手机号，以1开头',
  required: '该字段不能为空',
};

// 获取表单元素
const form = document.getElementById('loginForm');
const username = form.elements.username;
const phone = form.elements.phone;
const password = form.elements.password;

// 给表单元素添加默认提示文字
username.value = defaultMessages.username;
phone.value = defaultMessages.phone;
password.value = '';

// 添加失去焦点事件
username.addEventListener('blur', validate);
phone.addEventListener('blur', validate);
password.addEventListener('blur', validate);

// 表单提交事件
form.addEventListener('submit', function(event) {
  event.preventDefault();
  if (validate()) {
    alert('表单验证通过');
  }
});

// 表单验证函数
function validate() {
  let isValid = true;
  const messages = [];

  // 遍历表单元素
  for (let i = 0; i < form.elements.length; i++) {
    const element = form.elements[i];

    // 如果元素需要验证
    if (element.dataset.validate) {
      const ruleName = element.dataset.validate;
      const rule = rules[ruleName];
      const value = element.value.trim();

      // 如果元素为空
      if (!value) {
        isValid = false;
        messages.push(defaultMessages.required);
      }
      // 如果元素不为空，但是不符合规则
      else if (rule && !rule.test(value)) {
        isValid = false;
        messages.push(element.dataset.message || defaultMessages[ruleName]);
      }
    }
  }

  // 如果表单验证不通过
  if (!isValid) {
    // 弹出错误提示框
    const alertBox = document.getElementById('alertBox');
    alertBox.innerHTML = messages.join('<br>');
    alertBox.style.display = 'block';
    setTimeout(function() {
      alertBox.style.display = 'none';
    }, 2000);
  }

  return isValid;
}

关于滑动验证，这里提供一个简单的实现思路：

HTML代码：

<div class="container">
  <h2>登录</h2>
  <form id="loginForm">
    <!-- 省略其他表单元素 -->
    <div id="sliderContainer">
      <div id="sliderTrack">
        <div id="sliderThumb"></div>
      </div>
      <div id="sliderLabel">请按住滑块，拖动完成验证</div>
    </div>
    <button type="submit">登录</button>
  </form>
</div>

<!-- 弹出层 -->
<div id="alertBox"></div>

CSS代码：

#sliderContainer {
  position: relative;
  width: 300px;
  height: 40px;
  background-color: #f0f0f0;
  margin: 20px auto;
}

#sliderTrack {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 40px;
  background-color: #ccc;
  cursor: pointer;
}

#sliderThumb {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  background-color: #aaa;
  border-radius: 50%;
  cursor: pointer;
}

#sliderLabel {
  position: absolute;
  left: 0;
  top: 50px;
  text-align: center;
  color: #999;
}

JS代码：

// 获取滑块元素
const sliderContainer = document.getElementById('sliderContainer');
const sliderTrack = document.getElementById('sliderTrack');
const sliderThumb = document.getElementById('sliderThumb');
const sliderLabel = document.getElementById('sliderLabel');

// 拖动状态
let isDragging = false;

// 拖动事件
sliderThumb.addEventListener('mousedown', function(event) {
  isDragging = true;
});

// 松开事件
document.addEventListener('mouseup', function(event) {
  if (isDragging) {
    isDragging = false;
    // 如果滑块到达终点，验证通过
    if (parseInt(sliderThumb.style.left) === 260) {
      sliderContainer.classList.add('validated');
    }
    // 否则重置滑块位置
    else {
      sliderThumb.style.left = '0';
      sliderTrack.style.width = '0';
    }
  }
});

// 拖动过程中的事件
document.addEventListener('mousemove', function(event) {
  if (isDragging) {
    // 计算滑块位置
    const x = event.clientX - sliderContainer.getBoundingClientRect().left - 20;
    if (x >= 0 && x <= 260) {
      sliderThumb.style.left = x + 'px';
      sliderTrack.style.width = x + '40px';
    }
  }
});

这个例子中，通过给滑块添加mousedown、mouseup、mousemove事件，实现了拖动滑块的功能，并且通过判断滑块位置是否到达终点，来判断是否通过验证。同时，通过添加validated类来修改样式，提示用户验证通过。