Question

我有一个包含表单的html文件。有许多文本输入控件需要客户输入信息。如何检查客户的输入是否正确？例如，我想检查用户名是否只包含数字，字母和'_'。

请帮帮我。

如果有人能为我提供演示，我会很感激。

提前致谢！

Answer 1

这是一种可能的方法，对于一个简单的任务，例如给出的例子：

<script>
function check(elem) {
  if(elem.value.match('^' + elem.getAttribute('pattern') + '$')) {
    return true;
  } else {
    alert(elem.getAttribute('data-msg'));
    return false;
  }
}
</script>
<input name=username pattern=[a-zA-z0-9_]{1,9} onblur=check(this)
  data-msg="The user name may only contain letters A–Z, digits, and underlines and must be 1 to 9 characters.">

这里的想法是从HTML5模式属性开始，将允许的数据模式指定为正则表达式。它已经可以在几个现代浏览器上运行，并且当它没有时没有任何伤害。然后添加一个事件属性，该属性使用从相同属性中获取的正则表达式（使用添加的前缀和后缀字符，以便对整个输入项进行检查），从而进行JavaScript驱动的检查。

您可能希望以比破坏警报（）

更少破坏性的方式显示错误消息

Answer 2

<input type="text" id="username" />
<span id="invalidMessage" style="display:none; color:Red"><img src="../../Images/error.gif" alt="OK" />invalidEmail。</span>

<script type="text/javascript">
       $(document).ready(function() {
          $('#username').blur(function() {
            $('#invalidMessage').hide();
              if ($('#username').val() != "") {
                var email = /_*\w+(-?\w+)*@_*\w+(-?\w+)*(._*\w+(-?\w+)*)*.\w*/;
                if (!email.test($('#username').val())) {
                    $('#invalidMessage').show();
                 }
              }
          });         
    });
</script>

有一个演示，希望可以帮到你。

Answer 3

我会在客户端使用这样的东西;

<script type="text/javascript">
<!--

function validate_form ( )
{
    valid = true;

if ( document.contact_form.contact_name.value == "" )
  {
    alert ( "Please fill in the 'Your Name' box." );
    valid = false;
  }

    return valid;
}

//-->
</script>

然后，我会在服务器端使用更强大的错误检查，以确保您拥有有效的数据。如果您可以在客户端捕获错误的数据，那么它是一个加号，因为它避免了服务器上的命中，但验证确实属于服务器端的数据，因为它更安全并且可以被其他表单重用。

如何在html表单控件中检查表单输入

3 个答案: