导航：首页 > 开发技术 >

JS中表单提交验证的示例分析

发表于：2026-10-31 作者：千家信息网编辑

千家信息网最后更新 2026年10月31日，这篇文章将为大家详细讲解有关JS中表单提交验证的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。在进行表单提交时，需要对输入框和文本域等的value的合理性进

千家信息网最后更新 2026年10月31日JS中表单提交验证的示例分析

这篇文章将为大家详细讲解有关JS中表单提交验证的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

在进行表单提交时，需要对输入框和文本域等的value的合理性进行验证，可以编写form的onSubmit事件，代码，踩过的坑；注意点：

1、只有通过form里面的进行表单的提交才会触发form的onSubmit事件，如果是通过button的onclick事件进行表单提交则不会触发form的onSubmit事件

2、 onSubmit事件的正确写法是：

注意写上 return ，不写没有作用

function checkFrom(){  var username=$('#username').val();  alert(username);  var pwd=$('#pwd').val();  if(username==null || username==""){    $('#codeInfo').html("请输入用户名");    $('#username').focus();    return false;  }else if(pwd==null || pwd==""){    $('#codeInfo').html("请输入密码");    $('#pwd').focus();    return false;  }else{    return true;  }}

3、HTML5，input 提供很多新型的type，省去了我们写JavaScript正则表达式来限定输入值的类型的时间，比如，number，email，tel等等，表示需要输入合法的数字，邮箱，电话号码等。但是我发现将type设置为number之后，让它只接受数字的输入，会出现两个三角形，用于调整数字的大小（加1减1），

很明显，有些场合我们不需要它们，影响美观度，可利用以下方法将其去掉

4、验证码是常常见到的小部件，获取验证码，点击刷新，应传递一个参数避免多次获取同一个验证码，这时候常常考虑时间戳或者随机数，此处采用随机数

                code/verifyCode?d='+Math.random();">

5、来个综合的代码吧

form表单部分：

  
  Enter Details to Login
  
            
            
                    
        
                       Remember me              Forget  password ?