최근에는 부트 스트랩이 많이 있습니다. 부트 스트랩 문서를 탐색하면 팝 오버 플러그인이 양식 검증 오류에 대한 프롬프트에 특히 적합하다는 것을 알았습니다.
매우 자주 만들어지기 때문에 최근에 밀봉되어 jQuery 플러그인으로 만들어졌습니다. 이 플러그인을 통해 HTML 태그에서 Data-Vaild = "Checking"Data-Errmsg = "오류 메시지"를 정의하십시오. HTML 태그에 검증 규칙을 작성 해야하는 이유는 무엇입니까? 또한 배경을 확인하는 데 사용했기 때문에 (배경은 노드를 사용하지 않고 지금 ASP를 사용하고 있으며, 작업을 마친 후 원칙을 적어 특별 기사를 게시합니다).
<입력 id = "u_exam_idnumber"name = "u_exam_idnumber"자리 표시 자 = "주니어 고등학교 입학 시험의 입장권 번호를 입력하십시오."data-vaild = "^/d {5,20} $"data-errmsg = "입학 티켓 번호에는 숫자 만 포함 할 수 있습니다."최종 효과는 다음과 같습니다.
플러그인 코드는 다음과 같습니다.
"엄격한 사용";/*jQuery+부트 스트랩 검증 양식 miaoqiyuan.cn 원칙 : http://www.miaoqiyuan.cn/p/jquery-bootstrap-vaild 데모 : http://www.miaoqiyuan.cn/procts/vaildex.htex.cn/procts/vaildec. http://www.miaoqiyuan.cn/products/vaild/jquery.vaild.js*/(function(jquery) {vaild : function (_this) {if (!! $ (_ this) .data ( "vaild")) {var Pattern = new regexp ($ (_ this) .data ( "vaild")); if (pattern.test ($ (_ this) .val ()) ) {$ (_ this) .parent (). removeClass ( "has-error"). addClass ( "has-success"); $ (_ this) .popover ( "destrofer ("destroy ");} else {$ (_ this). "top"). data ( "배치", "상단"). data ( "컨테이너", "바디"). 데이터 ( "content", $ (_ this) .data ( "errmsg"). popover ({ "trigger": "manual"}). popover ( "show"); else {$ (_ this) true;}})); $. fn.extend ({vaild : function () {$ (this) .Each (function (index, _this) {$ (var checkresult = true; for (var i = 0; i <_this.length; i ++) {checkresult = $ .vaild (_this [i]). CheckResult;} return CheckResult;}); for (var i = 0; i <_this.length; i ++) {$ (_ this [i]). blur (function () {$. vaild (this);});});}});} (jquery);호출하는 것은 매우 간단합니다. 다음 코드 만 사용하십시오.
<cript> $ ( "form"). vaild (); </script>
양식이 초점을 잃으면 합법적이지 않으면 오류가 직접 프롬프트됩니다. 제출을 클릭 할 때 불법 양식 항목이있는 경우 양식이 계속 제출되지 않습니다.
Popover의 기본 배경은 흰색이며 경고 역할을 할 수 없습니다. 또한 패딩 설정이 너무 커서 공간이 너무 많습니다. 마지막으로 스크린 샷의 효과를 달성하기 위해 CSS를 조정하십시오.
/*refactor popover*/. popover {backgring :#c00; color : #fff;}. popover .popover-content {padding : 1px 5px;}. popover.top> .Arrow : {border-top-color :#c00;}/*refactor bootstrap default prompt*/. {background-color :#f2dede;}.위는 편집기가 소개 한 부트 스트랩 팝 오버 플러그인입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!