利用JQuery编写函数实现表单的校验,要求学号和姓名不能为空,年龄必须数字,才能实现表单的提交
时间: 2024-03-26 17:39:30 浏览: 65
好的,下面是一个简单的利用JQuery编写函数实现表单校验的例子:
HTML代码:
```
<form id="myForm">
学号:<input type="text" id="idInput"><br>
姓名:<input type="text" id="nameInput"><br>
年龄:<input type="text" id="ageInput"><br>
<input type="submit" value="提交">
</form>
```
JQuery代码:
```
$(document).ready(function() {
$('#myForm').submit(function(event) {
// 阻止表单的默认提交行为
event.preventDefault();
// 获取表单中的输入值
var id = $('#idInput').val();
var name = $('#nameInput').val();
var age = $('#ageInput').val();
// 校验学号和姓名是否为空
if (id === '' || name === '') {
alert('学号和姓名不能为空');
return false;
}
// 校验年龄是否为数字
if (!$.isNumeric(age)) {
alert('年龄必须为数字');
return false;
}
// 如果校验通过,则提交表单
this.submit();
});
});
```
这段代码利用JQuery的submit()函数来监听表单的提交事件,然后获取表单中的输入值,校验学号和姓名是否为空,年龄是否为数字,如果校验通过,则提交表单。如果校验不通过,则弹出提示框并阻止表单的提交。
阅读全文