首页 > 代码库 > 后端程序猿写的前端js代码模板
后端程序猿写的前端js代码模板
看几天的javascript面向对象和基础等之类相关javascript的知识，由于自己是写php的，也写过java，所以想在写javascript代码的时候也能用上面向对象的思想，
折腾了一整天的js继承和封装等，搞得我是吃午饭都想着问题，怎么javascript代码可以如此松散呢？眼看就要下班了，加班到现在不知怎么滴就弄了这样一个js代码模板，想以后每个模块都这样写。大了就各个功能对象提炼出来，如验证的、语言包的。
好了，废话不多说，菜鸟一个，代码没注释也不完整，高手留情指点：
reg.html文件：
<html>
<head><include file="layout/head"/><title>{$Think.lang.REG}</title></head>
<body>
<include file="layout/nav"/>
<div id="content">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">{$Think.lang.REG}</h3>
</div>
<div class="panel-body">
<form id="regForm" action="{:U('home/user/reg')}" method="post">
<div class="form-group">
<label for="account">{$Think.lang.ACCOUNT}</label>
<input type="text" id="account" methods="keyup,blur" name="account" class="form-control" style="width: 30%;"
placeholder="{$Think.lang.REG_ACCOUNT_TIP}" title="{$Think.lang.REG_ACCOUNT_TIP}"/>
<div class="alert alert-danger js-account_alert" style="width: 30%; display: none;">
<strong>:(</strong>
<span></span>
</div>
</div>
<div class="form-group">
<label for="password">{$Think.lang.PWD}</label>
<input type="password" methods="keyup,blur" name="password" class="form-control" style="width: 30%;" id="password"
placeholder="{$Think.lang.REG_PWD_TIP}" title="{$Think.lang.REG_PWD_TIP}"/>
<div class="alert alert-danger js-pwd_alert" style="width: 30%; display: none;">
<strong>:(</strong>
<span></span>
</div>
</div>
<div class="form-group">
<label for="password">{$Think.lang.VERIFY}</label>
<div class="input-group" style="width: 30%;">
<input type="text" methods="blur" id="verify" name="verify" class="form-control"/>
<span class="input-group-addon" style="padding: 0px;">
<img src=http://www.mamicode.com/"{:U('home/user/verify','','')}" methods="click" id="changeVerify" title="点击更换"/>>reg.js文件： $( function( ) {
var Reg = {
regEx: {
ACCOUNT: /^\w{5,8}$/,
PWD: /^\d{5,15}$/,
VERIFY: /^\d{4}$/
},
node: {
account: $( '#account' ),
pwd: $( '#password' ),
verify: $( '#verify' ),
regForm: $( '#regForm' )
},
lang: {
ACCOUNT: '{$Think.lang.REG_ACCOUNT_TIP}',
PWD: '{$Think.lang.REG_PWD_TIP}',
VERIFY: '{$Think.lang.REG_VERIFY_TIP}',
CHECK_VERIFY_URL: "{:U('home/user/checkVerify')}",
VERIFY_URL: "{:U('home/user/verify','','')}"
},
server: {
checkVerify: function( val, callback ) {
$.post( Reg.lang.CHECK_VERIFY_URL, { verify: val }, callback, 'json' );
}
},
validator: {
account: function( val, tip ) {
var result = false;
if ( !Reg.regEx.ACCOUNT.test( val ) ) {
Reg.ui.showTip( tip, Reg.lang.ACCOUNT );
} else {
result = true;
Reg.ui.hideTip( tip );
}
return result;
},
pwd: function( val, tip ) {
var result = false;
if ( !Reg.regEx.PWD.test( val ) ) {
Reg.ui.showTip( tip, Reg.lang.PWD );
} else {
result = true;
Reg.ui.hideTip( tip );
}
return result;
},
verify: function( val, tip, callback ) {
var result = false;
if ( !Reg.regEx.VERIFY.test( val ) ) {
Reg.ui.showTip( tip, Reg.lang.VERIFY );
} else {
Reg.server.checkVerify( val, function( data ) {
if ( data.status ) {
if ( typeof callback === 'function' ) {
callback();
}
Reg.ui.hideTip( tip );
} else {
Reg.ui.showTip( tip, Reg.lang.VERIFY );
}
} );
}
return result;
}
},
ui: {
showTip: function( obj, msg ) {
$( obj ).slideDown( 'slow' ).find( 'span' ).html( msg );
},
hideTip: function( obj ) {
$( obj ).slideUp( ).find( 'span' ).html( '' );
}
},
event: {
accountKeyup: function( e ) {
var self = $( this );
setTimeout( function( ) {
Reg.validator.account( self.val( ), '.js-account_alert' );
}, 1000 );
},
accountBlur: function( e ) {
var self = $( this );
Reg.validator.account( self.val( ), '.js-account_alert' );
},
passwordKeyup: function( e ) {
var that = $( this );
setTimeout( function( ) {
Reg.validator.pwd( that.val( ), '.js-pwd_alert' );
}, 1000 );
},
passwordBlur: function( e ) {
var self = $( this );
Reg.validator.pwd( self.val( ), '.js-pwd_alert' );
},
verifyBlur: function( e ) {
Reg.validator.verify( $( this ).val( ), '.js-verify_alert' );
},
changeVerifyClick: function( ) {
var src = http://www.mamicode.com/Reg.lang.VERIFY_URL + '/' + new Date( ).getTime( );>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。