关于form的onsubmit函数

以前没有用过onsubmit函数,总是在button的onclick的函数中进行验证,并且按钮的type="button",不能是submit,否则发生错误没法return
现在使用了onsubmit函数,就在onsubmit函数函数中进行验证操作,在onclick函数进行收集数据的功能(只有一些比较特殊的情况才需要这样做,一般都不需要指定这个函数的)

//2007.3.15:

具体示例:

<script>function validateForm( ) { /* Form validation code here */ }</script>
<form onsubmit="return validateForm( );">...</form>

注意:

1.onsubmit属性内容一定要有return关键字,否则函数会直接执行,不会返回

2.validateForm一定要返回一个boolean类型的返回值

 

在前端中,可以通过使用JavaScript来实现表单的提交,并且可以将表单数据转换成JSON格式,并通过AJAX技术向后台发送POST请求。下面是一个简单的例子: ```html <form id="my-form"> <label for="username">Username:</label> <input type="text" id="username" name="username"><br><br> <label for="password">Password:</label> <input type="password" id="password" name="password"><br><br> <input type="submit" value="Submit"> </form> <script> // 获取表单元素 const form = document.getElementById('my-form'); // 监听表单提交事件 form.addEventListener('submit', handleSubmit); // 处理表单提交事件 function handleSubmit(event) { // 阻止表单默认提交行为 event.preventDefault(); // 获取表单数据 const formData = new FormData(event.target); const json = JSON.stringify(Object.fromEntries(formData.entries())); // 向后台发送请求 fetch('/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: json }) .then(response => response.text()) .then(data => { // 处理响应 alert(data); }) .catch(error => { // 处理错误 alert(error); }); } </script> ``` 在这个例子中,我们首先获取了表单元素,并通过addEventListener函数监听表单提交事件。当表单提交时,我们通过preventDefault函数阻止了表单的默认提交行为,并通过FormData对象获取了表单数据。然后,我们将表单数据转换成JSON格式,并使用fetch函数向后台发送POST请求。发送请求后,我们通过then函数处理响应,并将其作为弹窗显示给用户。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值