jquery mobile 의 폼 검증
2601 단어 JQuery Mobile
어차피 한 집 인 데 구체 적 인 예 는 다음 과 같다.
1)사용 하 는 js:
jquery.validate.min.js
jquery.mobile-1.0a3.min.js
jquery.mobile-1.0a3.min.css
2)HTML 폼
<div data-role="page" id="login">
<div data-role="header">
<h1>Acme Corporation</h1>
</div>
<div data-role="content">
<form id="frmLogin" class="validate">
<div data-role="fieldcontain">
<label for="email">[i]* [/i] Email: </label>
<input type="text" id="email" name="email"
class="required email" />
</div>
<div data-role="fieldcontain">
<label for="password">[i]* [/i]Password: </label>
<input type="password" id="password" name="password"
class="required" />
</div>
<div class="ui-body ui-body-b">
<button class="btnLogin" type="submit"
data-theme="a">Login</button>
</div>
</form>
</div>
</div>
class="required"를 더 하면 입력 해 야 할 항목 의 검증 을 완료 할 수 있 습 니 다.
3 검 증 된 JS 는 사실 간단 합 니 다.일반적인 jquery vaidate 와 같 습 니 다.
$("#frmLogin").validate({
submitHandler: function(form) {
console.log("Call Login Action");
}
});
검증 에 성공 하면,진정한 논리 부분 을 실행 합 니 다.
4.jquery mobile 은 가로 와 세로 로 화면 을 전환 할 때 CSS 스타일 전환 도 제공 합 니 다.다음 과 같 습 니 다.
.portrait label.error, .landscape label.error {
color: red;
font-size: 16px;
font-weight: normal;
line-height: 1.4;
margin-top: 0.5em;
width: 100%;
float: none;
}
.landscape label.error { display: inline-block; margin-left: 22%; }
.portrait label.error { margin-left: 0; display: block; }
em { color: red; font-weight: bold; padding-right: .25em; }
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jquery mobile AJAX 특성의 함정간단 한 경 우 는 MVC 가 방향 을 바 꾸 고 URL 이 변 하지 않 는 다 는 것 이다. N 가지 방식 을 시 도 했 습 니 다. 이리 저리 뛰 어 다 니 며 풀 리 지 않 고 서버 에서 뛰 어 다 니 며 JS...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.