javascript 表单提交和验证的方法

布满荆棘的人生 2022-04-25 10:42 347阅读 0赞

## 一、使用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>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTE4NTI3_size_16_color_FFFFFF_t_70][]

--------------------

## 二、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>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTE4NTI3_size_16_color_FFFFFF_t_70 1][]

--------------------

## 三、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>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTE4NTI3_size_16_color_FFFFFF_t_70 2][]

![20190531164026894.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTE4NTI3_size_16_color_FFFFFF_t_70]: /images/20220125/5d4a3b5f4d9d44d9a0ca9bdbd314019a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTE4NTI3_size_16_color_FFFFFF_t_70 1]: /images/20220125/0d0a0b994e364c2896a2e65033f29c35.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTE4NTI3_size_16_color_FFFFFF_t_70 2]: /images/20220125/6cf3728cafbd47918b64d666e4f122b4.png
[20190531164026894.png]: /images/20220125/f4fdf08b4f2341c1a4991d73ae35f0f2.png