jquery submit函数编写简单例子实现form表单验证
时间: 2024-02-22 11:57:07 浏览: 147
好的,下面是一个简单的例子,实现了使用 jQuery 的 `submit()` 函数来提交表单并进行验证:
HTML 代码:
```html
<form id="myForm" action="submit.php" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br>
<button type="submit">Submit</button>
</form>
```
jQuery 代码:
```javascript
$(document).ready(function() {
// 当表单提交时
$("#myForm").submit(function(event) {
// 阻止默认的表单提交行为
event.preventDefault();
// 获取表单数据
var username = $("#username").val();
var password = $("#password").val();
// 简单的验证
if (username === "" || password === "") {
alert("Please enter both username and password.");
return false;
}
// 如果表单数据验证通过,则提交表单
this.submit();
});
});
```
这个例子中,当用户点击表单的提交按钮时,会触发 `submit()` 函数。在 `submit()` 函数中,首先使用 `event.preventDefault()` 阻止了默认的表单提交行为,然后获取了表单中的用户名和密码数据,并进行了简单的验证。如果验证通过,则调用表单的 `submit()` 方法来提交表单数据。如果验证未通过,则弹出一个警告框提示用户。
阅读全文