JS를 이용한 폼 제출의 여러 가지 방법과 검증
- 高洛峰원래의
- 2016-12-16 15:16:231338검색
직장에서 양식 제출이 편리하다는 것을 알았습니다. IE에서는 제출이 잘 되었지만, Firefox에서는 제출 버튼 사용이 실패하여 JS를 사용하여 성공했습니다. . 강사의 권유에 따라 양식 제출을 위한 일반적인 방법을 다음과 같이 요약했습니다.
첫 번째 방법: 양식 제출, 양식 태그에 onsubmit 이벤트를 추가하여 양식 제출 성공 여부 확인
<script type="text/javascript">
function validate(obj) {
if (confirm("提交表单?")) {
alert(obj.value);
return true;
} else {
alert(obj.value);
return false;
}
}
</script>
<body>
<form action="http://www.php.cn" onsubmit="return validate(document.getElementByIdx_x('myText'));"> <!—参数的这种写法注意下-->
<input type="text" id="myText"/>
<input type="submit" value="submit"/>
</form>
</body>두 번째 방법: 버튼 버튼 ="submitForm();"은 다른 태그의 속성을 무시합니다. 예를 들어 양식 태그의 onsubmit 속성은 유효하지 않습니다. 이때, Form 검증을 위해서는 submitForm() 메소드에 검증코드를 넣어서 검증하면 된다.
<script type="text/javascript">
function validate() {
if (confirm("提交表单?")) {
return true;
} else {
return false;
}
}
function submitForm() {
if (validate()) {
document.getElementByIdx_x("myForm").submit();
}
}
</script>
<body>
<form action="http://www.php.cn" id="myForm">
<input type="text"/>
<input type="button" value="submitBtn" onclick="submitForm();"/> <!—也可以使用document.getElementByIdx_x(“该按钮的id”).click();来执行onclick事件-->
</form>
</body>세 번째 방법: 양식 태그 대신 제출 태그에 onsubmit 이벤트를 삽입합니다. 이 때 양식 확인을 클릭하면 양식이 직접 제출됩니다.
<script type="text/javascript">
function validate() {
if (confirm("提交表单?")) {
return true;
} else {
return false;
}
}
</script>
<body>
<form action="http://www.php.cn">
<input type="text"/>
<input type="submit" value="submit" onsubmit="return validate()"/>
</form>
</body>네 번째 방법: 제출 버튼에 onclick 이벤트를 추가합니다. 이 이벤트는 양식 제출을 확인하는 데 사용됩니다. 이 기능은 양식 태그
<script type="text/javascript">
function validate() {
if (confirm("提交表单?")) {
return true;
} else {
return false;
}
}
</script>
<body>
<form action="http://www.php.cn">
<input type="text"/>
<input type="submit" value="submit" onclick="return validate()"/>
</form>
</body>에 onsubmit 이벤트를 추가하는 것과 유사합니다. 다섯 번째 방법:
<body>
<form action="http://www.php.cn" id="myForm">
<input type="text"/>
<input type="button" value="submitBtn" id="myBtn"/>
</form>
</body>
<script type="text/javascript">
function validate() {
if (confirm("提交表单?")) {
return true;
} else {
return false;
}
}버튼 버튼을 통해 양식 제출 이벤트 onclick="submitForm();"을 트리거하면 다른 태그의 속성이 무시됩니다. 유효하지 않은. 이때 양식 확인을 수행하려면 submitForm()에 확인 코드를 입력하면 됩니다.
function submitForm() {
if (validate()) {
document.getElementByIdx_x("myForm").submit();
}
}
document.getElementByIdx_x("myBtn").onclick = submitForm;
</script>다음을 사용하여 양식을 제출하는 다른 방법 JS 및 검증 관련 글은 PHP 중국어 홈페이지를 주목해주세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：js 양식 제출과 제출 제출의 차이점다음 기사：js 양식 제출과 제출 제출의 차이점