Home > Article > Web Front-end > Layui determines whether the form is empty
Layui determines whether the form is empty
- 尚Original
- 2019-07-30 16:13:096189browse
The form cannot be left empty to submit a reminder:
When working as an administrator system, there are A problem with the backend is that the data submitted in the front-end form cannot have blank fields. The solution at that time was to use native js to operate the DOM to perform judgment and pop-up operations.
Later, when browsing the community, I found that , the form has an event onSubmit. This event can be understood as being triggered just before the form is submitted. At this time, we can pass an event to this event. Callback function, and in the callback function, perform the verification code for whether there is a blank form, and the reminder code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src = "checkNull.js"></script>
</head>
<body>
//表单在进行提交的前一刻会调用onsubmit事件，这个事件会接受checkInput这个函数的返回值。
<form action="" onsubmit = "return checkInput(this)">
<input type="text" placeholder="请输入用户名">
<input type="text" placeholder="请输入密码">
<input type="submit">
</form>
</body>
</html>
<script>
function checkInput(form) {
for (let i = 0; i < form.length; i++) {
alert("进来了");
if (form.elements[i].value == "") {
alert("请您输入" + form.elements[i].placeholder);
form.elements.onfocus();
//这里返回一个Boolean值，从而确定表单是否能够提交
return false;
}
}
}
</script>Recommended: layui framework tutorial
The above is the detailed content of Layui determines whether the form is empty. For more information, please follow other related articles on the PHP Chinese website!