<!-- -->
<template>
<div class="formInvite">
<div class="formInvite-tel">
<input
type="tel"
pattern="[0-9]*"
maxlength="11"
ref="resize"
placeholder="请输入手机号"
@focus="inpFocus"
@blur="inpBlur"
v-model="phone"
/>
</div>
<div class="formInvite-yz">
<input
placeholder="请输入验证码"
type="text"
pattern="[0-9]*"
maxlength="6"
@focus="inpFocus"
@blur="inpBlur"
v-model="val"
/>
<span>58秒后重发</span>
</div>
<!-- <div class="back formInvite-bt"></div> -->
<st-button class="back formInvite-bt" @click="submit">注册</st-button>
</div>
</template>
<script>
import stButton from '$com/st/button'
// foucse
export default {
components: { stButton },
data () {
return {
phone: "",
val: ""
};
},
computed: {},
beforeMount () { },
mounted () {
},
methods: {
submit () {
if (this._.random(0, 1, false)) {
this.$toast({
duration: 1000,
message: '注册失败!'
});
} else {
this.$router.push({
name: "polite",
params: {
from: "1"
}
})
}
console.log(123456)
}
},
watch: {
phone (val, oldVal) {
if (val == ".") {
this.number = ""
return
}
if (val.split(".").length > 2) {
this.number = oldVal
return
}
this.phone = val.replace(/[^\d]/g, '')
},
val (val, oldVal) {
if (val == ".") {
this.number = ""
return
}
if (val.split(".").length > 2) {
this.number = oldVal
return
}
this.val = val.replace(/[^\d]/g, '')
},
}
}
</script>
<style lang='scss' scoped>
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #999999;
font-size: 14px;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
color: #999999;
font-size: 14px;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
color: #999999;
font-size: 14px;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #999999;
font-size: 14px;
}
$width-inp: 290px;
.formInvite {
width: 100%;
@extend .flex;
justify-content: center;
flex-direction: column;
&-tel {
width: $width-inp;
height: 40px;
input {
width: 100%;
height: 100%;
background: rgba(253, 238, 241, 1);
border-radius: 6px;
border: none;
outline: none;
font-size: 14px;
padding: 0 15px;
// letter-spacing: 0.2px;
}
}
&-yz {
margin: 10px 0;
width: $width-inp;
height: 40px;
@extend .flex;
input {
padding: 0 15px;
width: 174px;
height: 100%;
background: rgba(253, 238, 241, 1);
border-radius: 6px;
border: none;
outline: none;
color: #333333;
font-size: 14px;
padding: 0 15px;
}
span {
width: 100px;
height: 40px;
@extend .flex;
justify-content: center;
background: rgba(#ffb444, 0.95);
border-radius: 6px;
border: 1px solid rgba(252, 255, 106, 1);
font-size: 16px;
color: rgba(252, 255, 106, 1);
}
}
&-bt {
width: $width-inp;
}
}
</style>
2 带小数点的
<input
type="text"
:placeholder="`POOL余额${balance}`"
v-model.trim="vote.number"
@input="saveNumberData"
maxlength="20"
/>
vote: {
number: "",
poolTimeId: '',
name: ""
},
saveNumberData () {
this.checkFloatNumber(this.vote.number);
},
checkFloatNumber (val) {
let reg = new RegExp(/^[0-9]+(.[0-9]{1,4})?$/);
let length_1 = val.length - 1;
let length_2 = val.length - 2;
if (val) { // 当输入了值
if (!reg.test(val)) { // 并且值不合法
if (reg.test(val.substr(0, length_1))) { // 如果除去最后一位前面的合法
if (val.charAt(length_1) == '.' && val.indexOf('.') == length_1) {
// 当最后一位为小数点并且值中只有一个小数点,则保留值
this.vote.number = val;
} else {
// 否则去掉最后一位
this.vote.number = val.substr(0, length_1);
}
// 如果除去最后两位前面的合法并且最后两位都是小数点,就去掉最后一位
} else if (reg.test(val.substr(0, length_2)) && val.charAt(length_1) == '.' && val.indexOf('.') == length_2) {
this.vote.number = val.substr(0, length_1);
// 否则
} else {
// 如果值只有一位且是小数点,或者值有两位且是‘0.’,则把值置为‘0.’
if (val == '.' || val.substr(0, length_1) == '0.') {
this.vote.number = '0.';
} else {
// 否则提示并清空
let instance = this.$toast('请输入正确的数值');
setTimeout(() => {
instance.close();
this.vote.number = '';
}, 1000);
}
}
} else {
// 值合法的时候
// 如果第一位为0且第二位存在且第二位不是小数点,提示并清空值
if (val.charAt(0) == 0 && val.charAt(1) && val.charAt(1) !== '.') {
let instance = this.$toast('请输入正确的数值');
setTimeout(() => {
instance.close();
this.vote.number = '';
}, 1000);
} else {
// 否则保留值
this.vote.number = val;
}
}
}
},