美文网首页软件工程师成长日记JavaScript 进阶营
js校验表单后提交表单的三种方法总结

js校验表单后提交表单的三种方法总结

作者: 麦克劳林 | 来源:发表于2017-06-19 10:33 被阅读74次

本篇文章主要是对js校验表单后提交表单的三种方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助。

第一种:

代码如下:

 <script type="text/javascript">
     function check(form) {
      if(form.userId.value=='') {
            alert("请输入用户帐号!");
            form.userId.focus();
            return false;
       }
   if(form.password.value==''){
            alert("请输入登录密码!");
            form.password.focus();
            return false;
     }
     return true;
     }
</script>
<form action="login.do?act=login" method="post">
用户帐号
  <input type=text name="userId" size="18" value="" >
<br>
 登录密码      
<input type="password" name="password" size="19" value=""/>      
<input type=submit name="submit1" value="登陆" onclick="return check(this.form)"> 
</form>   

第二种:

代码如下:

<script type="text/javascript">
     function check(form) {
      if(form.userId.value=='') {
            alert("请输入用户帐号!");
            form.userId.focus();
            return false;
       }
   if(form.password.value==''){
            alert("请输入登录密码!");
            form.password.focus();
            return false;
     }
     return true;
     }
</script>
<form action="login.do?act=login" method="post" onsubmit="return check(this)">
用户帐号
<input type=text name="userId" size="18" value="" >
<br>
 登录密码      
<input type="password" name="password" size="19" value=""/>      
 <input type=submit name="submit1" value="登陆"> 
</form>  

第三种:

代码如下:

<script type="text/javascript">
     function check(form) {
      if(form.userId.value=='') {
            alert("请输入用户帐号!");
            form.userId.focus();
            return false;
       }
   if(form.password.value==''){
            alert("请输入登录密码!");
            form.password.focus();
            return false;
     }

      document.myform.submit();
}
</script>
<form action="login.do?act=login" name="myform" method="post">
用户帐号
<input type=text name="userId" size="18" value="" >
<br>
 登录密码      
<input type="password" name="password" size="19" value=""/>      
<input type=button name="submit1" value="登陆" onclick="check(this.form)"> 
</form> 

相关文章

  • js校验表单后提交表单的三种方法总结

    本篇文章主要是对js校验表单后提交表单的三种方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助。 第...

  • form表单中只有一个input时,按回车键后表单自动提交(fo

    按钮绑定回车事件后按回车表单执行js方法后表单自动提交刷新,先执行了js的方法后自动提交表单,使它相当于没有执行j...

  • elementui中表单进不去validate方法

    下午写了表单验证方法后,点击提交按钮,其对应函数无法进入函数体,找了很久错误,后来发现 原因是在自定义表单校验方法...

  • 表单

    表单基础 提交表单 Tips: 解决重复提交表单的问题的两个方法1)在第一次提交表单后就禁用提交按钮2)利用ons...

  • WTForms 字段 参数 校验

    常用字段 常用参数 常用校验 文件上传 表单提交属性 表单处理流程

  • 13、element-ui中表单验证函数的封装

    // 表单验证 validatForm () { // 校验表单的方法 let validat t...

  • Javascript-表单脚本

    一、表单的基础知识 1、表单提交 普通提交 以编程方式调用submit()方法提交表单 解决表单重复提交的办法:1...

  • form表单

    form标签属性 action: 表单提交的地址 method:提交表单的方法提交表单的方法有两种:post和ge...

  • 表单

    表单: form 元素创建表单 常用属性: action:提交表单的地址 method:提交表单使用的方法,一般有...

  • Js表单提交

    1、表单提交 表单提交是刚开始学js的朋友很迷惑的一个问题,怎么提交,怎么阻止默认提交,怎么提交表单不跳转等等问题...

网友评论

    本文标题:js校验表单后提交表单的三种方法总结

    本文链接:https://www.haomeiwen.com/subject/vvlgqxtx.html