javascript 表单提交和验证的方法

一、使用submit按钮，结合onsubmit事件实现

点击提交表单的时候，触发onsubmit的事件，这个事件会调用checkForm函数，该函数用于判断用户名是否为空

当我们点击提交表单时，将会触发onsubmit事件

onsubmit里是return checkForm，即调用checkForm函数

该函数用于判断用户名是否为空

对于onsubmit，如果return的是false，就会取消提交的操作

如果return的是true，就会执行提交的操作，然后去找action里面的login.php

<!DOCTYPE html>
<html>
<head><meta charset="utf-8">><title>Hello</title><script type="text/javascript">function checkForm() {// body...if( document.form1.username.value == ""){window.alert("用户名不能为空");return false;}else{window.alert("用户名不为空，验证通过")return true;}}</script>>
</head>
<body><form name="form1" method="post" action="login.php" onsubmit="return checkForm()">用户名：<input type="text" name="username">密码：<input type="password" name="userpwd"><input type="submit" name="提交表单"></form>
</body>
</html>

二、submit按钮，结合onclick事件，实现表单的验证和提交

<!DOCTYPE html>
<html>
<head><meta charset="utf-8">><title>Hello</title><script type="text/javascript">function checkForm() {// body...if( document.form1.username.value == ""){window.alert("用户名不能为空");return false;}else{window.alert("用户名不为空，验证通过")return true;}}</script>>
</head>
<body><form name="form1" method="post" action="login.php" >用户名：<input type="text" name="username">密码：<input type="password" name="userpwd"><input type="submit" name="提交表单" onclick="checkForm()"></form>
</body>
</html>

三、button普通按钮，结合submit方法，实现表单验证提交

<!DOCTYPE html>
<html>
<head><meta charset="utf-8">><title>Hello</title><script type="text/javascript">function checkForm() {// body...if( document.form1.username.value.length == 0){window.alert("用户名不能为空");}else if (document.form1.username.value.length < 5 || document.form1.username.value.length > 20){window.alert("用户名只能介于5到20个字符");}else if (checkOtherChar(document.form1.username.value)){window.alert("用户名中含有特殊符号");}else{window.alert("验证通过");document.form1.submit();}}</script>>
</head>
<body><form name="form1" method="post" action="login.php" >用户名：<input type="text" name="username">密码：<input type="password" name="userpwd"><input type="button" name="提交表单" onclick="checkForm()"></form>
</body>
</html>

javascript 表单提交和验证的方法相关推荐

html form提交前验证,form表单提交前验证实现方法
form表单提交前验证实现方法2017-11-26 20:54 form表单提交是网站中最常见的,基本上所有的网站都会用到. 除非你就一些静态网页,仅仅是展示,而不需要互动,所以不需要提交表单. 但是 ...
UI标签库专题三：JEECG智能开发平台 FormValidation(表单提交及验证标签)
1. FormValidation(表单提交及验证标签) 1.1. 参数属性名类型描述是否必须默认值 action string 表单提交路径否 null formid strin ...
php 表单提交及验证 tp,ThinkPHP表单自动提交验证实例教程
ThinkPHP表单自动提交验证实例教程附加规则配合验证规则使用,包括: function 使用函数验证,前面定义的验证规则是一个函数名 callback 使用方法验证,前面定义的验证规则是一个当 ...
html form表单提交前验证
可以使用form表单的onsubmit方法,在提交表单之前,对表单或者网页中的数据进行检验. onsubmit指定的方法返回true,则提交数据:返回false不提交数据. <HTML>& ...
如何在 HTML form 表单提交时验证信息！？
前言:平常老用ajax直接向后台传数据,form 表单不常用都生疏了,今天遇到了一个相关问题,搞了半天,特此记录. 用from表单提交,会遇到一个问题就是,当你点击提交按钮时,直接就把数据传过去了,无 ...
html表单提交前验证,jquery表单提交前实现同步验证（附代码）
jquery表单提交前实现同步验证 .int{ height: 30px; text-align: left; width: 600px; } label{ width: 200px; margin- ...
iview 表单提交之前验证是否符合条件
在表单提交之前调用接口校验用户输入是否符合条件符合则通过, 不符合不让提交 <Card :title="title"><Form class="m ...
JavaScript之form表单提交前验证的onSubmit事件
在前端使用JavaScript验证表单数据时,对验证不通过的form表单要阻止其提交到后台.这时,可以使用onSubmit事件来阻止其提交. <form method="post&qu ...
jquery form表单提交成功，回调方法
先下载 jquery-form.js [#assign security=JspTaglibs["http://www.springframework.org/security/tags&q ...
PHP表单提交参数验证类（可修改）
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');/*** 表单验证类(参考原ci CI_Fo ...

javascript 表单提交和验证的方法

一、使用submit按钮，结合onsubmit事件实现

二、submit按钮，结合onclick事件，实现表单的验证和提交

三、button普通按钮，结合submit方法，实现表单验证提交

javascript 表单提交和验证的方法相关推荐

最新文章

热门文章