Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >js校验表单后提交表单的三种方法总结

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

作者头像
麦克劳林
发布于 2018-09-11 08:51:24
发布于 2018-09-11 08:51:24
2.8K00
代码可运行
举报
运行总次数:0
代码可运行

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

第一种:

代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 <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>   
第二种:

代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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>  
第三种:

代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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> 
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017.06.19 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
简单的表单验证
<head> <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /> <title>表单验证</title> <script language=”javascript” src=”include/form.js”> </script> </head> <body><form action=”#” method=”post” name=”form” id=”form”> 姓&nbsp;&nbsp;&nbsp;&
苦咖啡
2018/05/07
2.3K0
web前端之锋利的jQuery八:jQuery插件的使用(表单验证、表单提交)
插件也称扩展,是一种遵循一定规范的应用程序接口编写出来的程序。 1.jQuery表单验证插件-Validation: 最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件-Validation,其拥有以下优点: 内置验证规则:拥有必填、数字、email、URL和信用卡号等19类内置验证规则。 自定义验证规则:可以很方便地自定义验证规则 简单强大的验证信息提示:默认了验证信息提示,并提供自定义覆盖默认提示信息的功能 实时
Java帮帮
2018/03/16
6.8K0
Struts2+DAO层实现实例01——搭建Struts2基本框架
实例内容   利用Strust2实现一个登陆+注册功能的登陆系统。   实现基础流程: 实现代码   JSP页面部分: <%-- 登陆页面 Created by IntelliJ IDEA
Rekent
2018/09/04
5440
Struts2+DAO层实现实例01——搭建Struts2基本框架
【Java框架型项目从入门到装逼】第六节 - 用ajax请求后台数据
这一节我们来说一下如何用ajax提交请求? 我们先不讲ajax的原理,还是先以实战为主,看一下这个东西到底怎么用的? form表单: <!-- 采用post表单提交 --> <form style="margin-left:200px;" id="myform" name="myform" method="post" onsubmit="return sumbitTest();" action="login.do"> <table>
剽悍一小兔
2018/05/17
8110
程序猿小明需要为公司员工的个人信息录入编写前端代码,html +css +js正则表达式 实现个人信息登录表
程序猿小明需要为公司员工的个人信息录入编写前端代码,效果如下图 需求:要保证信息录入格式正确无遗漏(输入有误要给到对应提示) 我写的代码如下 : 可以借鉴 抄袭没意思 <!DOCTYP
编程张无忌
2021/01/26
5070
程序猿小明需要为公司员工的个人信息录入编写前端代码,html +css +js正则表达式 实现个人信息登录表
JavaScript 函数劫持攻击原理
一个简单的示例如下,主要逻辑就是,用变量 _alert保存原函数 alert,然后重写 alert 函数,在重写的函数最后调用原函数。这样得到的一个效果就是调用 alert 的时候,可以往 alert 中加入其它操作。比如如下代码中进行一个赋值。
信安之路
2021/04/14
1.5K0
Ajax+SpingMVC总结
废话不多说,请看代码和注释 <%-- Created by IntelliJ IDEA. User: root Date: 17-1-19 Time: 下午2:23 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Ajax类
程裕强
2022/05/06
7250
PHP实现用session来实现记录用户登陆信息
PHP中session实现记录用户登录信息的问题,也是PHP面试题中比较常见的考点之一,是PHP学习者必须掌握的一个知识点。
用户8664418
2021/07/13
7840
Spring MVC 框架学习(七)---- 后端接口小练习(计算器与登陆拦截)
  这里参时不涉及到数据库的操作,只要输入的用户账号以及密码为 admin即可显示登陆成功,进入一个主页“hello word”
