jQuery 플러그인 EasyUI EasyUI 양식을 쉽게 배우십시오.

1. EasyUI로 비동기 제출 양식 만들기
이번 글에서는 easyui를 통해 양식(Form)을 제출하는 방법을 알려드립니다. 이름, 이메일, 전화번호 필드가 포함된 양식을 만듭니다. easyui 양식 플러그인을 사용하여 양식을 ajax 양식으로 변경하십시오. 양식은 모든 필드를 백엔드 서버에 제출하고 서버는 일부 데이터를 처리하여 프런트엔드 페이지로 다시 보냅니다. 우리는 반환 데이터를 수신하고 이를 표시합니다.

양식 작성

 <div style="padding:3px 2px;border-bottom:1px solid #ccc">Ajax Form</div>
 <form id="ff" action="form1_proc.php" method="post">
 <table>
 <tr>
 <td>Name:</td>
 <td><input name="name" type="text"></input></td>
 </tr>
 <tr>
 <td>Email:</td>
 <td><input name="email" type="text"></input></td>
 </tr>
 <tr>
 <td>Phone:</td>
 <td><input name="phone" type="text"></input></td>
 </tr>
 <tr>
 <td></td>
 <td><input type="submit" value="Submit"></input></td>
 </tr>
 </table>
 </form>

Ajax 형식으로 변경

 $('#ff').form({
 success:function(data){
 $.messager.alert('Info', data, 'info');
 }
 });

서버측 코드

form1_proc.php
 $name = $_POST['name'];
 $email = $_POST['email'];
 $phone = $_POST['phone'];
 
 echo "Your Name: $name <br/> Your Email: $email <br/> Your Phone: $phone";

2. EasyUI 양식 확인
양식을 확인하는 방법을 보여드리겠습니다. easyui 프레임워크는 양식의 유효성을 검사하기 위한 verifybox 플러그인을 제공합니다. 이 튜토리얼에서는 문의 양식을 생성하고 유효성 검사 상자 플러그인을 적용하여 양식의 유효성을 검사합니다. 그런 다음 이 양식을 필요에 맞게 조정할 수 있습니다.

양식 만들기

이름, 이메일, 제목, 메시지 필드가 포함된 간단한 문의 양식을 만들어 보겠습니다.

 <div style="padding:3px 2px;border-bottom:1px solid #ccc">Form Validation</div>
 <form id="ff" method="post">
 <div>
 <label for="name">Name:</label>
 <input class="easyui-validatebox" type="text" name="name" required="true"></input>
 </div>
 <div>
 <label for="email">Email:</label>
 <input class="easyui-validatebox" type="text" name="email" required="true" validType="email"></input>
 </div>
 <div>
 <label for="subject">Subject:</label>
 <input class="easyui-validatebox" type="text" name="subject" required="true"></input>
 </div>
 <div>
 <label for="message">Message:</label>
 <textarea name="message" style="height:60px;"></textarea>
 </div>
 <div>
 <input type="submit" value="Submit">
 </div>
 </form>

입력 태그에 easyui-validatebox라는 스타일을 추가하면 입력 태그가 validType 속성을 기반으로 유효성 검사를 적용합니다.
양식이 유효하지 않은 경우 양식 제출 방지

사용자가 양식의 제출 버튼을 클릭할 때 양식이 유효하지 않은 경우 양식이 제출되지 않도록 해야 합니다.

 $('#ff').form({
 url:'form3_proc.php',
 onSubmit:function(){
 return $(this).form('validate');
 },
 success:function(data){
 $.messager.alert('Info', data, 'info');
 }
 });

양식이 유효하지 않은 경우 메시지가 표시됩니다.

위에서는 비동기 제출 양식을 만드는 방법과 양식 확인을 수행하는 방법을 포함하여 양식에 대해 설명합니다. 이것이 모든 사람에게 도움이 되기를 바랍니다.