sf123,中变传奇,今日刚开一秒变态sf
当前位置:网站首页 > 中变传奇 > 正文

jsp中input底色变灰

作者:admin发布时间:2022-01-08分类:中变传奇浏览:100评论:15


导读:吃了没外卖!--登录方式切换2--;{}短信登录;{on:!loginWay}clickloginWayfalse密码登录/a/div/divdivclasslogin_conte...

jsp中input底色变灰与底色

吃了没外卖!--登录方式切换2--;{}短信登录;{on:!loginWay}clickloginWayfalse密码登录/a/div/divdivclasslogin_content!--1阻止表单默认提交事件改为执行login表单验证方法--formsubmit.preventlogin!--登录方式切换3.1--div:class{on:loginWay}sectionclasslogin_message!--3.1表单收集手机号--inputtypetelmaxlength11placeholder手机号v-modelphonebutton:disabled!phoneRightclassget_verification:class{show_ver:phoneRight}click.preventgetCode()/button/sectionsectionclasslogin_verification!--3.2表单收集短信验证码--inputtypetelmaxlength8placeholder验证码v-modelcode/sectionsectionclasslogin_hint温馨提示未注册硅谷外卖帐号的手机号登录时将自动注册且代表已同意ahrefjavascript:;《用户服务协议》/a/section/div!--登录方式切换3.2--div:class{on:!loginWay}sectionsectionclasslogin_message!--3.3表单收集名--inputtypetelmaxlength11placeholder手机/邮箱/用户名v-modelname/sectionsectionclasslogin_verification!--3.4表单收集密码--inputtypepasswordmaxlength8placeholder密码v-modelpwdv-ifshowPwdinputtypetextmaxlength8placeholder密码v-modelpwdv-elsedivclassswitch_button:classshowPwd?off:onclickshowPwd!showPwddivclassswitch_circle:class{right:!showPwd}/divspanclassswitch_text/span/div/sectionsectionclasslogin_message!--3.5表单收集验证码--inputtypetextmaxlength11placeholder验证码v-modelcaptchaimgclajsp中input底色变灰ssget_verificationsrc./images/captcha.svgaltcaptcha/section/section/divbuttonclasslogin_submit登录/button/formahrefjavascript:;classabout_us关于我们/a/divaclick$router.back()classgo_backiclassiconfonticon-jiantou2/i/a/div!--验证提示弹窗:alertText向子组件传的提示信息、closeTip关闭窗口方法自定义事件--AlertTip:alertTextalertTextv-showalertShowcloseTipcloseTip//section/templatescriptimportAlertTipfrom../../components/AlertTip/AlertTip.vueexportdefault{data(){return{//登录方式切换1loginWay:true,//登录方式:true短信登录false密码登录countDown:0,//倒计时showPwd:true,//是否显示密码//2来源接口文档,v-model值要同接口文档phone:,//手机号code:,//短信验证码name:,//用户名captcha:,//图形验证码pwd:,//密码alertText:,//提示文本alertShow:false,//是否显示警告框}},methods:{goBack(){//后退上一页this.$router.go(-1)//this.$router.back()或这样写},//获取短信验证码getCode(){//如果倒计时为0再执行防止当前已经在倒计时if(this.countDown0){this.countDown30//setInterval()循环定时器每隔1秒执行一次函数减少1this.IntervalIdsetInterval((){this.countDown--//如果倒数到0则停止循环定时器if(this.countDown0){clearInterval(this.IntervalId)}},1000)}},//显示提示框showAlert(alertText){this.alertTextalertTextthis.alertShowtrue},//登录login(){//前台验证if(this.loginWay){//如果是true则为短信登录//手机号是否符合规则(计算属性)拿到手机号、短信验证码const{phoneRight,phone,code}this//如果手机号不对或验证码不对则作出弹窗提示if(!phoneRight){//手机号不正确this.showAlert(手机号不正确)}elseif(!/^\d{6}$/.test(code)){//如果短信验证码不是6位数字//验证码不正确this.showAlert(验证码必须为6位数字)}}else{//密码登录const{name,pwd,captcha}this//拿到名字、密码、图形验证码if(!name){//用户名必须指定this.showAlert(用户名必须指定)}elseif(!pwd){//密码必须指定this.showAlert(密码必须指定)}elseif(!captcha){//验证码必须指定this.showAlert(验证码必须指定)}}},closeTip(){this.alertTextthis.alertShowfalse}},computed:{//验证手机号是否符合规则返回值:boolphoneRight(){return/^1\d{10}$/.test(this.phone)}},components:{AlertTip}}/scriptstylelangstylusimport../../common/stylus/mixins.styl.loginContainerwidth100%height100%background#fff.loginInnerpadding-top60pxwidth80%margin0auto.login_header.login_logofont-size40pxfont-weightboldcolor#02a774text-aligncenter.login_header_titlepadding-top40pxtext-aligncenteracolor#333font-size14pxpadding-bottom4px:first-childmargin-right40px.oncolor#02a774font-weight700border-bottom2pxsolid#02a774.login_contentformdivdisplaynone.ondisplayblockinputwidth100%height100%padding-left10pxbox-sizingborder-boxborder1pxsolid#dddborder-radius4pxoutline0font40014pxArial:focusborder1pxsolid#02a774.login_messagepositionrelativemargin-top16pxheight48pxfont-size14pxbackground#fff.get_verificationpositionabsolutetop50%right10pxtransformtranslateY(-50%)border0color#cccfont-size14pxbackgroundtransparentoutlinenone.show_vercolor#000.login_verificationpositionrelativemargin-top16pxheight48pxfont-size14pxbackground#fff.switch_buttonfont-size12pxborder1pxsolid#dddborder-radius8pxtransitionbackground-color.3s,border-color.3spadding06pxwidth30pxheight16pxline-height16pxcolor#fffpositionabsolutetop50%right10pxtransformtranslateY(-50%).offbackground#fff.switch_textfloatrightcolor#ddd.onbackground#02a774.switch_circle//transformtranslateX(27px)positionabsolutetop-1pxleft-1pxwidth16pxheight16pxborder1pxsolid#dddborder-radius50%background#fffbox-shadow02px4px0rgba(0,0,0,.1)transitiontransform.3s.righttransformtranslateX(30px).login_hintmargin-top12pxcolor#999font-size14pxline-height20pxacolor#02a774.login_submitdisplayblockwidth100%height42pxmargin-top30pxborder-radius4pxbackground#4cd96fcolor#ffftext-aligncenterfont-size16pxline-height42pxborder0.about_usdisplayblockfont-size12pxmargin-top20pxtext-aligncentercolor#999.go_backpositionabsolutetop5pxleft5pxwidth30pxheight30px.iconfontfont-size20pxcolor#999/style

技巧:可ctrl+finput显示所有表单不会漏掉把所有Input表单加上v-model=‘接口文档对应参数’!--【1】阻止表单默认提交事件,改为执行login表单验证方法--form@submit.prevent='login'!--登录方式切换...

展开全文

标签:jsp中input底色变灰


已有15位网友发表了看法:

欢迎 发表评论: