如何防止用户在文本框中的开头输入空格?

时间:2010-05-11 09:06:29

标签: javascript validation

我有一个包含三个字段的表单姓名,电子邮件地址&密码。现在我想阻止用户在值的开头输入空格“”,假设用户不能只输入字段中的空格。

我试着像这样修理它:

<script type="text/javascript">
function validate(){

if ((document.getElementById('fName').value) == '') {
    alert('Please enter your first name');
    return (false);
} else if ((document.getElementById('lName').value) == '') {
    alert('Please enter your last name');
    return (false);
} else {
    return (true);
}
}
</script>
<form name="form1" id="form1" action="index.php" method="post">
<table align="right" border="0">
<tr>
<td>First Name:</td>
<td><input id="fName" name="fName" type="text" class="input-login"/></td>
</tr>
<tr><td>Email Address:</td></tr>
<tr><td><input id="email" name="email" type="text" class="input-login"/></td></tr>
<tr><td>Password:</td></tr>
<tr><td><input id="password" name="password" type="password" class="input-login"/>/td></tr>
<tr><td align="center"><a href="#">Forgot password</a></td></tr>
<tr>
<td align="center"><input name="login" id="login" type="submit" value="Login" > &nbsp;
<input name="signup" id="signup" type="submit" value="SignUp" ></td>
</tr>
</table>
</form>

但未能解决。

任何人都可以帮助我.. 感谢。

3 个答案:

答案 0 :(得分:1)

由于您使用jquery-validate标记了问题。这里的答案如何使用jquery:

有关更多信息,请查看:http://docs.jquery.com/Plugins/Validation

<script type="text/javascript">
  $.validator.addMethod("NoWhiteSpaceAtBeginn", function(value, element) {
    return this.optional(element) || /^[^\t].*/.test(value);
  }, "Must not begin with a whitespace");
  $(document).ready(function(){
    $("#form1").validate();
  });
</script>

/^[^\t].*/检查字符串是否以空格开头,如果要排除所有空格,请使用/^[^\s].*/。 现在,将requiredNoWhiteSpaceAtBeginn作为类名添加到您要验证的字段中。

<form name="form1" id="form1" action="index.php" method="post">
  <table align="right" border="0">
    <tr>
      <td>First Name:</td>
      <td><input id="fName" name="fName" type="text" class="input-login required NoWhiteSpaceAtBeginn"/></td>
    </tr>
    <tr><td>Email Address:</td></tr>
    <tr><td><input id="email" name="email" type="text" class="input-login required NoWhiteSpaceAtBeginn email"/></td></tr>
    <tr><td>Password:</td></tr>
    <tr><td><input id="password" name="password" type="password" class="input-login"/>/td></tr>
    <tr><td align="center"><a href="#">Forgot password</a></td></tr>
    <tr>
      <td align="center"><input name="login" id="login" type="submit" value="Login" >&nbsp;<input name="signup" id="signup" type="submit" value="SignUp" ></td>
    </tr>
  </table>
</form>

可在此处找到一个好的教程:http://corpocrat.com/2009/07/15/quick-easy-form-validation-tutorial-with-jquery/

答案 1 :(得分:0)

尝试匹配空格(\ s):

  

(document.getElementById('fName')。value.match(/ ^ [\ s] /))

在您的代码中:

  

if((document.getElementById('fName')。value)=='') || (document.getElementById('fName')。value.match(/ ^ [\ s] /)) {       警报('请输入你的名字');       返回(假);   } else if((document.getElementById('lName')。value)==''){       警报('请输入你的姓氏');       返回(假);   }

这样,您的字段值不能以空格开头。

答案 2 :(得分:0)

通常做的是“修剪”弦乐。不幸的是,JS没有原生修剪实现,但可以轻松编写(在网上搜索备选方案):

var name = document.getElementById('fName').value.replace(/^\s+|\s+$/g, "");
if (name === "") { 
   ...

请记住,您需要修剪并重新验证服务器端的所有内容!永远不要相信纯粹的客户端验证。