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

How to check form input in html form control

本文关键字：表单 检查 检查表 输入 控制 html      更新时间：2023-09-26

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

请帮帮我。

如果有人能给我做个演示，我会很感激的。

提前感谢!

对于示例中给出的简单任务，有一个可能的方法:

<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驱动的检查。

您可能希望以一种比alert()

更少干扰的方式显示错误消息
<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>

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

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

<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>

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

相关文章：