> 웹 프론트엔드 > 레이이 튜토리얼 > Layui는 양식이 비어 있는지 확인합니다.

Layui는 양식이 비어 있는지 확인합니다.

풀어 주다: 2019-07-31 08:59:28
원래의
6321명이 탐색했습니다.

Layui는 양식이 비어 있는지 확인합니다.

알림을 제출하려면 양식을 비워둘 수 없습니다:

관리자 시스템에서 작업할 때 백엔드에 문제가 있었습니다. 즉, 프런트엔드 양식에서 제출한 데이터를 제출할 수 없습니다. 빈 필드가 있습니다. 당시 해결책은 네이티브 js를 사용해 DOM을 조작해 판단과 팝업 작업을 수행하는 것이었습니다.

그 후 커뮤니티를 탐색하던 중 양식에 onSubmit 이벤트가 있다는 것을 발견했습니다. 이 이벤트는 양식이 제출되기 직전에 실행되는 것으로 이해할 수 있습니다. 이때 이 이벤트에 콜백 함수를 전달할 수 있습니다. 콜백 함수에서는 공백 양식 유무에 대한 확인 코드와 알림 코드가 수행됩니다.

<!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>
로그인 후 복사

추천: layui 프레임워크 튜토리얼

위 내용은 Layui는 양식이 비어 있는지 확인합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