在input组件上绑定data-model="xxx" bindinput="inputWatch",监听输入框输入:
<input placeholder="请输入6~12位密码" name="password" value="{{password}}" data-model="password" bindinput="inputWacth" type="password" maxlength="12" class="form-item-input"></input>
inputWacth: function (e) {
let item = e.currentTarget.dataset.model;
this.setData({
[item]: e.detail.value
});
}
当输入11位手机号后,验证码按钮变为可点状态;当3个输入框都有值时(密码大于等于6位,手机11位),保存按钮变为可点状态。
<form bindsubmit="formPhone" wx:else>
<view class="form-wrap">
<view class="flex form-item">
<view class="form-item-text">密码</view>
<input placeholder="请输入6~12位密码" name="password" value="{{password}}" data-model="password" bindinput="inputWacth" type="password" maxlength="12" class="form-item-input"></input>
</view>
<view class="flex form-item">
<view class="form-item-text">新手机</view>
<input placeholder="请输入新手机号" name="account" value="{{account}}" data-model="account" bindinput="inputWacth" maxlength="11" type="number" class="form-item-input"></input>
<button class="form-item-btn" catchtap="sendCode" data-account="{{account}}" disabled="{{codeDisabled}}">{{codeText}}</button>
</view>
<view class="flex form-item">
<view class="form-item-text">验证码</view>
<input placeholder="请输入验证码" name="verification" data-model="verification" bindinput="inputWacth" maxlength="6" class="form-item-input"></input>
</view>
</view>
<view class="default-btn-wrap">
<button class="default-btn" loading="{{loading}}" form-type="submit" disabled="{{disabled}}">保存</button>
</view>
</form>
var app = getApp();
var util = require('../../../utils/util.js');
var ck = require('../../../utils/check.js');
import { weChatUser } from '../../../utils/api.js'
Page({
/**
* 页面的初始数据
*/
data: {
codeText: '验证码', // 按钮文字
disabled: true, //
codeDisabled: true,
currentTime: 60,
account: '', // 注册-账号
password: '', // 注册-密码
verification: '', // 验证码
},
// 修改手机号
formPhone: util.throttle((e) => {
let that = this,
password = e.detail.value.password,
account = e.detail.value.account,
verification = e.detail.value.verification;
// 判断手机号密码
if (!ck.checkPhone(account) || !ck.checkNull(password, '密码') || !ck.checkNull(verification, '密码')) {
return
}
// 手机号密码验证通过后,发请求修改密码
let data = {
"password": password,
"phone": account,
"verificationCode": Number(verification)
}
let result = weChatUser.updatePhoneBinding(data)
result.then((res) => {
if (res) {
wx.showToast({
title: '修改账号成功',
mask: true
})
setTimeout(() => {
wx.navigateBack({
delta: 1
})
}, 2000)
}
})
// 成功后,返回上一页
}, 1000),
// 发送修改手机号的验证码
sendCode: util.throttle(function (e) {
let account = e.currentTarget.dataset.account;
// 判断手机号密码
if (!ck.checkPhone(account)) {
return
}
ck.countDown(this)
var data = {
phone: Number(account)
}
let result = weChatUser.getVerificationCode(data)
result.then((res) => {
if (res) {
wx.showToast({
title: '发送成功',
icon: 'none',
mask: true
})
}
})
}, 1000),
// 监听 输入(控制按钮样式变化)
inputWacth: function (e) {
let item = e.currentTarget.dataset.model;
this.setData({
[item]: e.detail.value
});
let len = this.data.password.length;
if (this.data.account && this.data.account.length === 11) {
this.setData({
codeDisabled: false
})
if (len >= 6 && this.data.verification) {
this.setData({
disabled: false
})
} else {
this.setData({
disabled: true
})
}
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.setNavigationBarTitle({
title: options.title,
})
}
})
// check.js
function checkPhone(phone) {
// 判断手机号
if (!phone) {
wx.showToast({
title: '请输入手机号',
icon: 'none',
duration: 2000
})
return false
}
if (phone.length < 11) {
wx.showToast({
title: '手机号有误,请重新输入',
icon: 'none',
duration: 2000
})
return false
}
if (!(/^1[3456789]\d{9}$/.test(phone))) {
wx.showToast({
title: '手机号有误,请重新输入',
icon: 'none',
duration: 2000
})
return false
}
return true
}
function checkNull(val, msg) {
if (!val) {
wx.showToast({
title: `请填写${msg}!`,
icon: 'none'
})
return false
}
return true
}
function countDown(self) {
let currentTime = self.data.currentTime;
self.setData({
codeText: currentTime + 's'
})
let interval = setInterval(function () {
self.setData({
codeText: (currentTime - 1) + 's'
})
currentTime--;
if (currentTime <= 0) {
clearInterval(interval)
self.setData({
codeText: '重新获取',
currentTime: 60
})
}
}, 1000)
}
module.exports = {
checkPhone,
checkNull,
countDown
}
// util.js
// 防止多次重复点击(函数节流)
function throttle(fn, gapTime) {
if (!gapTime) {
gapTime = 1000;
}
let _lastTime = null;
// 返回新函数
return function(e) {
let _nowTime = +new Date();
if (_nowTime - _lastTime > gapTime || !_lastTime) {
// fn(this, e); // 改变this和e
fn.apply(this, arguments)
_lastTime = _nowTime;
}
}
}
module.exports = {
throttle
}
我们可以使用html5的type=number来限制input只能输入数字类型,但是会存在一定的兼容问题,而且在浏览器样式上会出现上下箭头的标示,显然这不是我们需要的,这篇文章就整理关于使用js来限制input的输入类型为数字和小数点的实现。
在移动端h5开发的时候,发现如果input在页面底部,当触发input焦点的时候会弹出系统虚拟键盘,虚拟键盘会遮挡input输入框。这会很影响用户体验,于是在网上找到了如下的解决办法
extarea称文本域【文本区】,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到。textarea有maxlength属性,但是textarea不兼容ie8/9。如何实现textarea输入框限制字数长度的兼容问题呢?
html的textarea内容显示的时候怎么换行?输入的时候换了行,但是读取出来的时候是连在一起的,要怎么才可以显示换行?利用pre、替换 br 标签、直接在渲染标签元素上添加 white-space: pre-wrap | pre-line | pre
话不多说,我们能否用纯css实现以下效果:答案是肯定的。借助css:placeholder-shown :valid :invalid伪类及html5 input pattern 属性就可以实现,:placeholder-shown伪类目前兼容性如下:
首先,我们来理解一下:节流函数首先是节流,就是节约流量、内存的损耗,旨在提升性能,在高频率频发的事件中才会用到,比如:onresize,onmousemove,onscroll,oninput等事件中会用到节流函数;输入框的模糊查询功能原理分析
直接修改value值是无法触发对应元素的事件的。通过发送输入框input事件了, 可以触发。这里简单封装了一个方法.简单的调用:
当之前的input框输入了数据后,下次输入有历史记录。我们发现无论是清除cookie,还是删除浏览器历史记录,都没办法清空input下拉的历史记录信息。那么该如何解决该问题呢?
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!