Html5用户注册自动校验

抽时间写了一个带有自动校验功能的Html5用户注册Demo。使用到Handlebars模板技术和手机验证码校验。

以下是效果截图：

1.页面代码：usersRegister.hbs

<!DOCTYPE html>
<!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge" /><title>用户注册</title><!--[if lt IE 9]><script src="/assets/scripts/html5shiv.js"></script><![endif]--><link href="/assets/styles/jquery.idealforms.min.css" rel="stylesheet" media="screen" /><style type="text/css">body {font: normal 15px/1.5 Arial, Helvetica, Free Sans, sans-serif;color: #222;overflow-y: scroll;padding: 60px 0 0 0;}.main {width: 560px;height: 480px;margin: -50px auto;}#my-form {width: 560px;height: 450px;margin: 0 auto;border: 1px solid #ccc;padding: 3em;border-radius: 3px;box-shadow: 0 0 2px rgba(0, 0, 0, .2);}</style><script type="text/javascript" src="/assets/scripts/jquery-1.8.2.min.js"></script><script type="text/javascript" src="/assets/scripts/jquery.idealforms.js"></script>
</head><body>
<!-- style="background-image: url(static/image/bg.jpg) --><div class="main" ><div style="height：5px;text-align:center;font-size:25px"> 欢迎您注册！</div><!-- Begin Form --><form id="my-form" class="myform"><div><label>用户名:</label><input id="username" name="username" type="text" /></div><div><!-- <label>密码:</label><input id="pass" name="password" type="password" /> --><label>密码:</label><input id="pass" name="password" type="text" /></div><div><label>邮箱:</label><input id="email" name="email"data-ideal="required email" type="email" /></div><div><label>电话:</label><input id="telephone" type="text" name="phone" data-ideal="phone" /></div><div><label>供应商V码:</label><input id="vCode" type="text" name="vCode" data-ideal="vCode" /></div><div><label>真实姓名:</label><input id="trueName" type="text" name="trueName" data-ideal="trueName" /></div><div><label>手机验证码:</label><input id="telCode" type="text" name="telCode" data-ideal="telCode" /></div><div style="margin-bottom:5px;"><button id="getTelCode" type="button" style="margin-left:160px; margin-right:auto;" >获取手机校验码</button><hr style="margin-top:5px; margin-bottom:5px;" /></div><!--<div><label>性别:</label><select id="sex" name="sex"><option value="男">男</option><option value="女">女</option></select></div><div><label>昵称:</label><input id="nickName" type="text" name="nickName" data-ideal="nickName" /></div><div><label>年龄:</label><input id="age" type="text" name="age" data-ideal="age" /></div>--><!-- <div><label>地址:</label><input type="text" name="address" data-ideal="address" /></div><div><label>QQ:</label><input type="text" name="qq" data-ideal="qq" /></div><div><label>邮编:</label><input type="text" name="zip" data-ideal="zip" /></div><div><label>传真:</label><input type="text" name="fax" data-ideal="fax" /></div><div><label>身份证:</label><input type="text" name="creditID" data-ideal="creditID" /></div><div><label>出生日期:</label><input name="date" class="datepicker"data-ideal="date" type="text" placeholder="月/日/年" /></div><div><label>上传头像:</label><input id="file" name="file" multipletype="file" /></div><div><label>个人主页:</label><input name="website" data-ideal="url"type="text" /></div><div><label>备注:</label><textarea id="comments" name="comments"></textarea></div>--><!-- <div id="languages"><label>语言:</label> <label><input type="checkbox"name="langs[]" value="English" />英文</label> <label><inputtype="checkbox" name="langs[]" value="Chinese" />中文</label> <label><inputtype="checkbox" name="langs[]" value="Spanish" />西班牙文</label> <label><inputtype="checkbox" name="langs[]" value="French" />法文</label></div><div><label>精通几门:</label> <label><input type="radio"name="radio" checked />1</label> <label><input type="radio"name="radio" />2</label> <label><input type="radio" name="radio" />3</label><label><input type="radio" name="radio" />4</label></div><div><label>国籍:</label> <select id="states" name="states"><option value="default">– 选择国籍 –</option><option value="AL">阿拉伯</option><option value="AK">中国</option><option value="AZ">美国</option><option value="AR">法国</option><option value="CA">英国</option><option value="CO">德国</option><option value="CT">西班牙</option><option value="DE">俄罗斯</option></select></div> --><div style="margin-top:10px; margin-left:100px;margin-right:100px;"><button type="button" id="submit" class="submit">提交</button><button id="reset" type="button" >重置</button></div></form><!-- End Form --></div><script type="text/javascript">var options = {onFail : function() {alert($myform.getInvalid().length + ' invalid fields.')},inputs : {'password' : {filters : 'required pass'},'username' : {filters : 'required username'},'email' : {filters : 'required email'},'phone' : {filters : 'required phone'},'trueName' : {filters : 'required'},'vCode' : {filters : 'required'},'telCode' : {filters : 'required'}/*'age' : {filters : 'required digits',data : {min : 16,max : 70}},'file' : {filters : 'extension',data : {extension : [ 'jpg' ]}},'comments' : {filters : 'min max',data : {min : 50,max : 200}},'states' : {filters : 'exclude',data : {exclude : [ 'default' ]},errors : {exclude : '选择国籍.'}},'langs[]' : {filters : 'min max',data : {min : 2,max : 3},errors : {min : 'Check at least <strong>2</strong> options.',max : 'No more than <strong>3</strong> options allowed.'}}*/}};$('#getTelCode').click(function() {var telephone = document.getElementById("telephone").value;   //手机号码if (telephone == null || telephone == ""){alert("手机号码不能为空!");}else{$.ajax({type : "GET",dataType : "json",url : "../api/getTelCode?telephone="+ telephone,success : function(msg) {},error : function(e) {alert("获取手机校验码失败！" + e);}});}});var $myform = $('#my-form').idealforms(options).data('idealforms');$('#submit').click(function() {var username = document.getElementById("username").value; //用户名var password = document.getElementById("pass").value;    //密码var email = document.getElementById("email").value;     //邮箱var telephone = document.getElementById("telephone").value;     //手机号码var vCode = document.getElementById("vCode").value;     //公司V码var telCode = document.getElementById("telCode").value;     //手机校验码var trueName = document.getElementById("trueName").value;     //真实姓名$.ajax({type : "GET",url : "../api/usersRegister?username="+ username +"&password="+ password +"&email="+ email +"&telephone="+ telephone +"&vCode="+ vCode +"&telCode="+ telCode +"&trueName="+ trueName,success : function(msg) {//获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jspvar curWwwPath = window.document.location.href;//获取主机地址之后的目录，如： uimcardprj/share/meun.jspvar pathName = window.document.location.pathname;var pos = curWwwPath.indexOf(pathName);//获取主机地址，如： http://localhost:8083var localhostPaht = curWwwPath.substring(0, pos);//获取带"/"的项目名，如：/uimcardprjvar projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);window.location.href = projectName + "/login";alert("注册成功!");},error : function(e) {alert("注册失败！" + e);}});});$('#reset').click(function() {$myform.reset().fresh().focusFirst();});</script></body>
</html>

