在输入字段中仅允许用户输入文本

时间:2014-11-24 08:45:59

标签: javascript html

我需要一个验证器,只允许用户输入text number@

当用户类型不是这些章程时#, $, % ,^ , &, *, (, 这些章程不应该输入输入字段是否有任何方法可以阻止输入字段内的允许包机

3 个答案:

答案 0 :(得分:9)

你可能正在寻找正则表达式。 尝试在下面的regexp上的keyUp事件上测试字符串:

^[a-zA-Z0-9@]+$

<强> CODE:

// This will be triggered everytime a user types anything
// in the input field with id as input-field
$("#input-field").keyup(function(e) {
  // Our regex
  // a-z => allow all lowercase alphabets
  // A-Z => allow all uppercase alphabets
  // 0-9 => allow all numbers
  // @ => allow @ symbol
  var regex = /^[a-zA-Z0-9@]+$/;
  // This is will test the value against the regex
  // Will return True if regex satisfied
  if (regex.test(this.value) !== true)
  //alert if not true
  //alert("Invalid Input");

  // You can replace the invalid characters by:
    this.value = this.value.replace(/[^a-zA-Z0-9@]+/, '');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input-field" />

<强>更新

没有jquery:

function validate() {
  var element = document.getElementById('input-field');
  element.value = element.value.replace(/[^a-zA-Z0-9@]+/, '');
};
<input type="text" id="input-field" onkeyup="validate();" />

答案 1 :(得分:1)

您可以尝试使用RegEx

$(function() {//<-- wrapped here
  $('.restrict').on('input', function() {
    this.value = this.value.replace(/[^a-zA-Z0-9@]/g, ''); //<-- replace all other than given set of values
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' class='restrict'>

修改

使用纯粹的js

var restrict = function(tb) {
  tb.value = tb.value.replace(/[^a-zA-Z0-9@]/g, '');
};
<input type='text' onpaste="restrict(this);" onkeypress="restrict(this);" onkeyup="restrict(this);">
<input type='text' onpaste="restrict(this);" onkeypress="restrict(this);" onkeyup="restrict(this);">

答案 2 :(得分:0)

尝试下面的javascript验证代码 -

function validate(inputtxt)
{
 var letterNumber = /^[0-9a-zA-Z@]+$/;
 if((inputtxt.value.match(letterNumber)) 
  {
   return true;
  }
else
  { 
   alert("message"); 
   return false; 
  }
  }

并尝试将此行放在您的html代码中,替换您的表单或输入字段的名称 -

<input type="submit" name="submit" value="Submit" onclick="validate(document.form.text)" />