请利用JQuery编写函数实现表单的校验,要求学号和姓名不能为空,年龄必须数字,才能实现表单的提交。 程序清单:(10分) function check() { } 其中表单的html代码如下: <form id=”student” action=”?” method=”post” onsubmit=”return check()”> 学号:<input type=”text” id=”xh”/> 姓名:<input type=”text” id=”name”/> 年龄:<input type=”text” id=”age”/> <input type=”submit” /> </form>
时间: 2024-03-26 12:40:28 浏览: 42
jquery表单校验
以下是利用JQuery编写的表单校验函数,同时结合了给表单元素添加样式和错误提示信息的功能:
```javascript
function check() {
var id = $('#xh').val();
var name = $('#name').val();
var age = $('#age').val();
// 校验学号和姓名不能为空
if (id === '') {
$('#xh').addClass('error');
$('#xh_error').text('学号不能为空!');
return false;
} else {
$('#xh').removeClass('error');
$('#xh_error').text('');
}
if (name === '') {
$('#name').addClass('error');
$('#name_error').text('姓名不能为空!');
return false;
} else {
$('#name').removeClass('error');
$('#name_error').text('');
}
// 校验年龄必须为数字
if (isNaN(age)) {
$('#age').addClass('error');
$('#age_error').text('年龄必须为数字!');
return false;
} else {
$('#age').removeClass('error');
$('#age_error').text('');
}
// 表单校验通过,可以提交
return true;
}
```
在该函数中,我们首先通过 jQuery 的 `val()` 方法获取表单中学号、姓名和年龄的值,然后进行校验。如果学号或姓名为空,或者年龄不是数字,就会将对应的表单元素添加一个 `error` 类,同时在对应的错误提示元素中显示错误信息,并返回 `false`,阻止表单的提交。如果校验通过,就将对应的表单元素移除 `error` 类,同时清空对应的错误提示信息,并返回 `true`,表单可以提交。
在表单中,我们需要给每个表单元素添加一个 id,以便在校验函数中能够正确地获取它们的值。另外,我们还需要在每个表单元素下方添加一个用于显示错误提示信息的元素,其中 id 格式为 `表单元素的id + '_error'`,例如学号输入框的错误提示元素的 id 应该为 `xh_error`。在校验函数中,我们会根据表单元素的 id 找到对应的错误提示元素,并在需要时修改它的内容。同时,我们也会根据校验结果添加或移除表单元素的 `error` 类,以便在页面中正确地显示错误状态。
阅读全文