抽时间写了一个带有自动校验功能的html5用户注册demo。使用到handlebars模板技术和手机验证码校验。
以下是效果截图：
1.页面代码：ursregister.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; chart=utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge" /><title>用户注册</title><!--[if lt ie 9]><script src="/asts/scripts/html5shiv.js"></script><![endif]--><link href="/asts/styles/jquery.idealforms.min.css" rel="stylesheet" media="screen" /><style type="text北师大自主招生/css">body {font: normal 15px/1.5 arial, helvetica, free sans, sans-rif;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="/asts/scripts/jquery-1.8.2.min.js"></script><script type="text/javascript" src="/asts/scripts/jquery.idealforms.js"></script></head><body><!-- style="background-image: url(static/image/bg.jpg) --><p class="main" ><p style="height：5px;text-align:center;font-size:25px"> 欢迎您注册！</p><!-- begin form --><form id="my-form" class="myform"><p><label>用户名:</label><input id="urname" name="urname" type="text" /></p><p><!-- <label>密码:</label><input id="pass" name="password" type="password" /> --><label>密码:</label><input id="pass" name="password" type="text" /></p><p><label>邮箱:</label><input id="email" name="email"data-ideal="required email" type="email" /></p><p><label>电话:</label><input id="telephone" type="text" name="phone" data-ideal="phone" /></p><p><label>供应商v码:</label><input id="vcode" type="text" name="vcode" data-ideal="vcode" /></p><p><label>真实姓名:</label><input id="truename" type="text" name="truename" data-ideal="truename" /></p><p><label>手机验证码:</label><input id="telcode" type="text" name="telcode" data-ideal="telcode" /></p><p 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;" /></p><!--<p><label>性别:</label><lect id="x" name="x"><option value="男">男</option><option value="女">女</option></lect></p><p><label>昵称:</label><input id="nickname" type="text" name="nickname" data-ideal="nickname" /></p><p><label>年龄:</label><input id="age" type="text" name="age" data-ideal="age" /></p>--><!-- <p><label>地址:</label><input type="text" name="address" data-ideal="address" /></p><p><label>qq:</label><input type="text" name="qq" data-ideal="qq" /></p><p><label>邮编:</label><input type="text" name="zip" data-ideal="zip" /></p><p><label>传真:</label><input type="text" name="fax" data-ideal="fax" /></p><p><label>身份证:</label><input type="text" name="creditid" data-ideal="creditid" /></p><p><label>出生日期:</label><input name="date" class="datepicker"data-ideal="date" type="text" placeholder="月/日/年" /></p><p><label>上传头像:</label><input id="file" name="file" multipletype="file" /></p><p><label>个人主页:</label><input name="website" data-ideal="url"type="text" /></p><p><label>备注:</label><textarea id="comments" name="comments"></textarea></p>--><!-- <p id="languages"><label>语言:</label> <label><input type="checkbox"name="langs[]" value="english" />英文</label> <label><inputtype="checkbox" name="langs[]" value="chine" />中文</label> <label><inputtype="checkbox" name="langs[]" value="spanish" />西班牙文</label> <label><inputtype="checkbox" name="langs[]" value="french" />法文</label></p><p><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></p><p><label>国籍:</label> <lect 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></lect></p> --><p style="margin-top:10px; margin-left:100px;margin-right:100px;"><button type="button" id="submit" class="submit">提交</button><button id="ret" type="button" >重置</button></p></form><!-- end form --></p><script type="text/javascript">var options = {onfail : function() {alert($myform.getinvalid().length + ' invalid fields.')},inputs : {'password' : {filters : 'required pass'},'urname' : {filters : 'required urname'},'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("手机号码不能为空!");}el{$.ajax({type : "get",datatype : "json",url : "../api/gettelcode?telephone="1米等于多少千米+ telephone,success : function(msg) {},error : function(e) {alert("获取手机校验码失败！" + e);}});}});var $myform = $('#my-form').idealforms(options).data('idealforms');$('#submit').click(function() {var urname = document.getelementbyid("urname").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/ursregister?urname="+ urname +"&password="+ password +"&email="+ email +"&telephone="+ telephone +"&vcode="+ vcode +"&telcode="+ telcode +"&truename="+ truename,success : function(msg) {//获取当前网址，如： https://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);//获取主机地址，如： https://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);}});});$('#ret').click(function() {$myform.ret().fresh().focusfirst();});</script></body></html>2.jq输入校验：jquery.idealforms.js
该js校验初始版本来自cedric ruiz，我略有修改。
部分校验的规则如下：
required: '此处是必填的.',number: '必须是数字.',digits: '必须是唯一的数字.',name: '必须至少有3个字符长，并且只能包含字母.',urname: '用户名最短5位,最长30位,请使用英文字母、数字、中文和下划线. 用户名首字符必须为字母、数字、中文,不能为全数字.中文最长21个字.',pass: '密码的位数必须的在6-15位之间，并且至少包含一个数字，一个大写字母和一个小写字母.',strongpass: '必须至少为8个字符长，至少包含一个大写字母和一个小写字母和一个数字或特殊字符.',email: '必须是一个有效的email地址. (例: ur@gmail.com)',phone: '必须是一个有效的手机号码. (例: 18723101212)'
以下是整个代码文件：
/*--------------------------------------------------------------------------jq-idealforms 2.1* author: cedric ruiz* licen: gpl or mit* demo: https://elclanrs.github.com/jq-idealforms/*--------------------------------------------------------------------------*/;(function ( $, window, document, undefined ) {'u 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 ) ? parint( 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.tolowerca()return (/(text|password|email|number|arch|url|tel|textarea)/.test( type ) && 'text' ||/file/.test( type ) && 'file' ||/lect/.test( type ) && 'lect' ||/(radio|checkbox)/.test( type ) && 'radiocheck' ||/(button|submit|ret)/.test( type ) && 'button' ||/h\d/.test( type ) && 'heading' ||/hr/.test( type ) && 'parator' ||/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 ]} el {item = value = str}return { item: item, value: value }}// text & fileif ( /^(text|password|email|number|arch|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>'}// lectif ( /lect/.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 ='<lect id="'+ name +'" name="'+ name +'">'+items.join('') +'</lect>'}// 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)})// inrt 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 <lect> menu jquery plugin* @example `$('lect').ideallect()`*/$.fn.ideallect = function () {return this.each(function () {var$lect = $(this),$options = $lect.find('option')/*** generate markup and return elements of custom lect* @memberof $.fn.tocustomlect* @returns {object} all elements of the new lect replacement*/var ideallect = (function () {var$wrap = $('<ul class="ideal-lect '+ $lect.attr('name') +'"/>'),$menu = $('<li><span class="ideal-lect-title">' +$options.filter(':lected').text() +'</span></li>'),items = (function () {var items = []$options.each(function () {var $this = $(this)items.push('<li class="ideal-lect-item">' + $this.text() + '</li>')})return items}())$menu.append('<ul class="ideal-lect-sub">' + items.join('') + '</ul>')$wrap.append($menu)return {lect: $wrap,title: $menu.find('.ideal-lect-title'),sub: $menu.find('.ideal-lect-sub'),items: $menu.find('.ideal-lect-item')}}())/*** @namespace methods of custom lect* @memberof $.fn.tocustomlect*/var actions = {getlectedidx: function () {return ideallect.items.filter('.ideal-lect-item-lected').index()},/*** @private*/init: (function () {$lect.css({position: 'absolute',left: '-9999px'})ideallect.sub.hide()ideallect.lect.inrtafter($lect)ideallect.lect.css('min-width',utils.getmaxwidth(ideallect.items))ideallect.items.eq($options.filter(':lected').index()).addclass('ideal-lect-item-lected')}()),nowindowscroll: function (e) {if (e.which === 40 || e.which === 38 || e.which === 13) {e.preventdefault()}},// fix loosing focus when scrolling// and lecting item with keyboardfocushack: function () {ttimeout(function () {$lect.trigger('focus')}, 1)},focus: function () {ideallect.lect.addclass('ideal-lect-focus')$(document).on('keydown.noscroll', actions.nowindowscroll)},blur: function () {ideallect.lect.removeclass('ideal-lect-open ideal-lect-focus')$(document).off('.noscroll')},scrollintoview: function (dir) {var$lected = ideallect.items.filter('.ideal-lect-item-lected'),itemheight = ideallect.items.outerheight(),menuheight = ideallect.sub.outerheight(),isinview = (function () {// relative position to the submenuvar elpos = $lected.position().top + itemheightreturn dir === 'down'? elpos <= menuheight: elpos > 0}())if (!isinview) {itemheight = (dir === 'down')? itemheight // go down: -itemheight // go upideallect.sub.scrolltop(ideallect.sub.scrolltop() + itemheight)}},scrolltoitem: function () {var idx = actions.getlectedidx(),height = ideallect.items.outerheight(),nitems = ideallect.items.length,allheight = height * nitems,curheight = height * (nitems - idx)ideallect.sub.scrolltop(allheight - curheight)},showmenu: function () {ideallect.sub.fadein('fast')ideallect.lect.addclass('ideal-lect-open')actions.lect(actions.getlectedidx())actions.scrolltoitem()},hidemenu: function () {ideallect.sub.hide()ideallect.lect.removeclass('ideal-lect-open')},lect: function (idx) {ideallect北航招生.items.removeclass('ideal-lect-item-lected')ideallect.items.eq(idx).addclass('ideal-lect-item-lected')},change: function (idx) {var text = ideallect.items.eq(idx).text()actions.lect(idx)ideallect.title.text(text)$options.eq(idx).prop('lected', true)$lect.trigger('change')},keydown: function (key) {varidx = actions.getlectedidx(),ismenu = ideallect.lect.is('.ideal-lect-menu'),isopen = ideallect.lect.is('.ideal-lect-open')/*** @namespace key presd*/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.lect(idx + 1): actions.change(idx + 1)}actions.scrollintoview('down')},38: function () { // upif (idx > 0) {isopen? actions.lect(idx - 1): actions.change(idx - 1)}actions.scrollintoview('up')},'default': function () { // lettervarletter = string.fromcharcode(key),$matches = ideallect.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 = ideallect.lect.data('counter') + 1 || 0,curkey = ideallect.lect.data('key') || key,newidx = $matches.eq(counter).index()if (!nmatches) // no matchesreturn fal// if more matches with same letterif (curkey === key) {if (counter < nmatches) {ideallect.lect.data('counter', counter)}el {ideallect.lect.data('counter', 0)newidx = $matches.eq(0).index()}}// if new letterel {ideallect.lect.data('counter', 0)newidx = $matches.eq(0).index()}if (isopen)actions.lect(newidx)elactions.change(newidx)ideallect.lect.data('key', key)actions.scrolltoitem()actions.focushack()}}keys[key]? keys[key](): keys['default']()}}/*** @namespace holds all events of custom lect for "menu mode" and "list mode"* @memberof $.fn.tocustomlect*/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()$lect.trigger('focus')},'hideoutside.menu': function () {$lect.off('blur.menu')$(document).on('moudown.ideal', function (evt) {if (!$(evt.target).clost(ideallect.lect).length) {$(document).off('moudown.ideal')$lect.on('blur.menu', events['blur.menu'])} el {actions.focushack()}})},'moudown.list': function () {actions.focushack()}}// ret eventsvar disableevents = function () {ideallect.lect.removeclass('ideal-lect-menu ideal-lect-list')$lect.off('.menu .list')ideallect.items.off('.menu .list')ideallect.lect.off('.menu .list')ideallect.title.off('.menu .list')}// menu modeideallect.lect.on('menu', function () {disableevents()ideallect.lect.addclass('ideal-lect-menu')actions.hidemenu()$lect.on({'blur.menu': events['blur.menu'],'focus.menu': events.focus,'keydown.menu': events.keydown})ideallect.lect.on('moudown.menu', events['hideoutside.menu'])ideallect.items.on('click.menu', events['clickitem.menu'])ideallect.title.on('click.menu', events['clicktitle.menu'])})// list modeideallect.lect.on('list', function () {disableevents()ideallect.lect.addclass('ideal-lect-list')actions.showmenu()$lect.on({'blur.list': events['blur.list'],'focus.list': events.focus,'keydown.list': events.keydown})ideallect.lect.on('moudown.list', events['moudown.list'])ideallect.items.on('moudown.list', events['clickitem.list'])})$lect.keydown(function (e) {// prevent default keydown event// to avoid bugs with ideal lect eventsif (e.which !== 9) e.preventdefault()})// retideallect.lect.on('ret', function(){actions.change(0)})ideallect.lect.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.inrtafter( $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( $ ) {// browr supports html5 multiple file?var multiplesupport = typeof $('<input/>')[0].multiple !== 'undefined',isie = /msie/i.test( navigator.uragent )$.fn.idealfile = function() {return this.each(function() {var $file = $(this).addclass('ideal-file'), // the original file input// label that will be ud for ie hack$wrap = $('<p class="ideal-file-wrap">'),$input = $('<input type="text" class="ideal-file-filename" />'),// button that will be ud in non-ie browrs$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 ) ).inrtafter( $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} el {filename = $file.val().split('\\').pop()}$input.val( filename ) // t 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') }} el if ( e.which === 8 || e.which === 46 ) { // backspace & del// on some browrs 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('')} el if ( e.which === 9 ){ // tabreturn} el { // all other keysreturn fal}}})})}}( jquery ))/*** @namespace errors* @locale en*/$.idealforms.errors = {required: '此处是必填的.',number: '必须是数字.',digits: '必须是唯一的数字.',name: '必须至少有3个字符长，并且只能包含字母.',urname: '用户名最短5位,最长30位,请使用英文字母、数字、中文和下划线.用户名首字符必须为字母、数字、中文,不能为全数字.中文最长21个字.',pass: '密码的位数必须的在6-15位之间，并且至少包含一个数字，一个大写字母和一个小写字母.',strongpass: '必须至少为8个字符长，至少包含一个大写字母和一个小写字母和一个数字或特殊字符.',email: '必须是一个有效的email地址. <em>(例: ur@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: 'rver 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},urname: {regex: /^[a-z](?=[\w.]{4,30}$)\w*\.?\w*$/i,error: $.idealforms.errors.urname},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.uroptions.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.uroptions.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.uroptions.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 ) {varurformat =input.uroptions.data && input.uroptions.data.date? input.uroptions.data.date: 'mm/dd/yyyy', // default formatdelimiter = /[^mdy]/.exec( urformat )[0],theformat = urformat.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}', urformat )return isdate( thedate, theformat )}},dob: {regex: function( input, value ) {varurformat =input.uroptions.data && input.uroptions.data.dob? input.uroptions.data.dob: 'mm/dd/yyyy', // default format// simulate a date inputdateinput = {input: input.input,uroptions: {data: { date: urformat }}},// u 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.uroptions.data.exclude,isoption = $input.is('[type="checkbox"], [type="radio"], lect')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.uroptions.data.equalto ),$inpu黑眼圈是怎样形成的t = 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 fal }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.uroptions.data.extension,re = new regexp( '\\.'+ extensions.join('|') +'$', 'i' ),valid = falfor ( 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 lf = thisvar $input = input.inputvar uroptions = input.uroptionsvar name = $input.attr('name')var $field = $input.parents('.ideal-field')var valid = falvar customerrors = uroptions.errors && uroptions.errors.ajaxlf.error = {}lf.error.success = customerrors && customerrors.success? customerrors.success: $.idealforms.errors.ajaxsuccess.replace( '{0}', value )lf.error.fail = customerrors && customerrors.error? customerrors.error: $.idealforms.errors.ajaxerror// nd input name as $_post[name]var data = {}data[ name ] = $.trim( value )// ajax options defined by the urvar urajaxops = input.uroptions.data.ajaxvar ajaxops = {type: 'post',datatype: 'json',data: data,success: function( resp, text, xhr ) {console.log(resp)showorhideerror( lf.error.success, true )$input.data({'ideal-ajax-resp': resp,'ideal-ajax-error': lf.error.success})$input.trigger('change') // to update counter$field.removeclass('ajax')// run custom success callbackif( urajaxops._success ) {urajaxops._success( resp, text, xhr )}},error: function( xhr, text, error ) {if ( text !== 'abort' ) {showorhideerror( lf.error.fail, fal )$input.data( 'ideal-ajax-error', lf.error.fail )$field.removeclass('ajax')// run custom error callbackif ( urajaxops._error ) {urajaxops._error( xhr, text, error )}}}}$.extend( ajaxops, urajaxops )// 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: ''}// constructorvar idealforms = function( element, options ) {var lf = thislf.$form = $( element )lf.opts = $.extend( {}, _defaults, options )lf.$外婆的澎湖湾 歌词tabs = lf.$form.find('ction')// t localized filters$.extend( $.idealforms.filters, getfilters() )lf._init()}// plugin$.fn.idealforms = function( options ) {return this.each(function() {if ( !$.data( this, 'idealforms' ) ) {$.data( this, 'idealforms', new idealforms( this, options ) )}})}// get less variablesvar lessvars = {fieldwidth: utils.getlessvar( 'ideal-field-width', 'width' )}/** private methods*/$.extend( idealforms.prototype, {_init: function() {var lf = thisvar o = lf.optsvar formelements = lf._getformelements()lf.$form.css( 'visibility', 'visible' ).addclass('ideal-form').attr( 'novalidate', 'novalidate' ) // disable html5 validation// do markupformelements.inputs.add( formelements.headings ).add( formelements.parators ).each(function(){ lf._domarkup( $(this) ) })// generate tabsif ( lf.$tabs.length ) {var $tabcontainer = $('<p class="ideal-wrap ideal-tabs ideal-full-width"/>')lf.$form.prepend( $tabcontainer )lf.$tabs.idealtabs( $tabcontainer )}// always show datepicker below the inputif ( jquery.ui ) {$.datepicker._checkofft = function( a,b,c ) { return b }}// add inputs specified by data-ideal// to the list of ur inputslf.$form.find('[data-ideal]').each(function() {var urinput = o.inputs[ this.name ]o.inputs[ this.name ] = urinput || { filters: $(this).data('ideal') }})// responsiveif ( o.responsiveat ) {$(window).resize(function(){ lf._responsive() })lf._responsive()}// form eventslf.$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 ( !lf.isvalid() ) {e.preventdefault()o.onfail()lf.focusfirstinvalid()} el {o.onsuccess( e )}}})lf._adjust()lf._attachevents()lf.fresh() // start fresh},_getformelements: function() {return {inputs: this.$form.find('input, lect, textarea, :button'),labels: this.$form.find('p > label:first-child'),text: this.$form.find('input:not([type="checkbox"], [type="radio"], [type="submit"]), textarea'),lect: this.$form.find('lect'),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'),parators: this.$form.find('hr'),hidden: this.$form.find('input:hidden')}},_geturinputs: function() {return this.$form.find('[name="'+ utils.getkeys( this.opts.inputs ).join('"], [name="') +'"]')},_gettab: function( nameoridx ) {var lf = thisvar isnumber = !isnan( nameoridx )if ( isnumber ) {return lf.$tabs.eq( nameoridx )}return lf.$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 lf = thislf.$tabs.each(function( i ) {var invalid = lf.getinvalidintab( i ).lengthlf.$tabs.updatecounter( i, invalid )})},_adjust: function() {var lf = thisvar o = lf.optsvar formelements = lf._getformelements()var curtab = lf._getcurrenttabidx()// autocomplete caus some problems...formelements.inputs.attr('autocomplete', 'off')// show tabs to calculate dimensionsif ( lf.$tabs.length ) { lf.$tabs.show() }// adjust labelsvar labels = formelements.labelslabels.removeattr('style').width( utils.getmaxwidth( labels ) )// adjust headings and paratorsif ( lf.$tabs.length ) {this.$tabs.each(function(){$( this ).find('.ideal-heading:first').addclass('first-child')})} el {lf.$form.find('.ideal-heading:first').addclass('first-child')}lf._tdatepicker()// done calculating hide tabsif ( lf.$tabs.length ) {lf.$tabs.hide()lf.switchtab( curtab )}},_tdatepicker: function() {var o = this.optsvar $datepicker = this.$form.find('input.datepicker')if ( jquery.ui && $datepicker.length ) {$datepicker.each(function() {var urinput = o.inputs[ this.name ]var data = urinput && urinput.data && urinput.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!ttimeout(function() {$this.datepicker('widget').css( 'width', w )}, 1)},onclo: 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, lect').focus()})// basic markup$element.clost('p').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().andlf().wrapall( $field.addclass('ideal-radiocheck') )$element.parents('.ideal-field').append( $valid, $invalid ).after( $error )}if ( !/radiocheck/.test( o.disablecustom ) ) {$element.idealradiocheck()}},lect: function() {idealelements._defaultinput()if ( !/lect/.test( o.disablecustom ) ) {$element.ideallect()}},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.clost('p').addclass('ideal-hidden')},heading: function() {$element.clost('p').addclass('ideal-full-width')$element.parent().children().wrapall('<span class="ideal-heading"/>')},parator: function() {$element.clost('p').addclass('ideal-full-width')$element.wrapall('<p class="ideal-parator"/>')}}// 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 lf = thisvar o = this.optsvar uroptions = o.inputs[ $input.attr('name') ]var urfilters = uroptions.filters && uroptions.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 ? lf.$form.find('[name="' + name + '"]') : $input,uroptions: uroptions}// 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 reterror() {$field.removeclass('valid invalid').removedata('ideal-isvalid')$error.add( $invalid ).add( $valid ).hide()}function showorhideerror( error, valid ) {reterror()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 fal }// validateif ( urfilters ) {$.each( urfilters, function( i, filter ) {var thefilter = $.idealforms.filters[ filter ]var customerror = uroptions.errors && uroption
本文发布于:2023-04-03 01:41:36，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/1bc7de1e161da9f97cfb6539c00e0874.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：Html5用户注册自动校验.doc
本文 PDF 下载地址：Html5用户注册自动校验.pdf
| 留言与评论（共有 0 条评论） |