RAIN7
2022/08/23
9920
Spring MVC 框架学习(七)---- 后端接口小练习(计算器与登陆拦截)
使用ajax方法实现form表单的提交
作者:13 GitHub:https://github.com/ZHENFENG13 版权声明:本文为原创文章,未经允许不得转载。 写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说想要将控制权放在前端,通过js来操作页面的跳转或者数据变化。 一般这种异步的操作,我们都会想到ajax方式,因此在实现了功能后就整理了这篇文章,通过ajax方法实现for
程序员十三
2018/03/15
3.2K0
javascript常用判断写法
js验证表单大全,用JS控制表单提交 ,javascript提交表单 目录: 1:js 字符串长度限制、判断字符长度 、js限制输入、限制不能输入、textarea 长度限制  2.:js判断汉字、判断是否汉字 、只能输入汉字 3:js判断是否输入英文、只能输入英文 4:js只能输入数字,判断数字、验证数字、检测数字、判断是否为数字、只能输入数字 5:只能输入英文字符和数字 6: js email验证 、js 判断email 、信箱/邮箱格式验证 7:js字符过滤,屏蔽关键字 8:js密码验证、判断密码  2.1: js 不为空、为空或不是对象 、判断为空 、判断不为空  2.2:比较两个表单项的值是否相同 2.3:表单只能为数字和”_”, 2.4:表单项输入数值/长度限定 2.5:中文/英文/数字/邮件地址合法性判断 2.6:限定表单项不能输入的字符 2.7表单的自符控制 2.8:form文本域的通用校验函数
全栈程序员站长
2021/12/27
1.5K0
【转】jQuery验证控件jquery.validate.js使用说明+中文API
一、导入js库 <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/jquery.validate.js" type="text/javascript"></script> 二、默认校验规则 (1)required:true                必输字段 (2)remote:"check.php"      使用ajax方法调用check.php验证输入值 (3)email:
用户1696846
2018/07/16
4.9K0
提交表单与验证表单案例
有如下注册页面,对表单进行校验,如果输入的用户名、密码、手机号符合规则,则允许提交;如果不符合规则,则不允许提交。
GeekLiHua
2025/01/21
2140
提交表单与验证表单案例
AJAX 表单序列化
###文件表单 html: <form id="uploadForm" enctype="multipart/form-data" style="margin-left: 550px;margin-top: 150px;"> 账户:<input type="text" name="username" id="username"><br> 密码:<input type="text" name="password" id="password"><br> 电话:<input type="text" name
问天丶天问
2018/06/19
8060
easyui+ssm+shiro做的登录注册修改密码审核用户(三)
easyui+ssm+shiro做的登录注册修改密码审核用户(三)
Java架构师必看
2021/04/13
1.8K0
easyui+ssm+shiro做的登录注册修改密码审核用户(三)
js基础-表单验证和提交
基础知识: 原始提交如下: 1 <form action="/login" method="post" id="form1"> 2 <span>用户</span> 3 <input type="text" name="username" id="username"/><br/> 4 <span>密码</span> 5 <input type="password" name="password" id="passsword"/><br/> 6    7
Ryan-Miao
2018/03/13
12.8K0
JSP简单练习-获取表单数据
在JSP中,server端程序与client交互最经常使用的方法就是採用表单提交数据。表单提交的方法主要有两种,一种是get方法。还有一种是post方法。两者最大的差别:使用get方法提交的数据会显示在浏览器的地址栏中,而post方法则不会显示,故post方法更为经常使用。表单中提交的数据能够是文本框、列表框及文本区域等。
全栈程序员站长
2022/07/08
2.6K0
注册页面表单js验证,手机验证码验证,阻断提交表单的可行性方案(移植性极强)
1、html表单部分如下,样式使用的是AdminLTE前端框架,可以不理会。简要说明一下:
jiankang666
2022/05/12
3.6K0
注册页面表单js验证,手机验证码验证,阻断提交表单的可行性方案(移植性极强)
php注册登录页面完整代码_用户登录注册代码
关于报错: Warning: mysqli_num_rows() expects parameter 1 to be mysqli_result, boolean given in 的处理请点击 这里进入
全栈程序员站长
2022/11/15
8.8K0
php注册登录页面完整代码_用户登录注册代码
Java|JavaScript 模拟钓鱼网站实例一[通俗易懂]
http://download.csdn.net/download/qq78442761/10247969
全栈程序员站长
2022/09/28
1.2K0
Java|JavaScript 模拟钓鱼网站实例一[通俗易懂]
推荐阅读
相关推荐
简单的表单验证
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验