자동 확인 기능이 포함된 HTML5 사용자 등록 데모를 작성하는 시간을 가졌습니다. 검증에는 한dlebars템플릿 기술과 휴대폰인증코드가 사용됩니다.
다음은 효과 스크린샷입니다:
1. 페이지 코드: usersRegister.hbs
>
<html lang="en">
<머리>
<meta http-equiv="Content-Type" content="text/html; charset =utf-8">
<메타 http-equiv="X-UA 호환" 콘텐츠="IE=edge" />
<제목>용户注册제목 >
<양식 id="my-form" class="myform">
<div>
<라벨>용도명:라벨><입력 id="사용자 이름" 이름="사용자 이름" 유형 ="텍스트" />
div >
<div>
<레이블>密码:레이블><입력 id="pass" 이름="비밀번호" 유형="텍스트" />
div>
div & gt;
& lt; 레이블 & gt; 邮箱:라벨><입력 ID="이메일" 이름="이메일"
<div>
<라벨>电话:라벨><입력 ID="전화" 유형="텍스트" 이름= "전화" 데이터에 이상적="전화" />
div>
<div >
<라벨>供应商V码:라벨><입력 id="vCode " 유형="텍스트" 이름="vCode" 데이터 이상적="vCode" />
div>
<div>
<라벨>真实姓name:라벨><입력 id="trueName" type="text" name="trueName" 데이터 이상적="trueName" />
div>
div>
<레이블>핸드机验证码:라벨><입력 ID= "telCode" 유형="텍스트" 이름="telCode" 데이터 이상적="telCode" />
div>
& lt; div 스타일="여백-하단:5px;">
<버튼 id="getTelCode" type="버튼" 스타일="왼쪽 여백:160px; 오른쪽 여백:auto;" >获取机校验码버튼>
< ;시간 스타일="margin-top:5px; margin-bottom:5px;" /> ;
div>
div>
< ;스크립트 유형="text/javascript">
var 옵션 = {
onFail : function() {
alert($myform.getInvalid(). 길이 + ' 잘못된 필드.')
},
입력 : {
필터 : '필수 digit',
데이터 : {
확장자: [ 'jpg' ]
}
},
'댓글' : {
필터 : '최소 최대',
},
데이터 : {
<🎜 이상 확인하세요. >강함>2강함> 옵션.', 최대 : '
}
*/
}
};
$('#getTelCode').click(function() {
var
전화{
dataType : "
json/getTelCode?전화="+ 전화,
오류: 기능(e) {
🎜>
= $('#my -form').idealforms(options).data('idealforms');
$('#submit').click(function() {
var 사용자 이름 =
문서= 문서.getElementById("pass") .value; //비밀번호
= 문서 .getElementById("email").value; //이메일 주소
= document.getElementById("telephone ").value; //휴대폰번호
= document.getElementById("vCode").value; // V사 코드
= document.getElementById("telCode").value //휴대폰 인증 코드
= document.getElementById("trueName").value; //실명
>="+ 비밀번호 +"
이메일telCode= "+ telCode +"trueName="+ trueName , | > ~ // 호스트 주소 뒤의 디렉터리: uimcardprj/share/meun.jsp 🎜> window.document.location.pathname
var pos = curWwwPath.indexOf(pathName);
// 호스트 주소를 가져옵니다. 예: http://localhost:8083
var localhostPaht = curWwwPath.substring(0, pos) ; // "/"를 사용하여 프로젝트 이름을 가져옵니다. 예: /uimcardprj > =
pathNameing(0, pathName.substr(1).indexOf(' /') + 1); window.location.href
=$('#reset').click(function() {
$myform.reset().fresh().focusFirst()< ;/
>
html
>name: '3자 이상이어야 하며 문자만 포함할 수 있습니다.'username: '사용자 이름은 5자리 이상이어야 합니다. 최대 길이는 30자이며, 영문, 숫자, 한자, 밑줄을 사용하시기 바랍니다. 🎜>pass: ' 비밀번호는 6~15자 사이여야 하며 숫자, 대문자, 소문자를 각각 하나씩 포함해야 합니다. 'strongpass: '8자 이상이어야 합니다. 하나 이상의 대문자, 소문자,
숫자 또는 특수 문자email: '유효한 이메일 주소여야 합니다. 🎜>'">사용자 @gmail.com)'phone: '유효한 휴대전화 번호여야 합니다. (예: 18723101212)전체 코드 파일은 다음과 같습니다.
클립보드에 내용 복사 /*-------------------------------------- -------------------------------------- JQ-IDEALFORMS 2.1 <🎜 🎜 > * 데모: http://elclanrs.github.com/jq-idealforms/ * ------- ------------------------------------- -----------------*/ ;(함수 ( $, 창, 문서, 정의되지 않음 ) { '엄격한 사용'; // 전역 이상적인 양식 네임스페이스 .idealforms = {} .idealforms.filters = {} .idealforms.errors = {} .idealforms.flags = {} .idealforms. ajaxRequests = {} Utils = { 객체} $elms maxWidth = 0 width = $(this).outerWidth() > maxWidth ) { 최대 너비 = 너비 var 값 = $('<p 클래스="' + 이름 + '">p>').hide().appendTo('body ').css( prop ) $('.' + name).remove() 반환 ( /^d+/. test( value ) ? parseInt( value, 10 ) : value ) }, keys keys = [] = 0, key; }, }, 이름="'+ str +'"]').length "'+ str +'"]') // 이름별 }, getFieldsFromArray: function( fields ) { var f = [] for ( var i = 0, l = fields.length; i < l; i++ ) { type = $el.attr('type') || $el[0].tagName.toLowerCase() 항목 = [], item, i, len arr = str.split('::') 항목 = arr[ 0 ] 값 = arr[ 1 ] } else { 항목 = 값 = str } 반품 { 항목: 항목, 값: 값 } } // 텍스트 & 파일 if ( /^(text|password|email|number|search|url|tel|file|hidden)$/.test(type) ) 마크업 = '<입력 '+ '유형= "'+ 유형 +'" '+ 'ID="'+ 이름 +'" '+ '이름="'+ 이름 +'" '+ ' 값="'+ 값 +'" '+ (자리 표시자 && '자리 표시자="'+ 자리표시자 +'"') + '/>' // 텍스트 영역 if ( /textarea/.test( type ) ) { 마크업 = ' } // 선택 if ( /select/.test( type ) ) { 항목 = [] for ( i = 0, len = 목록.length; 나 < len; i++ ) { 항목 = splitValue( list[ i ] ).item 값 = splitValue( list[ i ] ).value items.push('<옵션 값="'+ 값 +'" >'+ 항목 +'옵션>') } 마크업 = ' items.join( '') + '선택>' } // Radiocheck if ( /(radio|checkbox)/.test( type ) ) { 항목 = [] for ( i = 0, len = list.length; i < len; i++ ) { 항목 = splitValue( list[ i ] ).item 값 = splitValue ( list[ i ] ).value items.push( '<label>'+ '<입력 유형="'+ 유형 +'" 이름="'+ 이름 +'" 값="'+ 값 +'" />'+ 항목 + ' 라벨>' ) } 마크업 = 항목.join('') } 반환 마크업 } } /** * 이상적인 양식을 위한 맞춤 탭 */ $.fn.idealTabs = 기능 (컨테이너) { var // 요소 $내용 = 이, $컨테이너컨테이너 = 컨테이너, $래퍼 = $('<ul 클래스="ideal-tabs-wrap"/>'), $탭 = ( 함수 () { var 탭 = [] $contents.each(function () { var 이름 = $(this).attr('name') var html = ' '<스팬>' + 이름 + '스팬>'+ '<i class="ideal-tabs-tab-counter ideal-tabs-tab-counter-zero">0i> '+ '리>' tabs.push(html) }) return $(tabs.join('')) }()), 액션s = { getCuridx : function () { return $ tabs .filter ( '. 이상적인 tabs-tab-Active ') .index() tab = $tabs.filter(function () { return $ tab.index () 방법 /** * 스위치 탭 */ switchTab: function (nameOrId 엑스) { var idx = Utils.isString(nameOrIdx) ? Actions.getTabIdxByName(nameOrIdx) : nameOrIdx $tabs.removeClass('ideal-tabs-tab-active') $tabs.eq(idx).addClass('ideal-tabs-tab-active') $contents.hide().eq( idx).show() }, 다음탭: 함수 () { var idx = 작업.getCurIdx() + 1 idx > $tabs.length - 1 ? methods.firsttab () : methods.witchtab (idx) $ $counter.removeClass('ideal-tabs-tab-counter-zero') for (var m in Methods) $contents[m] = Methods[m] // 초기화 $tabs.first() .addClass('ideal-tabs-tab-active') .end() .click(function () { var $contents.switchTab(이름) }) // DOM 및 이벤트에 삽입 $wrapper.append($tabs).appendTo($container) $contents.addClass('ideal-tabs-content') $contents.each(function () { var $this = $(this), name = $(this).attr('name') $this.data('ideal-tabs-content-name', name) .removeAttr('name') }) $contents.hide().first( ).show() // 새로 시작 $contents 반환 } / ** * 맞춤 <선택> 메뉴 jQuery 플러그인 * @example `$('select').idealSelect()` */ $.fn.idealSelect = 기능 () { return this.each(function () { var $선택 = $(this) , $옵션&nbnbsp;= $select.find('option') /** * 마크업 생성 및 맞춤 선택 요소 반환 * @memberOf $.fn.toCustomSelect * @returns {object} 새로운 선택 대체의 모든 요소 >/ > <ul "ideal-select '+ $select .attr('이름') +'" $메뉴 = $( '<리 <스팬 "ideal-select-title">' + $options.filter(':selected ').text() + '범위> li ), 항목 = (함수() { var $this = $(this) items.push('<li class="ideal-select-item">' + $this.text() + 'li>') }) 반품 항목 }()) $menu.append('<ul class="ideal-select-sub">' + items.join('') + 'ul >') $wrap.append($menu) 반환 { 선택: $wrap, 제목: $menu.find('.ideal-select-title'), 하위: $menu.find('.ideal-select-sub'), 항목: $menu.find('.ideal-select-item') } }()) /** * @namespace 사용자 정의 선택 방법 * @memberOf $.fn.toCustomSelect */ var 작업 = { getSelectedIdx: 함수() { return IdealSelect.items .filter('.ideal-select-item-selected').index() }, /** * @private */ init: (함수 () { $select.css({ 위치: '절대', 최소 너비', .eq($options.filter(':selected').index()) .addClass('ideal-select-item-selected ') }()), noWindowScroll: 기능(e) { if (e.which === 40 || e.which === 38 || e.which === 13) { e.preventDefault() } }, // 스크롤할 때 포커스가 사라지는 문제 수정 // 키보드로 항목 선택 = idealSelect.items.filter('.ideal-select-item-selected'), = idealSelect.items.outerHeight(), = IdealSelect.sub.outerHeight(), =(함수 () { = $selected.position().top + itemHeight ? elPos : elPos > 0 itemHeight = (dir === 'down') = = idealSelect.items.outerHeight(), = 이상적인 선택 .items.length, = height * nItems, 높이 * (nItems - idx) }, idealSelect.sub.fadeIn('fast') idealSelect.select.addClass('ideal-select-open') Actions.select(Actions.getSelectedIdx()) Actions.scrollToItem() }, hideMenu: 기능 () { idealSelect.sub.hide() idealSelect.select.removeClass('ideal-select-open') }, 선택: 기능 (idx) { idealSelect.items . RemoveClass('ideal-select-item-selected') idealSelect.items .eq(idx).addClass('ideal- 항목 선택') }, 변경: 기능(idx) { var text = idealSelect.items.eq(idx).text() 작업. select(idx) idealSelect.title.text(text) $options.eq(idx).prop('selected', true) .getSelectedIdx( ) , .select.is('.ideal-select-menu'), .select.is('.ideal-select-open') /** * @namespace 키를 누름 */ var 9: 기능 () { // TAB ? Actions.hideMenu() : Actions.showMenu() Actions.change(idx) }, 27: 기능 () { // ESC if (isMenu) Act ions.hideMenu() }, 40: 기능 () { // DOWN < ? Actions.select(idx + 1) : Actions.change(idx + 1) } Actions.scrollIntoView('down' ) }, 38: 기능 () { // UP 만약 ( idx > 0) { isOpen ? Actions.select(idx - 1) : Actions.change(idx - 1) } Actions.scrollIntoView('up') }, '기본값': 기능 () { // 편지 var letter = String.fromCharCode(key), $일치 = idealSelect.items .filter(function () { return /^w+$/i.test( letter ) && // 수정자 키( ctrl, cmd, meta, super... ) new RegExp('^' + letter, 'i').test( $(this).text() ) // 첫 번째 일치 찾기 }), n일치 = $matches.length, 카운터 = 이상적인 선택.select.data('counter') + 1 || 0, curKey = idealSelect.select.data('key') || 키, newIdx = $matches.eq(counter).index() if (!nM 어치) // 일치 항목 없음 false 반환 curKey === key) { if (카운터 < n일치) { idealSelect.select .data('카운터' , 카운터) } 그 외 { idealSelect.select.data('counter ', 0) newIdx = $matches.eq(0).index() } } // 새 편지인 경우 newIdx = $matches.eq(0).index() 초점: Actions.focus, '흐림 .목록' : 함수 () { Actions.blur() }, keydown: 기능 (e) { Actions.keydown(e.which) }, 'clickItem.menu': 기능 () { Actions.change($(this).index()) Actions.hideMenu() }, 'clickItem.list': function () { Actions.change($(this ).index()) }, 'clickTitle.menu': 기능 () { Actions.focus() Actions.showMenu() }, 'mousedown.list': function () { Actions.focusHack() } } // 이벤트 재설정 disableEvents idealSelect.select.removeClass('ideal-select-menu ideal-select-list') idealSelect.select.addClass('ideal-select-menu') Actions.hideMenu() $select.on({ 'blur.menu': events['blur.menu'], '초점. menu': events.focus, 'keydown.menu': events.keydown }) idealSelect.select.on('mousedown.menu', events['hideOutside.menu']) idealSelect.items.on('click.menu', events ['clickItem.menu']) idealSelect.title.on('click.menu', events['clickTitle.menu']) }) // 목록 모드 idealSelect.select.on('list', function () { disableEvents() idealSelect.select.addClass('ideal-select-list') Actions.showMenu() $select.on({ 'blur.list': 이벤트['blur.list'], 'focus.list': events.focus, 'keydown.list': events.keydown }) idealSelect.select.on('mousedown.list', events['mousedown.list']) idealSelect.items.on('mousedown.list', events['clickItem.list']) }) $ select.keydown(function (e) { // 기본 키다운 이벤트 방지 type=checkbox], input[type=라디오]').idealRadioCheck() .fn.idealRadioCheck = 함수() { 이것 = $(이것) var $span = $('<span/>') $span.addClass('ideal-'+ ( $this.is(':checkbox') ? 'check': 'radio' ) ) $this.is(':checked') && $span.addClass('checked') // init $span.insertAfter($this) $this.parent('label').addClass('ideal-radiocheck-label') .attr('onclick','') // iOS에서 라벨 클릭 수정 $this.css({ position: 'absolute', left: '-9999px' }) // Shift로 숨기기 왼쪽 // 이벤트 $this.on({ 변경: 기능( ) { var $this = $(this) if ( $this.is('input[ 유형="라디오"]') ) { $this.parent().siblings('label').find( '.ideal-radio').removeClass('checked') } $span.toggleClass( 'checked', $this .is(':checked') ) }, 초점: function() { $span.addClass('focus') }, 흐림: function() { $span.removeClass('focus') }, 클릭: function() { $ (this).trigger('focus') } }) }) } ;(function( $ ) { // 브라우저는 HTML5 여러 파일을 지원합니까? var 다중 지원 = 유형 $('<입력/ >')[0].multiple !== '정의되지 않음', isIE = /msie/i.test( navigator.userAgent ) $.fn.idealFile = 함수() { return this.each (function() { var $file = $(this).addClass('ideal-file'), //원본 파일 입력 // IE 해킹에 사용될 라벨 $wrap = $('<div class="ideal-file-wrap">'), $입력 = $('<입력 입력="text" 클래스="ideal-file-filename" />'), // IE 이외의 브라우저에서 사용되는 버튼 $버튼 = $('<버튼 유형="버튼" 클래스="이상적인 파일 업로드">열기< ;/버튼>'), // IE 해킹 $라벨 = $('<라벨 클래스="ideal-file-upload" for="'+ $file[0].id +'">열기라벨>') // 왼쪽으로 이동하여 숨기세요. 이벤트 트리거 $file.css({ 위치: '절대', 왼쪽: '-9999px' }) $wrap.append( $input, ( isIE ? $label : $button ) ) .insertAfter( $file ) // 포커스 방지 $file.attr('tabIndex', -1) $button.attr('tabIndex', -1) $button.click(function () { $file.focus().click() // 대화상자 열기 }) $file.change(function( ) { var // 여러 개가 지원되는 경우 if ( multipleSupport ) { for ( var , len = fileArr.length; 나 < len; i++ ) { files.push( fileArr[i].name ) } 파일 이름 = files.join(', ') // 지원되지 않는 경우 그냥 값을 사용하세요. // 경로를 삭제하여 파일 이름만 표시 } 그렇지 않으면 { 파일 이름 = $file. val().split('\').pop() } e.which === 13 ) { // Enter e.which === 8 || e.which === 46 ) { // Backspace & Del file = $file.val('').clone( true ) ) e.which === 9 ){ // TAB }) } }(jQuery)) /** * @namespace 오류 * @locale en */ $.idealforms.errors = { 필수: '필수입니다.', number: '숫자여야 합니다.', digits: '고유한 숫자여야 합니다.' , 이름: '3자 이상이어야 하며 문자만 포함할 수 있습니다.', 사용자 이름: ' 사용자 이름은 5자, 최대 30자까지 가능합니다. 영문, 숫자, 한자, 밑줄을 사용하세요. 사용자 이름의 첫 글자는 영문자, 숫자, 한자여야 하며 최대 길이는 숫자일 수 없습니다. 한자는 21자입니다.', pass: '비밀번호는 6~15자리여야 하며 숫자, 대문자, 소문자를 각각 하나씩 포함해야 합니다.', Strongpass: '8자 이상이어야 하며 대문자 1개, 소문자 1개, 숫자 또는 특수 문자 1개 이상을 포함해야 합니다.', 이메일: '유효한 이메일 주소여야 합니다. <em>(예: user@gmail.com)< /em>', 전화: '유효한 휴대폰 번호여야 합니다. <em >(예: 18723101212)em>', > >', url: ' 유효한 URL이어야 합니다. <em>(예: www.google.com) >', minChar: '적어도 /강해야 합니다> 자 길이입니다.',
< 강함>{0} 이상을 선택하세요. 강함> 옵션.', < ;강하게>{0}강하게>자 길이입니다.' , <강함>{0}< /강함> 옵션이 허용됩니다.', 범위: '다음 사이의 숫자여야 합니다. {0} 및 {1}.', 날짜: '유효한 날짜여야 합니다. 🎜><em> (예: {0}) dob: '유효한 생년월일이어야 합니다.', 제외: ''{0}'은(는) 사용할 수 없습니다.', excludeOption: '{0}', equalto: '<와 동일한 값이어야 함 강함>"{0}"강함>', 확장자: '파일에는 유효한 확장자가 있어야 합니다. <em>(예: "{0}")em >', ajaxSuccess: '<강함>{0}강함> 을(를) 사용할 수 없습니다.', ajaxError: '서버 오류...' } /** * 모든 기본 필터 가져오기 * @returns 객체 */ var getFilters = 함수() { var 필터 = { 필수: { 정규식: /.+/, 오류: $.idealforms.errors.required }, 정규식: /^([a-zA-Z0-9]*[-_.]?[a-zA-Z0-9]+)*@([a-zA-Z0 -9]*[-_]?[a-zA-Z0-9]+)+[\.][A-Za-z]{2,3}([\.][A-Za-z]{ 2})?$/, 오류: $.idealforms.errors.email }, 전화: { //regex: /^((13[0-9])|(15[0-9])|(17[0-9 ])|(18[0-9]))\d{8}$/, 정규식: /^(0|86|17951)?(13[0-9 ]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/, 오류: $ .idealforms.errors.phone zip : { regex :/ ^d{5}$|^d{5}-d{4}$/, 오류: $.idealforms.errors.zip }, url: { 정규식: /^(?:(ftp|http|https)://) ?(?:[w-]+.)+[a-z]{2,6}([:/?#].*)?$/i, 오류: $ .idealforms.errors.url }, input = input.input, 입력.userOptions.data.min, 유형="체크박스"], [유형="라디오"]') } 반환 값. 길이 } 입력 = input.input, input.userOptions.data.max, type="checkbox"], [type=" 라디오"]') if ( isRadioCheck ) { this.error = $.idealforms.errors.maxOption.replace('{0} ', 최대 ) return $input.filter(':checked').length <= max } this.error = $.idealforms.errors.maxChar.replace( '{0}', max ) 반환 값 길이 <= 최대 } }, <🎜 입력.userOptions.data.range, .replace( '{0}', range[0] ) <= 범위[1] ? input.userOptions.data.date userFormat.split(구분자), value.split(delimiter), 함수( 날짜, 형식 ) { 0, len = format.length; i < len; i++ ) { if ( /m/.test( 형식[i]) ) m = 날짜[i] if ( /d/.test( 형식[i]) ) d = 날짜[i] if ( / y/.test( 형식[i]) ) y = 날짜[i] } 반환 ( > 0 && m < 13 && y.length === 4 && 입력: input.input, <🎜 확인 연도 = /d{4}/.exec( 값 ), maxYear = new Date().getFullYear(), //현재 연도 minYear = maxYear - 100 this.error = $.idealforms.errors.dob return isDate && theY 귀 > } }, 제외: { 정규식: function( input, value ) { var $ 입력입력 = input.input, 제외 = 입력.userOptions.data.exclude, isOption = $input.is('[type="checkbox"], [ 유형="라디오"], 선택') this.error = isOption ? $.idealforms.errors.excludeOption.replace( '{0}', value ) : this.error = $.idealforms.errors.exclude.replace ('{0}', 값 ) return $.inArray( value, exclude ) ===-1 } }, 같음: { 정규식: 함수( 입력, 값) { var $같음 = $( input.userOptions.data.equalto ), $입력입력 = input.input, 이름 = $equals.attr('name') || $equals.attr('id'), isValid = $equals.parents('.ideal-field') .filter(function(){ return $(this).data('ideal-isvalid') === true }) .length if ( !isValid ) { 반환 false } this.error = $.idealforms.errors.equalto.replace('{0}', name ) 반환 $input.val() === $equals.val() } }, 확장자: { 정규식: 함수( 입력, 값 ) { nbsp;var 파일 = 입력.input[0].files || [{ 이름: 값 }], 확장 = 입력.userOptions.data.extension, re = new RegExp( '\.'+ extensions.join('|') +'$', 'i' ), 유효함 = 거짓 for ( var i = 0, len = 파일.length; i < len; i++ ) { 유효 = 재.test( files[i].name ); } this.error = $.idealforms.errors.extension.replace('{0}' , extensions.join ( ' ","') } }, ajax: { regex: function( input, value, showOrHideError ) { var self = 이것 var $입력입력 = 입력. 입력 userOptions = input.userOptions 이름 = $input.attr('name') 필드 = $input.parents('.ideal-field') 유효 = false = userOptions.errors && userOptions.errors.ajax = {} = customErrors && customErrors.success ? customErrors.success : $.idealforms.errors.ajaxSuccess.replace('{0}', value ) self .error.fail = customErrors && customErrors.error ? customErrors.error : $.idealforms.errors.ajaxError // 입력 이름을 $_POST[이름]으로 보내기 = {} <🎜 🎜> input.userOptions .data .ajax 유형: 'post', if( userAjaxOps._success ) { userAjaxOps._success( resp, text, xhr ) > $input.data('ideal-ajax-error', self.error.fail ) $field.removeClass('ajax') // 사용자 정의 오류 콜백 실행 if ( userAjaxOps._error ) { userAjaxOps. _error( xhr, text, error ) } } } } $.extend( ajaxOps, userAjaxOps ) .idealforms.flags = { var _defaults = { 입력: {}, customFilters: {}, customFlags: {}, globalFlags: '', onSuccess : function(e) { alert('감사합니다...') }, onFail: function() { alert('잘못됨!') }, 반응형At: 'auto', disableCustom: '' } // 생성자 var IdealForms = function( element, options ) { var self = 이것 self.$form = $( element ) self.opts = $.extend( {}, _defaults, options ) self.$탭 = self.$form.find('section') // 현지화된 필터 설정 $. 확장( $.idealforms.filters, getFilters() ) self._init() } // 플러그인 $.fn.idealforms = 기능( 옵션 ) { return this.each(function() { if ( !$.data( this, 'idealforms' ) ) { LessVars } self o = self.opts formElements = self._getFormElements() visibility', 'visible' ) .each(function(){ self._doMarkup( $(this) ) }) // 탭 생성 if ( self.$tabs.length ) { var $tabContainer = $('<div class="ideal-wrap ideal-tabs ideal-full-width"/>') self.$form.prepend( $tabContainer ) self.$tabs.idealTabs( $tabContainer ) } // 항상 입력 아래에 날짜 선택기를 표시 if( jQuery.ui ) { $.datepicker._checkOffset = 함수( a,b,c ) { return b } } //data-ideal로 지정된 입력을 추가합니다. // 사용자 입력 목록에 self.$ form.find('[data-ideal]').each(function() { var userInput = o.inputs[ this.name ] o.inputs[ this.name ] = userInput || { 필터: $(this).data('ideal') } }) // 반응형 if ( o.반응형At ) { $(window).resize(function(){ self._반응() }) self._반응() } // 양식 이벤트 self.$form.on({ keydown : 함수( e ) { // Enter 키를 누를 때 제출을 방지 // 텍스트 영역은 제외 if ( e.which === 13 && e.target.nodeName !== 'TEXTAREA' ) { e.preventDefault() } }, 제출: 기능( e ) { if ( !self.isValid() ) { }) self._adjust () > label:first-child '), type="checkbox"], [ 유형="라디오"], [유형="제출"]), textarea'), 유형="라디오"], 입력[유형="체크박스"]'), type="file "]'), name="'+ Utils.getKeys( this.opts.inputs ).join('"], [이름="') +'"]') self = this isNumber = !isNaN( nameOrIdx ) = new RegExp( nameOrIdx, 'i' ) _updateTabsCounter: function() { var self = this self.$tabs.each(function( i ) { var invalid = self.getInvalidInTab( i ) .length self.$tabs.updateCounter( i, invalid ) }) }, _adjust: function() { var self = 이것 var o = self.opts var formElements = self._getFormElements() var curTab = self._getCurrentTabIdx() // 자동 완성으로 인해 일부 문제가 발생함... formElements.inputs.attr('autocomplete', 'off') // 치수 계산을 위한 탭 표시 if ( self.$tabs.length ) { self.$tabs.show() } // 라벨 조정 var labels = formElements.labels 레이블 s. RemoveAttr('style').width( Utils.getMaxWidth( labels ) ) // 제목 및 구분 기호 조정 if ( self. $tabs.length ) { this.$tabs.each(function(){ $( this ).find('. Ideal-heading:first').addClass('first-child') }) } else { self.$form.find('.ideal-heading:first').addClass('first-child') } self._setDatepicker() // 숨기기 탭 계산 완료 if ( self.$tabs.length ) { self.$tabs.hide() self.switchTab( curTab ) } }, o = 이.opts datepicker = 이.$form.find( 'input.datepicker') var userInput = o.inputs[ this.name ] var data = userInput && userInput.data && userInput.data.date var format = data ? data.replace('yyyy', 'yy' ) : 'mm/dd/yy' $(this).datepicker({ dateFormat: 형식, 전표시: 기능( 입력 ) { $( 입력 ).addClass ('열기') }, 변경 시월 연도: function() { // 크기가 조정되지 않는 IE9 수정 this =$(this) w = $this.outerWidth() // 캐시 먼저! = $(this), w = t.outerWidth( ) = this.opts = Utils.getIdealType( $element ) var $필드 = $('<span class="이상적 -필드"/>') var $오류 = $('< 스팬 클래스="이상 오류" />') var $유효 = $('<i class="ideal-icon ideal-icon-valid" />') var $잘못됨 = $('<i class="ideal-icon ideal-icon-invalid"/>') . click(function(){ $(this).parent().find('input:first, textarea, select').focus() }) // 기본 마크업 $element.closest('div').addClass('ideal- Wrap') .children('label:first-child').addClass('ideal-label') var idealElements = { _defaultInput: function() { $element.wrapAll( $field ).after( $valid , $invalid ) .parent().after($error ) }, 텍스트: function() { idealElements._defaultInput() }, radiocheck: function() { $element.parents('.ideal-field').append( $valid, $invalid ).after( $error ) } }, 선택: function() { idealElements._defaultInput() if ( !/select/.test( o.disableCustom ) ) { $element.idealSelect() } }, 파일: function() { 이상적인 요소 ._defaultInput() if ( !/file/.test( o.disableCustom ) ) { $element.idealFile() } }, 버튼: function() { if ( !/button/.test( o.disableCustom ) ) { $element.addClass('ideal-button') } }, 숨김: function() { $element.closest('div').addClass('ideal-hidden') }, 제목: function() { $element.closest('div').addClass('ideal-full-width') $element.parent( ).children().wrapAll('<span class="ideal-heading"/>') }, <div class="이상적인 구분자"/>') = 이 = 이것.opts var userOptions = o.inputs[ $input.attr('name') ] var userFilters = userOptions.filters && userOptions.filters.split(/s/) var name = $input.attr(' 이름') var value = $input.val() var ajaxRequest = $.idealforms.ajaxRequests[ name ] var isRadioCheck = $input.is('[type="checkbox "], [유형="라디오"]') var inputData = { // 라디오 또는 체크가 이름별로 관련된 모든 입력의 유효성을 검사하는 경우 입력: isRadioCheck ? self.$form.find('[이름="' + 이름 + '"]') : $input, userOptions : userOptions } // 검증 요소 분야 = $input.parents('.ideal-field') 오류 = $field.siblings('.ideal-error') 잘못됨 = isRadioCheck 유효 = isRadioCheck // 입력할 때 유효성 검사를 방지하지만 새 문자를 도입하지 않음 // 주로 여러 AJAX 요청을 방지하기 위한 것입니다 var oldValue = $input.data('ideal-value') || 0 $input.data( '이상적인 가치', 값 ) if ( e.type = =='keyup'&& ( userFilters ) { customError var '' // 필드가 비어 있고 필수가 아닌 경우 } nbsp; showOrHideError( error, false ) // 응답이 돌아올 때까지 무효로 설정 if ( var if ( ajaxError ) { 유효 = 유틸 .isRegex( theFilter. 정규식 ) && theFilter.regex.test( 값 ) || 오류 = customError || theFilter.error ///regex() 호출 후 오류 지정 유효함 ) { 반환 false } 🎜> = (함수(){ var .flags && userOptions.flags.split(' ') || [ ] if ( o.globalFlags ) { $.each( o.globalFlags.split(' '), function( i, v ) { f.push(v) }) } }()) = $.idealforms.flags[f] if ( theFlag ) { theFlag( $input, e .type ) } }) } // 업데이트 카운터 if ( self.$tabs.length ) { self._updateTabsCounter( self._getCurrentTabIdx() ) } }, _attachEvents: function() { var self = this self._getUserInputs().on('keyup change focus blur', function(e) { var $this = $(this) var $필드 = $this.parents('.ideal-field') var isFile = $this.is('input[type=file]') // 변경 시 트리거 type=file custom file // 원래 파일 입력에 초점을 비활성화합니다 (tabIndex = -1) if ( e.type === 'focus' || isFile && e.type ==='change') { $field.addClass('ideal-field-focus') } if ( e.type === 'blur' ) { $field.removeClass('ideal-field-focus') } self._validate( $this, e ) }) }, _반응: function() { var formElements = 이것._getFormElements() var maxWidth = LessVars.fieldWidth + formElements.labels.outerWidth() var $emptyLabel = formElements.labels.filter(function() { return $(this).html () === ' ' }) var $customSelect = 이것 ... > maxWidth ) < this.opts.ResponseAt ) isStack = 이것.$form.is('.stack') $customSelect.trigger( isStack ? 'list' : 'menu' ) // datePicker 숨기기 var $datePicker = this.$form.find('input.hasDatepicker') if ( $datePicker.length ) { $datePicker.datepicker('hide') } } }) /* * 공개 방법 */ $.extend( IdealForms.prototype , { getInvalid: function() { return this.$form.find('.ideal-field').filter( function() { return $(this).data('ideal-isvalid') === false }) }, getInvalidInTab: function( nameOrIdx ) { return this._getTab( nameOrIdx ) .find('.ideal-field').filter(function() { return $(this).data('ideal-isvalid') === false }) }, isValid: function() { 반환 !this.getInvalid().length }, isValidField: 함수( 필드) { var $input = Utils.getByNameOrId( field ) return $input.parents(' .ideal-field').data('ideal-isvalid') === true }, focusFirst: function() { if ( this.$tabs.length ) { this.$tabs.filter(':visible') .find('.ideal-field:first') .find('input:first, select, textarea').focus() } else { this.$form.find('.ideal-field:first') = = $first.parents('.ideal-tabs-content').data('ideal-tabs-content-name') if ( this.$tabs.length ) { this.switchTab( tabName ) }}, prevTab : function () {{<{<{ 🎜> 유틸리티 $.each( 필드, 함수( i ) { Utils $ input.change().parents('.ideal-field').removeClass('valid invalid') this._attachevents () <🎜 🎜> <🎜 🎜 🎜 > = > formElements.select.find('option').first().prop( 'selected', true ) 필드 = Utils.convertToArray( fields ) var formElements = this._getFormElements() $.each( fields, function( i, v ) { var $ 입력 = 유틸리티.getByNameOrId( v ) var 유형 = 유틸.getIdealType ( $input ) if ( 유형 ==='text' || 유형 ==='파일' ) { $input.val('') } if ( 유형 === 'radiocheck' ) { $input.removeAttr('checked') // 라디오 & 체크 입력 === '선택' ) { Utils.convertToArray( fields ) 이 Utils.getFieldsFromArray( fields ) var self.opts.inputs[ name ] 입력 && input.filters $this.data( 'ideal-filters', filters ) return 이것 }, setOptions: function( options ) { $.extend( true, this.opts, options ) this.reload().fresh() 이 }}, <🎜 🎜> addfields : function (fields) { = var self = // 모든 입력의 이름을 배열에 저장 = [] // DOM에 입력 추가 = nbsp; var userOptions = { 필터: ops.filters || '', = var type = var list = var placeholder = var 값 = var $필드 = $(' > '+ '< '+ 라벨 +':레이블>'+ Utils.makeInput( 이름, 값, 유형, 목록, 자리 표시자) + 'div>') var $ 입력 = $field.find('input, select, textarea, :button') // 목록에 필터가 포함된 입력 추가 = = $fields.parents('.ideal-wrap').remove ) 🎜>}) }( jQuery, window, document )) 【관련 추천】 HTML5 로컬 데이터베이스 인스턴스에 대한 자세한 설명
위 내용은 H5가 사용자 등록 자동 인증을 완료한 상세 예시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
