JS 验证input内容框 Demo(复制可测试)

 // (使用element验证时不要同时使用onkeyup)
  <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>js验证输入框内容</title>
</head>
<style>
  body {
    padding: 50px;
  }
  p{
    padding: 10px;
  }
</style>

<body>
  <h1>js验证输入框内容</h1>
  <p>
    只能输入英文:
    <input type="text" onkeyup="value=value.replace(/[^a-zA-Z]/g,'')">
  </p>
  <p>
    只能输入英文(禁止粘贴,右键不会弹出粘贴菜单)
    <input type="text" onkeyup="value=value.replace(/[^a-zA-]/g,'')" onpaste="return false"
      oncontextmenu="return false" />
  </p>
  <p>
    只能输入数字:(正整数)
    <input onkeyup="this.value=this.value.replace(/D/g,'')" onafterpaste="this.value=this.value.replace(/D/g,'')">
  </p>
  <p>
    只能输入数字,小数点:(正整数、正浮点数)
    <input name="price" type="text" onkeyup="value=value.replace(/[^d.]/g,'')">
  </p>
  <p>
    只能输入数字,小数点,下划线:(正整数、正浮点数、英文下划线)
    <input name="price" type="text" onkeyup="value=value.replace(/[^d._]/g,'')">
  </p>
  <p>
    只能输入英文和数字:
    <input onkeyup="value=value.replace(/[W]/g,'') "
      onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^d]/g,''))">
  </p>
  <p>
    只能输入汉字:
    <input onkeyup="value=value.replace(/[^u4E00-u9FA5]/g,'')"
      onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^u4E00-u9FA5]/g,''))">
  </p>
  <p>
    只能输入中文、英文、数字、@符号和.符号:
    <input type="text" onkeyup="value=value.replace(/[^a-zA-0-9u4E00-u9FA5@.]/g,'')">
  </p>
  <p>
    不能为空:
    <input onblur="if(this.value.replace(/^ +| +$/g,'')=='')alert('不能为空!')">
  </p>
  <p>
    禁止输入法输入:(感觉没什么用)
    <input type="text" style="ime-mode: disabled">
  </p>
</body>

</html>


原文地址:https://www.cnblogs.com/wwj007/p/14317812.html