jQuery Validation Plugin으로 확인 된 (미국) 전화 번호 요청 양식을 만들려고합니다 . 다음은 두 가지 예입니다.
동일한 HTML을 사용합니다 (아래 참조). 두 번째도 일부 JavaScript를 사용합니다 (아래 참조).
HTML
<form id="myform">
<table>
<tr>
<td>Name</td>
<td>Phone Number</td>
<td></td>
</tr>
<tr>
<td>
<input type="text" name="Name" required="required" />
</td>
<td>
<input type="phoneUS" name="PhoneNumber" />
</td>
<td>
<input type="submit" />
</td>
</tr>
</table>
</form>
자바 스크립트
$(document).ready(function () {
$('#myform').validate({ // initialize the plugin
errorElement: 'div',
submitHandler: function (form) { // for demo
alert('valid form submitted'); // for demo
return false; // for demo
}
});
});
아름다운 오류 메시지와 전화 번호 확인을 모두 원하지만 어떻게해야할지 모르겠습니다. 사실, 유효성 검사 코드가 명시 적으로 호출되지 않았기 때문에 첫 번째 코드가 어떻게 유효성을 검사하는지 이해하지 못합니다.
누군가 무슨 일이 일어나고 있는지 설명 할 수 있습니까?
required="required"이름 입력 의 속성 때문에 "아름다운"오류 메시지가 표시 됩니다.
이것은 표준 HTML5 양식 유효성 검사 속성이므로 브라우저에서 전적으로 처리합니다. 인생의 많은 것들이 그렇듯이, 당신의 브라우저에 따라 당신의 아름다움은 나의 아름다움과 같지 않을 수 있습니다.
이전 브라우저는 전혀 인식하지 못합니다 -http : //caniuse.com/#search=form%20validation 예 : 10 이전의 IE.
input type="tel"for 전화 번호 도 있습니다 . 표준 알파 1 대신 숫자 키보드를 표시해야하므로 모바일 장치에 특히 유용하지만 브라우저 지원은 더 제한적입니다. http://caniuse.com/#feat=input- 이메일 전화 URL
이 tel유형 pattern에는 특정 전화 번호 형식을 지정하기위한 정규식을 허용 하는 속성 도 있습니다 . http://www.w3.org/TR/html-markup/input.tel.html
그러나 장단점은 오류 메시지에 대한 일관된 모양이 필요하고 이전 브라우저와의 호환성이 필요한 경우 Javascript 기반 솔루션이 필요하다는 것입니다.
편집 : JSFiddle 예제를 사용하여 업데이트 input type="tel"하고 미국 전화 번호 패턴 (nnn-nnn-nnnn) : http://jsfiddle.net/h5xf2wdk/1/
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다