2.jq输入校验：jquery.idealforms.js

该js校验初始版本来自Cedric Ruiz，我略有修改。

部分校验的规则如下：

  required: '此处是必填的.',
  number: '必须是数字.',
  digits: '必须是唯一的数字.',
  name: '必须至少有3个字符长，并且只能包含字母.',
  username: '用户名最短5位,最长30位,请使用英文字母、数字、中文和下划线. 用户名首字符必须为字母、数字、中文,不能为全数字.中文最长21个字.',
  pass: '密码的位数必须的在6-15位之间，并且至少包含一个数字，一个大写字母和一个小写字母.',
  strongpass: '必须至少为8个字符长，至少包含一个大写字母和一个小写字母和一个数字或特殊字符.',
  email: '必须是一个有效的email地址. <em>(例: user@gmail.com)</em>',
  phone: '必须是一个有效的手机号码. <em>(例: 18723101212)</em>'

以下是整个代码文件：

/*--------------------------------------------------------------------------jq-idealforms 2.1* Author: Cedric Ruiz* License: GPL or MIT* Demo: http://elclanrs.github.com/jq-idealforms/*
--------------------------------------------------------------------------*/;(function ( $, window, document, undefined ) {'use strict';// Global Ideal Forms namespace$.idealforms = {}$.idealforms.filters = {}$.idealforms.errors = {}$.idealforms.flags = {}$.idealforms.ajaxRequests = {}/*--------------------------------------------------------------------------*//*** @namespace A chest for various Utils*/
var Utils = {/*** Get width of widest element in the collection.* @memberOf Utils* @param {jQuery object} $elms* @returns {number}*/getMaxWidth: function( $elms ) {var maxWidth = 0$elms.each(function() {var width = $(this).outerWidth()if ( width > maxWidth ) {maxWidth = width}})return maxWidth},/*** Hacky way of getting LESS variables* @memberOf Utils* @param {string} name The name of the LESS class.* @param {string} prop The css property where the data is stored.* @returns {number, string}*/getLessVar: function( name, prop ) {var value = $('<p class="' + name + '"></p>').hide().appendTo('body').css( prop )$('.' + name).remove()return ( /^\d+/.test( value ) ? parseInt( value, 10 ) : value )},/*** Like ES5 Object.keys*/getKeys: function( obj ) {var keys = []for(var key in obj) {if ( obj.hasOwnProperty( key ) ) {keys.push( key )}}return keys},// Get lenght of an objectgetObjSize: function( obj ) {var size = 0, key;for ( key in obj ) {if ( obj.hasOwnProperty( key ) ) {size++;}}return size;},isFunction: function( obj ) {return typeof obj === 'function'},isRegex: function( obj ) {return obj instanceof RegExp},isString: function( obj ) {return typeof obj === 'string'},getByNameOrId: function( str ) {var $el = $('[name="'+ str +'"]').length? $('[name="'+ str +'"]') // by name: $('#'+ str) // by idreturn $el.length? $el: $.error('The field "'+ str + '" doesn\'t exist.')},getFieldsFromArray: function( fields ) {var f = []for ( var i = 0, l = fields.length; i < l; i++ ) {f.push( Utils.getByNameOrId( fields[i] ).get(0) )}return $( f )},convertToArray: function( obj ) {return Object.prototype.toString.call( obj ) === '[object Array]'? obj : [ obj ]},/*** Determine type of any Ideal Forms element* @param $input jQuery $input object*/getIdealType: function( $el ) {var type = $el.attr('type') || $el[0].tagName.toLowerCase()return (/(text|password|email|number|search|url|tel|textarea)/.test( type ) && 'text' ||/file/.test( type ) && 'file' ||/select/.test( type ) && 'select' ||/(radio|checkbox)/.test( type ) && 'radiocheck' ||/(button|submit|reset)/.test( type ) && 'button' ||/h\d/.test( type ) && 'heading' ||/hr/.test( type ) && 'separator' ||/hidden/.test( type ) && 'hidden')},/*** Generates an input* @param name `name` attribute of the input* @param type `type` or `tagName` of the input*/makeInput: function( name, value, type, list, placeholder ) {var markup, items = [], item, i, lenfunction splitValue( str ) {var item, value, arrif ( /::/.test( str ) ) {arr = str.split('::')item = arr[ 0 ]value = arr[ 1 ]} else {item = value = str}return { item: item, value: value }}// Text & fileif ( /^(text|password|email|number|search|url|tel|file|hidden)$/.test(type) )markup = '<input '+'type="'+ type +'" '+'id="'+ name +'" '+'name="'+ name +'" '+'value="'+ value +'" '+(placeholder && 'placeholder="'+ placeholder +'"') +'/>'// Textareaif ( /textarea/.test( type ) ) {markup = '<textarea id="'+ name +'" name="'+ name +'" value="'+ value +'"></textarea>'}// Selectif ( /select/.test( type ) ) {items = []for ( i = 0, len = list.length; i < len; i++ ) {item = splitValue( list[ i ] ).itemvalue = splitValue( list[ i ] ).valueitems.push('<option value="'+ value +'">'+ item +'</option>')}markup ='<select id="'+ name +'" name="'+ name +'">'+items.join('') +'</select>'}// Radiocheckif ( /(radio|checkbox)/.test( type ) ) {items = []for ( i = 0, len = list.length; i < len; i++ ) {item = splitValue( list[ i ] ).itemvalue = splitValue( list[ i ] ).valueitems.push('<label>'+'<input type="'+ type +'" name="'+ name +'" value="'+ value +'" />'+item +'</label>')}markup = items.join('')}return markup}
}/*** Custom tabs for Ideal Forms*/
$.fn.idealTabs = function (container) {var// Elements$contents = this,$container = container,$wrapper = $('<ul class="ideal-tabs-wrap"/>'),$tabs = (function () {var tabs = []$contents.each(function () {var name = $(this).attr('name')var html ='<li class="ideal-tabs-tab">'+'<span>' + name + '</span>'+'<i class="ideal-tabs-tab-counter ideal-tabs-tab-counter-zero">0</i>'+'</li>'tabs.push(html)})return $(tabs.join(''))}()),Actions = {getCurIdx: function () {return $tabs.filter('.ideal-tabs-tab-active').index()},getTabIdxByName: function (name) {var re = new RegExp(name, 'i')var $tab = $tabs.filter(function () {return re.test($(this).text())})return $tab.index()}},/*** Public methods*/Methods = {/*** Switch tab*/switchTab: function (nameOrIdx) {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()},nextTab: function () {var idx = Actions.getCurIdx() + 1idx > $tabs.length - 1? Methods.firstTab(): Methods.switchTab(idx)},prevTab: function () {Methods.switchTab(Actions.getCurIdx() - 1)},firstTab: function () {Methods.switchTab(0)},lastTab: function () {Methods.switchTab($tabs.length - 1)},updateCounter: function (nameOrIdx, text) {var idx = !isNaN(nameOrIdx) ? nameOrIdx : Actions.getTabIdxByName(name),$counter = $tabs.eq(idx).find('.ideal-tabs-tab-counter')$counter.removeClass('ideal-tabs-tab-counter-zero')if (!text) {$counter.addClass('ideal-tabs-tab-counter-zero')}$counter.html(text)}}// Attach methodsfor (var m in Methods)$contents[m] = Methods[m]// Init$tabs.first().addClass('ideal-tabs-tab-active').end().click(function () {var name = $(this).text()$contents.switchTab(name)})// Insert in DOM & Events$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() // Start freshreturn $contents}/*** A custom <select> menu jQuery plugin* @example `$('select').idealSelect()`*/
$.fn.idealSelect = function () {return this.each(function () {var$select = $(this),$options = $select.find('option')/*** Generate markup and return elements of custom select* @memberOf $.fn.toCustomSelect* @returns {object} All elements of the new select replacement*/var idealSelect = (function () {var$wrap = $('<ul class="ideal-select '+ $select.attr('name') +'"/>'),$menu = $('<li><span class="ideal-select-title">' +$options.filter(':selected').text() +'</span></li>'),items = (function () {var items = []$options.each(function () {var $this = $(this)items.push('<li class="ideal-select-item">' + $this.text() + '</li>')})return items}())$menu.append('<ul class="ideal-select-sub">' + items.join('') + '</ul>')$wrap.append($menu)return {select: $wrap,title: $menu.find('.ideal-select-title'),sub: $menu.find('.ideal-select-sub'),items: $menu.find('.ideal-select-item')}}())/*** @namespace Methods of custom select* @memberOf $.fn.toCustomSelect*/var Actions = {getSelectedIdx: function () {return idealSelect.items.filter('.ideal-select-item-selected').index()},/*** @private*/init: (function () {$select.css({position: 'absolute',left: '-9999px'})idealSelect.sub.hide()idealSelect.select.insertAfter($select)idealSelect.select.css('min-width',Utils.getMaxWidth(idealSelect.items))idealSelect.items.eq($options.filter(':selected').index()).addClass('ideal-select-item-selected')}()),noWindowScroll: function (e) {if (e.which === 40 || e.which === 38 || e.which === 13) {e.preventDefault()}},// Fix loosing focus when scrolling// and selecting item with keyboardfocusHack: function () {setTimeout(function () {$select.trigger('focus')}, 1)},focus: function () {idealSelect.select.addClass('ideal-select-focus')$(document).on('keydown.noscroll', Actions.noWindowScroll)},blur: function () {idealSelect.select.removeClass('ideal-select-open ideal-select-focus')$(document).off('.noscroll')},scrollIntoView: function (dir) {var$selected = idealSelect.items.filter('.ideal-select-item-selected'),itemHeight = idealSelect.items.outerHeight(),menuHeight = idealSelect.sub.outerHeight(),isInView = (function () {// relative position to the submenuvar elPos = $selected.position().top + itemHeightreturn dir === 'down'? elPos <= menuHeight: elPos > 0}())if (!isInView) {itemHeight = (dir === 'down')? itemHeight // go down: -itemHeight // go upidealSelect.sub.scrollTop(idealSelect.sub.scrollTop() + itemHeight)}},scrollToItem: function () {var idx = Actions.getSelectedIdx(),height = idealSelect.items.outerHeight(),nItems = idealSelect.items.length,allHeight = height * nItems,curHeight = height * (nItems - idx)idealSelect.sub.scrollTop(allHeight - curHeight)},showMenu: function () {idealSelect.sub.fadeIn('fast')idealSelect.select.addClass('ideal-select-open')Actions.select(Actions.getSelectedIdx())Actions.scrollToItem()},hideMenu: function () {idealSelect.sub.hide()idealSelect.select.removeClass('ideal-select-open')},select: function (idx) {idealSelect.items.removeClass('ideal-select-item-selected')idealSelect.items.eq(idx).addClass('ideal-select-item-selected')},change: function (idx) {var text = idealSelect.items.eq(idx).text()Actions.select(idx)idealSelect.title.text(text)$options.eq(idx).prop('selected', true)$select.trigger('change')},keydown: function (key) {varidx = Actions.getSelectedIdx(),isMenu = idealSelect.select.is('.ideal-select-menu'),isOpen = idealSelect.select.is('.ideal-select-open')/*** @namespace Key pressed*/var keys = {9: function () { // TABif (isMenu) {Actions.blur()Actions.hideMenu()}},13: function () { // ENTERif (isMenu)isOpen? Actions.hideMenu(): Actions.showMenu()Actions.change(idx)},27: function () { // ESCif (isMenu) Actions.hideMenu()},40: function () { // DOWNif (idx < $options.length - 1) {isOpen? Actions.select(idx + 1): Actions.change(idx + 1)}Actions.scrollIntoView('down')},38: function () { // UPif (idx > 0) {isOpen? Actions.select(idx - 1): Actions.change(idx - 1)}Actions.scrollIntoView('up')},'default': function () { // Lettervarletter = String.fromCharCode(key),$matches = idealSelect.items.filter(function () {return /^\w+$/i.test( letter ) && // not allow modifier keys ( ctrl, cmd, meta, super... )new RegExp('^' + letter, 'i').test( $(this).text() ) // find first match}),nMatches = $matches.length,counter = idealSelect.select.data('counter') + 1 || 0,curKey = idealSelect.select.data('key') || key,newIdx = $matches.eq(counter).index()if (!nMatches) // No matchesreturn false// If more matches with same letterif (curKey === key) {if (counter < nMatches) {idealSelect.select.data('counter', counter)}else {idealSelect.select.data('counter', 0)newIdx = $matches.eq(0).index()}}// If new letterelse {idealSelect.select.data('counter', 0)newIdx = $matches.eq(0).index()}if (isOpen)Actions.select(newIdx)elseActions.change(newIdx)idealSelect.select.data('key', key)Actions.scrollToItem()Actions.focusHack()}}keys[key]? keys[key](): keys['default']()}}/*** @namespace Holds all events of custom select for "menu mode" and "list mode"* @memberOf $.fn.toCustomSelect*/var events = {focus: Actions.focus,'blur.menu': function () {Actions.blur()Actions.hideMenu()},'blur.list': function () {Actions.blur()},keydown: function (e) {Actions.keydown(e.which)},'clickItem.menu': function () {Actions.change($(this).index())Actions.hideMenu()},'clickItem.list': function () {Actions.change($(this).index())},'clickTitle.menu': function () {Actions.focus()Actions.showMenu()$select.trigger('focus')},'hideOutside.menu': function () {$select.off('blur.menu')$(document).on('mousedown.ideal', function (evt) {if (!$(evt.target).closest(idealSelect.select).length) {$(document).off('mousedown.ideal')$select.on('blur.menu', events['blur.menu'])} else {Actions.focusHack()}})},'mousedown.list': function () {Actions.focusHack()}}// Reset eventsvar disableEvents = function () {idealSelect.select.removeClass('ideal-select-menu ideal-select-list')$select.off('.menu .list')idealSelect.items.off('.menu .list')idealSelect.select.off('.menu .list')idealSelect.title.off('.menu .list')}// Menu modeidealSelect.select.on('menu', function () {disableEvents()idealSelect.select.addClass('ideal-select-menu')Actions.hideMenu()$select.on({'blur.menu': events['blur.menu'],'focus.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'])})// List modeidealSelect.select.on('list', function () {disableEvents()idealSelect.select.addClass('ideal-select-list')Actions.showMenu()$select.on({'blur.list': events['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) {// Prevent default keydown event// to avoid bugs with Ideal Select eventsif (e.which !== 9) e.preventDefault()})// ResetidealSelect.select.on('reset', function(){Actions.change(0)})idealSelect.select.trigger('menu') // Default to "menu mode"})
}/** idealRadioCheck: jQuery plguin for checkbox and radio replacement* Usage: $('input[type=checkbox], input[type=radio]').idealRadioCheck()*/
$.fn.idealRadioCheck = function() {return this.each(function() {var $this = $(this)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', '') // Fix clicking label in iOS$this.css({ position: 'absolute', left: '-9999px' }) // hide by shifting left// Events$this.on({change: function() {var $this = $(this)if ( $this.is('input[type="radio"]') ) {$this.parent().siblings('label').find('.ideal-radio').removeClass('checked')}$span.toggleClass( 'checked', $this.is(':checked') )},focus: function() { $span.addClass('focus') },blur: function() { $span.removeClass('focus') },click: function() { $(this).trigger('focus') }})})
};(function( $ ) {// Browser supports HTML5 multiple file?var multipleSupport = typeof $('<input/>')[0].multiple !== 'undefined',isIE = /msie/i.test( navigator.userAgent )$.fn.idealFile = function() {return this.each(function() {var $file = $(this).addClass('ideal-file'), // the original file input// label that will be used for IE hack$wrap = $('<div class="ideal-file-wrap">'),$input = $('<input type="text" class="ideal-file-filename" />'),// Button that will be used in non-IE browsers$button = $('<button type="button" class="ideal-file-upload">Open</button>'),// Hack for IE$label = $('<label class="ideal-file-upload" for="'+ $file[0].id +'">Open</label>')// Hide by shifting to the left so we// can still trigger events$file.css({position: 'absolute',left: '-9999px'})$wrap.append( $input, ( isIE ? $label : $button ) ).insertAfter( $file )// Prevent focus$file.attr('tabIndex', -1)$button.attr('tabIndex', -1)$button.click(function () {$file.focus().click() // Open dialog})$file.change(function() {var files = [], fileArr, filename// If multiple is supported then extract// all filenames from the file arrayif ( multipleSupport ) {fileArr = $file[0].filesfor ( var i = 0, len = fileArr.length; i < len; i++ ) {files.push( fileArr[i].name )}filename = files.join(', ')// If not supported then just take the value// and remove the path to just show the filename} else {filename = $file.val().split('\\').pop()}$input.val( filename ) // Set the value.attr( 'title', filename ) // Show filename in title tootlip})$input.on({focus: function () { $file.trigger('change') },blur: function () { $file.trigger('blur') },keydown: function( e ) {if ( e.which === 13 ) { // Enterif ( !isIE ) { $file.trigger('click') }} else if ( e.which === 8 || e.which === 46 ) { // Backspace & Del// On some browsers the value is read-only// with this trick we remove the old input and add// a clean clone with all the original events attached$file.replaceWith( $file = $file.val('').clone( true ) )$file.trigger('change')$input.val('')} else if ( e.which === 9 ){ // TABreturn} else { // All other keysreturn false}}})})}}( jQuery ))/*** @namespace Errors* @locale en*/
$.idealforms.errors = {required: '此处是必填的.',number: '必须是数字.',digits: '必须是唯一的数字.',name: '必须至少有3个字符长，并且只能包含字母.',username: '用户名最短5位,最长30位,请使用英文字母、数字、中文和下划线.用户名首字符必须为字母、数字、中文,不能为全数字.中文最长21个字.',pass: '密码的位数必须的在6-15位之间，并且至少包含一个数字，一个大写字母和一个小写字母.',strongpass: '必须至少为8个字符长，至少包含一个大写字母和一个小写字母和一个数字或特殊字符.',email: '必须是一个有效的email地址. <em>(例: user@gmail.com)</em>',phone: '必须是一个有效的手机号码. <em>(例: 18723101212)</em>',zip: 'Must be a valid US zip code. <em>(e.g. 33245 or 33245-0003)</em>',url: 'Must be a valid URL. <em>(e.g. www.google.com)</em>',minChar: 'Must be at least <strong>{0}</strong> characters long.',minOption: 'Check at least <strong>{0}</strong> options.',maxChar: 'No more than <strong>{0}</strong> characters long.',maxOption: 'No more than <strong>{0}</strong> options allowed.',range: 'Must be a number between {0} and {1}.',date: 'Must be a valid date. <em>(e.g. {0})</em>',dob: 'Must be a valid date of birth.',exclude: '"{0}" is not available.',excludeOption: '{0}',equalto: 'Must be the same value as <strong>"{0}"</strong>',extension: 'File(s) must have a valid extension. <em>(e.g. "{0}")</em>',ajaxSuccess: '<strong>{0}</strong> is not available.',ajaxError: 'Server error...'}/*** Get all default filters* @returns object*/
var getFilters = function() {var filters = {required: {regex: /.+/,error: $.idealforms.errors.required},number: {regex: function( i, v ) { return !isNaN(v) },error: $.idealforms.errors.number},digits: {regex: /^\d+$/,error: $.idealforms.errors.digits},name: {regex: /^[A-Za-z]{3,}$/,error: $.idealforms.errors.name},username: {regex: /^[a-z](?=[\w.]{4,30}$)\w*\.?\w*$/i,error: $.idealforms.errors.username},pass: {regex: /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/,error: $.idealforms.errors.pass},strongpass: {regex: /(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$/,error: $.idealforms.errors.strongpass},email: {regex: /^([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})?$/,error: $.idealforms.errors.email},phone: {//regex: /^((13[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\\d{8}$/,regex: /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/,error: $.idealforms.errors.phone},zip: {regex: /^\d{5}$|^\d{5}-\d{4}$/,error: $.idealforms.errors.zip},url: {regex: /^(?:(ftp|http|https):\/\/)?(?:[\w\-]+\.)+[a-z]{2,6}([\:\/?#].*)?$/i,error: $.idealforms.errors.url},min: {regex: function( input, value ) {var $input = input.input,min = input.userOptions.data.min,isRadioCheck = $input.is('[type="checkbox"], [type="radio"]')if ( isRadioCheck ) {this.error = $.idealforms.errors.minOption.replace( '{0}', min )return $input.filter(':checked').length >= min}this.error = $.idealforms.errors.minChar.replace( '{0}', min )return value.length >= min}},max: {regex: function( input, value ) {var $input = input.input,max = input.userOptions.data.max,isRadioCheck = $input.is('[type="checkbox"], [type="radio"]')if ( isRadioCheck ) {this.error = $.idealforms.errors.maxOption.replace( '{0}', max )return $input.filter(':checked').length <= max}this.error = $.idealforms.errors.maxChar.replace( '{0}', max )return value.length <= max}},range: {regex: function( input, value ) {var range = input.userOptions.data.range,val = +valuethis.error = $.idealforms.errors.range.replace( '{0}', range[0] ).replace( '{1}', range[1] )return val >= range[0] && val <= range[1]}},date: {regex: function( input, value ) {varuserFormat =input.userOptions.data && input.userOptions.data.date? input.userOptions.data.date: 'mm/dd/yyyy', // default formatdelimiter = /[^mdy]/.exec( userFormat )[0],theFormat = userFormat.split(delimiter),theDate = value.split(delimiter),isDate = function( date, format ) {var m, d, yfor ( var i = 0, len = format.length; i < len; i++ ) {if ( /m/.test( format[i]) ) m = date[i]if ( /d/.test( format[i]) ) d = date[i]if ( /y/.test( format[i]) ) y = date[i]}return (m > 0 && m < 13 &&y && y.length === 4 &&d > 0 && d <= ( new Date( y, m, 0 ) ).getDate())}this.error = $.idealforms.errors.date.replace( '{0}', userFormat )return isDate( theDate, theFormat )}},dob: {regex: function( input, value ) {varuserFormat =input.userOptions.data && input.userOptions.data.dob? input.userOptions.data.dob: 'mm/dd/yyyy', // default format// Simulate a date inputdateInput = {input: input.input,userOptions: {data: { date: userFormat }}},// Use internal date filter to validate the dateisDate = filters.date.regex( dateInput, value ),// DOBtheYear = /\d{4}/.exec( value ),maxYear = new Date().getFullYear(), // Current yearminYear = maxYear - 100this.error = $.idealforms.errors.dobreturn isDate && theYear >= minYear && theYear <= maxYear}},exclude: {regex: function( input, value ) {var $input = input.input,exclude = input.userOptions.data.exclude,isOption = $input.is('[type="checkbox"], [type="radio"], select')this.error = isOption? $.idealforms.errors.excludeOption.replace( '{0}', value ): this.error = $.idealforms.errors.exclude.replace( '{0}', value )return $.inArray( value, exclude ) === -1}},equalto: {regex: function( input, value ) {var $equals = $( input.userOptions.data.equalto ),$input = input.input,name = $equals.attr('name') || $equals.attr('id'),isValid = $equals.parents('.ideal-field').filter(function(){ return $(this).data('ideal-isvalid') === true }).lengthif ( !isValid ) { return false }this.error = $.idealforms.errors.equalto.replace( '{0}', name )return $input.val() === $equals.val()}},extension: {regex: function( input, value ) {var files = input.input[0].files || [{ name: value }],extensions = input.userOptions.data.extension,re = new RegExp( '\\.'+ extensions.join('|') +'$', 'i' ),valid = falsefor ( var i = 0, len = files.length; i < len; i++ ) {valid = re.test( files[i].name );}this.error = $.idealforms.errors.extension.replace( '{0}', extensions.join('", "') )return valid}},ajax: {regex: function( input, value, showOrHideError ) {var self = thisvar $input = input.inputvar userOptions = input.userOptionsvar name = $input.attr('name')var $field = $input.parents('.ideal-field')var valid = falsevar customErrors = userOptions.errors && userOptions.errors.ajaxself.error = {}self.error.success = customErrors && customErrors.success? customErrors.success: $.idealforms.errors.ajaxSuccess.replace( '{0}', value )self.error.fail = customErrors && customErrors.error? customErrors.error: $.idealforms.errors.ajaxError// Send input name as $_POST[name]var data = {}data[ name ] = $.trim( value )// Ajax options defined by the uservar userAjaxOps = input.userOptions.data.ajaxvar ajaxOps = {type: 'post',dataType: 'json',data: data,success: function( resp, text, xhr ) {console.log(resp)showOrHideError( self.error.success, true )$input.data({'ideal-ajax-resp': resp,'ideal-ajax-error': self.error.success})$input.trigger('change') // to update counter$field.removeClass('ajax')// Run custom success callbackif( userAjaxOps._success ) {userAjaxOps._success( resp, text, xhr )}},error: function( xhr, text, error ) {if ( text !== 'abort' ) {showOrHideError( self.error.fail, false )$input.data( 'ideal-ajax-error', self.error.fail )$field.removeClass('ajax')// Run custom error callbackif ( userAjaxOps._error ) {userAjaxOps._error( xhr, text, error )}}}}$.extend( ajaxOps, userAjaxOps )// Init$input.removeData('ideal-ajax-error')$input.removeData('ideal-ajax-resp')$field.addClass('ajax')// Run request and save it to be able to abort it// so requests don't bubble$.idealforms.ajaxRequests[ name ] = $.ajax( ajaxOps )}}}return filters}$.idealforms.flags = {noerror: function (i) {i.parent().siblings('.ideal-error').hide()},noicons: function (i) {i.siblings('.ideal-icon-valid, .ideal-icon-invalid').hide()},novalidicon: function (i) {i.siblings('.ideal-icon-valid').hide()},noinvalidicon: function (i) {i.siblings('.ideal-icon-invalid').hide()},noclass: function (i) {i.parents('.ideal-field').removeClass('valid invalid')},novalidclass: function (i) {i.parents('.ideal-field').removeClass('valid')},noinvalidclass: function (i) {i.parents('.ideal-field').removeClass('invalid')}
}/** Ideal Forms plugin*/
var _defaults = {inputs: {},customFilters: {},customFlags: {},globalFlags: '',onSuccess: function(e) { alert('Thank you...') },onFail: function() { alert('Invalid!') },responsiveAt: 'auto',disableCustom: ''
}// Constructor
var IdealForms = function( element, options ) {var self = thisself.$form = $( element )self.opts = $.extend( {}, _defaults, options )self.$tabs = self.$form.find('section')// Set localized filters$.extend( $.idealforms.filters, getFilters() )self._init()}// Plugin
$.fn.idealforms = function( options ) {return this.each(function() {if ( !$.data( this, 'idealforms' ) ) {$.data( this, 'idealforms', new IdealForms( this, options ) )}})
}// Get LESS variables
var LessVars = {fieldWidth: Utils.getLessVar( 'ideal-field-width', 'width' )
}/** Private Methods*/
$.extend( IdealForms.prototype, {_init: function() {var self = thisvar o = self.optsvar formElements = self._getFormElements()self.$form.css( 'visibility', 'visible' ).addClass('ideal-form').attr( 'novalidate', 'novalidate' ) // disable HTML5 validation// Do markupformElements.inputs.add( formElements.headings ).add( formElements.separators ).each(function(){ self._doMarkup( $(this) ) })// Generate tabsif ( self.$tabs.length ) {var $tabContainer = $('<div class="ideal-wrap ideal-tabs ideal-full-width"/>')self.$form.prepend( $tabContainer )self.$tabs.idealTabs( $tabContainer )}// Always show datepicker below the inputif ( jQuery.ui ) {$.datepicker._checkOffset = function( a,b,c ) { return b }}// Add inputs specified by data-ideal// to the list of user inputsself.$form.find('[data-ideal]').each(function() {var userInput = o.inputs[ this.name ]o.inputs[ this.name ] = userInput || { filters: $(this).data('ideal') }})// Responsiveif ( o.responsiveAt ) {$(window).resize(function(){ self._responsive() })self._responsive()}// Form eventsself.$form.on({keydown: function( e ) {// Prevent submit when pressing enter// but exclude textareasif ( e.which === 13 && e.target.nodeName !== 'TEXTAREA' ) {e.preventDefault()}},submit: function( e ) {if ( !self.isValid() ) {e.preventDefault()o.onFail()self.focusFirstInvalid()} else {o.onSuccess( e )}}})self._adjust()self._attachEvents()self.fresh() // Start fresh},_getFormElements: function() {return {inputs: this.$form.find('input, select, textarea, :button'),labels: this.$form.find('div > label:first-child'),text: this.$form.find('input:not([type="checkbox"], [type="radio"], [type="submit"]), textarea'),select: this.$form.find('select'),radiocheck: this.$form.find('input[type="radio"], input[type="checkbox"]'),buttons: this.$form.find(':button'),file: this.$form.find('input[type="file"]'),headings: this.$form.find('h1, h2, h3, h4, h5, h6'),separators: this.$form.find('hr'),hidden: this.$form.find('input:hidden')}},_getUserInputs: function() {return this.$form.find('[name="'+ Utils.getKeys( this.opts.inputs ).join('"], [name="') +'"]')},_getTab: function( nameOrIdx ) {var self = thisvar isNumber = !isNaN( nameOrIdx )if ( isNumber ) {return self.$tabs.eq( nameOrIdx )}return self.$tabs.filter(function() {var re = new RegExp( nameOrIdx, 'i' )return re.test( $(this).data('ideal-tabs-content-name') )})},_getCurrentTabIdx: function() {return this.$tabs.index( this.$form.find('.ideal-tabs-content:visible') )},_updateTabsCounter: function() {var self = thisself.$tabs.each(function( i ) {var invalid = self.getInvalidInTab( i ).lengthself.$tabs.updateCounter( i, invalid )})},_adjust: function() {var self = thisvar o = self.optsvar formElements = self._getFormElements()var curTab = self._getCurrentTabIdx()// Autocomplete causes some problems...formElements.inputs.attr('autocomplete', 'off')// Show tabs to calculate dimensionsif ( self.$tabs.length ) { self.$tabs.show() }// Adjust labelsvar labels = formElements.labelslabels.removeAttr('style').width( Utils.getMaxWidth( labels ) )// Adjust headings and separatorsif ( 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()// Done calculating hide tabsif ( self.$tabs.length ) {self.$tabs.hide()self.switchTab( curTab )}},_setDatepicker: function() {var o = this.optsvar $datepicker = this.$form.find('input.datepicker')if ( jQuery.ui && $datepicker.length ) {$datepicker.each(function() {var userInput = o.inputs[ this.name ]var data = userInput && userInput.data && userInput.data.datevar format = data ? data.replace( 'yyyy', 'yy' ) : 'mm/dd/yy'$(this).datepicker({dateFormat: format,beforeShow: function( input ) {$( input ).addClass('open')},onChangeMonthYear: function() {// Hack to fix IE9 not resizingvar $this = $(this)var w = $this.outerWidth() // cache first!setTimeout(function() {$this.datepicker('widget').css( 'width', w )}, 1)},onClose: function() { $(this).removeClass('open') }})})// Adjust width$datepicker.on('focus keyup', function() {var t = $(this), w = t.outerWidth()t.datepicker('widget').css( 'width', w )})$datepicker.parent().siblings('.ideal-error').addClass('hidden')}},_doMarkup: function( $element ) {var o = this.optsvar elementType = Utils.getIdealType( $element )// Validation elementsvar $field = $('<span class="ideal-field"/>')var $error = $('<span class="ideal-error" />')var $valid = $('<i class="ideal-icon ideal-icon-valid" />')var $invalid = $('<i class="ideal-icon ideal-icon-invalid"/>').click(function(){$(this).parent().find('input:first, textarea, select').focus()})// Basic markup$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 )},text: function() { idealElements._defaultInput() },radiocheck: function() {// Check if input is already wrapped so we don't// wrap radios and checks more than oncevar isWrapped = $element.parents('.ideal-field').lengthif ( !isWrapped ) {$element.parent().nextAll().andSelf().wrapAll( $field.addClass('ideal-radiocheck') )$element.parents('.ideal-field').append( $valid, $invalid ).after( $error )}if ( !/radiocheck/.test( o.disableCustom ) ) {$element.idealRadioCheck()}},select: function() {idealElements._defaultInput()if ( !/select/.test( o.disableCustom ) ) {$element.idealSelect()}},file: function() {idealElements._defaultInput()if ( !/file/.test( o.disableCustom ) ) {$element.idealFile()}},button: function() {if ( !/button/.test( o.disableCustom ) ) {$element.addClass('ideal-button')}},hidden: function() {$element.closest('div').addClass('ideal-hidden')},heading: function() {$element.closest('div').addClass('ideal-full-width')$element.parent().children().wrapAll('<span class="ideal-heading"/>')},separator: function() {$element.closest('div').addClass('ideal-full-width')$element.wrapAll('<div class="ideal-separator"/>')}}// Generate markup for current element typeidealElements[ elementType ] ? idealElements[ elementType ]() : $.noop()$error.add( $valid ).add( $invalid ).hide() // Start fresh},/** Validates an input and shows or hides error and icon* @memberOf Actions* @param {object} $input jQuery object* @param {string} e The JavaScript event*/_validate: function( $input, e ) {var self = thisvar o = this.optsvar userOptions = o.inputs[ $input.attr('name') ]var userFilters = userOptions.filters && userOptions.filters.split(/\s/)var name = $input.attr('name')var value = $input.val()var ajaxRequest = $.idealforms.ajaxRequests[ name ]var isRadioCheck = $input.is('[type="checkbox"], [type="radio"]')var inputData = {// If is radio or check validate all inputs related by nameinput: isRadioCheck ? self.$form.find('[name="' + name + '"]') : $input,userOptions: userOptions}// Validation elementsvar $field = $input.parents('.ideal-field')var $error = $field.siblings('.ideal-error')var $invalid = isRadioCheck? $input.parent().siblings('.ideal-icon-invalid'): $input.siblings('.ideal-icon-invalid')var $valid = isRadioCheck? $input.parent().siblings('.ideal-icon-valid'): $input.siblings('.ideal-icon-valid')function resetError() {$field.removeClass('valid invalid').removeData('ideal-isvalid')$error.add( $invalid ).add( $valid ).hide()}function showOrHideError( error, valid ) {resetError()valid ? $valid.show() : $invalid.show()$field.addClass( valid ? 'valid' : 'invalid' )$field.data( 'ideal-isvalid', valid )if ( !valid ) {$error.html( error ).toggle( $field.is('.ideal-field-focus') )}}// Prevent validation when typing but not introducing any new characters// This is mainly to prevent multiple AJAX requestsvar oldValue = $input.data('ideal-value') || 0$input.data( 'ideal-value', value )if ( e.type === 'keyup' && value === oldValue ) { return false }// Validateif ( userFilters ) {$.each( userFilters, function( i, filter ) {var theFilter = $.idealforms.filters[ filter ]var customError = userOptions.errors && userOptions.errors[ filter ]var error = ''// If field is empty and not requiredif ( !value && filter !== 'required' ) {resetError()return false}if ( theFilter ) {// Abort and reset ajax if there's a request pendingif ( e.type === 'keyup' && ajaxRequest ) {ajaxRequest.abort()$field.removeClass('ajax')}// AJAXif ( filter === 'ajax' ) {showOrHideError( error, false ) // set invalid till response comes back$error.hide()if ( e.type === 'keyup' ) {theFilter.regex( inputData, value, showOrHideError ) // runs the ajax callback} else {var ajaxError = $input.data('ideal-ajax-error')if ( ajaxError ) {showOrHideError( ajaxError, $input.data('ideal-ajax-resp') || false )}}}// All other filterselse {var valid = Utils.isRegex( theFilter.regex ) && theFilter.regex.test( value ) ||Utils.isFunction( theFilter.regex ) && theFilter.regex( inputData, value )error = customError || theFilter.error // assign error after calling regex()showOrHideError( error, valid )if ( !valid ) { return false }}}})}// Reset if there are no filterselse {resetError()}// Flagsvar flags = (function(){var f = userOptions.flags && userOptions.flags.split(' ') || []if ( o.globalFlags ) {$.each( o.globalFlags.split(' '), function( i,v ) { f.push(v) })}return f}())if ( flags.length ) {$.each(flags, function( i,f ) {var theFlag = $.idealforms.flags[f]if ( theFlag ) { theFlag( $input, e.type ) }})}// Update counterif ( self.$tabs.length ) {self._updateTabsCounter( self._getCurrentTabIdx() )}},_attachEvents: function() {var self = thisself._getUserInputs().on('keyup change focus blur', function(e) {var $this = $(this)var $field = $this.parents('.ideal-field')var isFile = $this.is('input[type=file]')// Trigger on change if type=file cuz custom file// disables focus on original file input (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 )})},_responsive: function() {var formElements = this._getFormElements()var maxWidth = LessVars.fieldWidth + formElements.labels.outerWidth()var $emptyLabel = formElements.labels.filter(function() {return $(this).html() === ' '})var $customSelect = this.$form.find('.ideal-select')this.opts.responsiveAt === 'auto'? this.$form.toggleClass( 'stack', this.$form.width() < maxWidth ): this.$form.toggleClass( 'stack', $(window).width() < this.opts.responsiveAt )var isStack = this.$form.is('.stack')$emptyLabel.toggle( !isStack )$customSelect.trigger( isStack ? 'list' : 'menu' )// Hide datePickervar $datePicker = this.$form.find('input.hasDatepicker')if ( $datePicker.length ) { $datePicker.datepicker('hide') }}})/** Public Methods*/
$.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() {return !this.getInvalid().length},isValidField: function( field ) {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').find('input:first, select, textarea').focus()}return this},focusFirstInvalid: function() {var $first = this.getInvalid().first().find('input:first, select, textarea')var tabName = $first.parents('.ideal-tabs-content').data('ideal-tabs-content-name')if ( this.$tabs.length ) {this.switchTab( tabName )}$first.focus()return this},switchTab: function( nameOrIdx ) {this.$tabs.switchTab( nameOrIdx )return this},nextTab: function() {this.$tabs.nextTab()return this},prevTab: function() {this.$tabs.prevTab()return this},firstTab: function() {this.$tabs.firstTab()return this},lastTab: function() {this.$tabs.lastTab()return this},fresh: function() {this._getUserInputs().change().parents('.ideal-field').removeClass('valid invalid')return this},freshFields: function( fields ) {fields = Utils.convertToArray( fields )$.each( fields, function( i ) {var $input = Utils.getByNameOrId( fields[ i ] )$input.change().parents('.ideal-field').removeClass('valid invalid')})return this},reload: function() {this._adjust()this._attachEvents()return this},reset: function() {var formElements = this._getFormElements()formElements.text.val('') // text inputsformElements.radiocheck.removeAttr('checked') // radio & check// Select and custom selectformElements.select.find('option').first().prop( 'selected', true )this.$form.find('.ideal-select').trigger('reset')if ( this.$tabs.length ) { this.firstTab() }this.focusFirst().fresh()return this},resetFields: function( fields ) {fields = Utils.convertToArray( fields )var formElements = this._getFormElements()$.each( fields, function( i, v ) {var $input = Utils.getByNameOrId( v )var type = Utils.getIdealType( $input )if ( type === 'text' || type === 'file' ) {$input.val('')}if ( type === 'radiocheck' ) {$input.removeAttr('checked') // radio & check}if ( type === 'select' ) {$input.find('option').first().prop( 'selected', true )$input.next('.ideal-select').trigger('reset')}$input.change()})this.freshFields( fields )return this},toggleFields: function( fields ) {fields = Utils.convertToArray( fields )var self = thisvar $fields = Utils.getFieldsFromArray( fields )$fields.each(function() {var $this = $(this)var name = $this.attr('name') || $this.attr('id')var input = self.opts.inputs[ name ]var filters = input && input.filtersvar dataFilters = $this.data('ideal-filters') || ''$this.data( 'ideal-filters', filters )$this.closest('.ideal-wrap').toggle()self.setFieldOptions( name, { filters: dataFilters } )})return this},setOptions: function( options ) {$.extend( true, this.opts, options )this.reload().fresh()return this},setFieldOptions: function( name, options ) {$.extend( true, this.opts.inputs[ name ], options )this.reload().freshFields([ name ])return this},addFields: function( fields ) {fields = Utils.convertToArray( fields )var self = this// Save names of all inputs in Array// to use methods that take names ie. fresh()var allNames = []// Add an input to the DOMfunction add( ops ) {var name = ops.namevar userOptions = {filters: ops.filters || '',data: ops.data || {},errors: ops.errors || {},flags: ops.flags || ''}var label = ops.label || ''var type = ops.typevar list = ops.list || []var placeholder = ops.placeholder || ''var value = ops.value || ''var $field = $('<div>'+'<label>'+ label +':</label>'+Utils.makeInput( name, value, type, list, placeholder ) +'</div>')var $input = $field.find('input, select, textarea, :button')// Add inputs with filters to the list// of user inputs to validateif ( userOptions.filters ) { self.opts.inputs[ name ] = userOptions }self._doMarkup( $input )// Insert in DOMif ( ops.addAfter ) {$field.insertAfter($( Utils.getByNameOrId( ops.addAfter ) ).parents('.ideal-wrap'))} else if ( ops.addBefore ) {$field.insertBefore($(Utils.getByNameOrId( ops.addBefore )).parents('.ideal-wrap'))} else if ( ops.appendToTab ) {$field.insertAfter(self._getTab( ops.appendToTab ).find('.ideal-wrap:last-child'))} else {$field.insertAfter( self.$form.find('.ideal-wrap').last() )}// Add current field name to list of namesallNames.push( name )}// Run through each input$.each( fields, function( i, ops ) { add( ops ) })self.reload()self.freshFields( allNames )self._responsive()return this},removeFields: function( fields ) {fields = Utils.convertToArray( fields )var $fields = Utils.getFieldsFromArray( fields )$fields.parents('.ideal-wrap').remove()this.reload()return this}})}( jQuery, window, document ))

Html5用户注册自动校验相关推荐

用户注册页面的设计与实现
用户注册页面的设计与实现功能介绍: 1.使用HTML5表单技术实现用户注册页面,要求用户可以输入用户名.密码.真实姓名和电子邮箱等信息进行注册. 2.验证要求:每个输入栏目的文本框均需要显示提示信息 ...
html登录注册的正则,怎么用html5编写用户注册验证程序
满意答案 1 第一步:用户注册界面制作在制作用户界面的时候我们得考虑需要哪些元素,一般情况下我们可能只要3种元素:账号(user).密码(password)还有用来取回密码的邮箱(email)或其它认 ...
【HTML5表单API项目】用户注册页面的设计与实现
用户注册页面的设计与实现功能要求:使用H5表单技术实现用户注册页面,要求可以输入用户名,密码,真实姓名,电子邮箱等信息进行注册. 验证要求:每个输入栏目的文本框均需要显示提示信息,用户在单击按钮提交 ...
用户注册登录页面实例 web前端开发HTML5 JavaScript css
根据清华大学出版社的HTML5网页前端设计实战课后实战代码与注释如下 <!doctype html> <html> <head> <meta charset ...
html5好看的注册页面设计,Material Design风格用户注册登录界面设计
这是一款Material Design风格用户注册登录界面设计效果.该设计由用户登录,用户注册和忘记密码三个界面组成.设计中的所有元素都以Material Design为基础,整体效果时尚大方. 使用 ...
HTML5网页设计基础——用户注册界面
案例: 代码: <!doctype html> <html> <head> <meta charset="utf-8"> <t ...
Netty+SpringBoot+FastDFS+Html5实现聊天App
Netty+SpringBoot+FastDFS+Html5实现聊天App github链接: https://github.com/ShimmerPig... 已将前端代码上传至github,修改a ...
html5+css3网页设计与网站布局从新手到高手,HTML5+CSS3网页设计与网站布局从新手到高手...
HTML5+CSS3网页设计与网站布局从新手到高手语音编辑锁定讨论上传视频 <从新手到高手:HTML 5+CSS 3网页设计与网站布局从新手到高手>是2013年1月清华大学出版社 ...
html5 数据验证,【译】表单数据校验
当你需要经常在服务器上校验数据时,在Web页面上的另加校验就有诸多好处.多数情况下,用户会被表单惹恼.而当用户填完表单时就校验数据,既有助于用户立即发现他们犯的错误,也能减少等待HTTP响应的时间.并 ...

Html5用户注册自动校验

Html5用户注册自动校验相关推荐

最新文章

热门文章