问题描述
我们前端搭建好一个项目的基本架子以后,就要开始开发页面了。为了看着高大上一些,产品大佬说,加上一个敲击回车键就能登录的效果。好嘞,话不多少,代码为证:
补充
其实还有一种方式,也可以实现敲击回车,自己搞两个input框框,一个按钮,然后给按钮绑定键盘回车事件,但是吧,产品大佬要求我们敏捷开发,所以怎么快,怎么来。哈哈哈
记录一下查看原文
没有足够的数据
(゚∀゚ )
暂时没有任何数据
水冗水孚 发布了文章 · 1月17日
我们前端搭建好一个项目的基本架子以后,就要开始开发页面了。为了看着高大上一些,产品大佬说,加上一个敲击回车键就能登录的效果。好嘞,话不多少,代码为证:
其实还有一种方式,也可以实现敲击回车,自己搞两个input框框,一个按钮,然后给按钮绑定键盘回车事件,但是吧,产品大佬要求我们敏捷开发,所以怎么快,怎么来。哈哈哈
记录一下查看原文
我们前端搭建好一个项目的基本架子以后,就要开始开发页面了。为了看着高大上一些,产品大佬说,加上一个敲击回车键就能登录的效果。好嘞,话不多少,代码为证:
赞 0 收藏 0 评论 0
水冗水孚 发布了文章 · 1月15日
诸位看官上午好,我们前端在做项目的过程中,常常遇到一些input框检验,比如限制用户不能乱输入内容。方式有很多种,咋办啊?此时,若能善用正则,或许会事半功倍,那么,什么是正则呢?
所谓正则我的理解,就是一个前人封装好的对象,此对象自带属性和方法,我们常用的用来校验的就是正则的test方法,根据是否符合条件返回布尔值,可用于判别用户是否在乱输入内容。
话不多说,上代码!
html部分
<div id="app">
正数正则 保留两位(包括0)<el-input v-model.trim="num0" @change="check0" size="mini"></el-input>
正数正则 保留两位(不包括0)<el-input v-model.trim="num1" @change="check1" size="mini"></el-input>
正整数 (不包括0)<el-input v-model.trim="num2" @change="check2" size="mini"></el-input>
折扣 (0-1] 的小数<el-input v-model.trim="num3" @change="check3" size="mini"></el-input>
折扣 (0-1) 的小数<el-input v-model.trim="num4" @change="check4" size="mini"></el-input>
整数 [0,99999]<el-input v-model.trim="num5" @change="check5" size="mini"></el-input>
XXXXX-XXXXX正则<el-input v-model.trim="num6" @change="check6" size="mini"></el-input>
</div>
js部分
export default {
name: "app",
data() {
return {
/* 总结:对应正则表达式而言,基本上可以帮我们匹配到合适的效果
但是有些情况下。正则匹配的不够用,需要我们手动转换判断控制一下 */
num0: "",
num1:"",
num2:"",
num3:"",
num4:"",
num5:"",
num6:"",
};
},
methods: {
// 正数正则 保留两位(包括0)
check0() {
let reg = /^((0{1}\.\d{1,2})|([1-9]\d*\.\d{1,2})|([1-9]+\d*)|0)$/;
/* 输入的内容可分为以下情况
1. 值为0
2. 值为非0
2.1 非0但是是数字
2.1.1 非0是数字,但是保留两位小数就为0.00了
2.1.2 非0是数字,保留两位小数仍不为0
2.2 非0但是不是数字
非数字类型的转化后就变成NaN了,正则检查NaN就为false,所以也是直接不符合
*/
// 因为用户可能输入0或0.000000这样形式的数据,故此情景直接转换为0即可
if (Number(this.num0) == 0) {
this.num0 = 0;
}
// 如果用户输入的不是0,再看看是数字还是不是数字
else {
// 如果是数字,且处理后保留两位小数符合正则
if (reg.test(parseFloat((this.num0 * 1.0).toFixed(2)))) {
// 若用户输入0.0003保留两位小数就变成了0.00了,故此时就让其显示为0即可
if((this.num0 * 1).toFixed(2) == 0){
this.num0 = 0
}else{
this.num0 = (this.num0 * 1).toFixed(2);
}
}
// 不符合的情况就是用户输入非数字
else {
console.log("不符合");
this.num0 = "";
}
}
},
// 整数正则 保留两位(不包括0)
check1(){
let reg = /^((0{1}\.\d{1,2})|([1-9]\d*\.{1}\d{1,2})|([1-9]+\d*))$/
if(reg.test(this.num1*1)){
console.log("符合");
}
// 这样的写法就比较严格,只要不是两位小数,就直接清空
else{
console.log("不符合");
this.num1 = ""
}
},
// 正整数 (不包括0)
check2(){
let reg = /^[1-9]\d*$/
if(reg.test(this.num2*1)){
console.log("符合要求");
}else{
console.log("不符合要求");
this.num2 = ""
}
},
// 折扣(0,1]小数
check3(){
let reg = /^(0\.\d+|1)$/
if(reg.test(this.num3*1)){
console.log("符合要求");
}else{
console.log("不符合要求");
this.num3 = ""
}
},
// 折扣(0,1)小数
check4(){
let reg = /^(0\.\d+)$/
if(reg.test(this.num4*1)){
console.log("符合要求");
}else{
console.log("不符合要求");
this.num4 = ""
}
},
// [0,99999] 正整数
check5(){
// console.log(this.num5*1);
// 下面的这个正则表达式的确可以匹配 [0,99999] 的正整数,但是存在一个BUG
// 就是也会匹配到 01 002 0156 等 类似这样的数,所以需要我们转换一下
let reg = /^(0|\+?[1-9][0-9]{0,4})$/
if(reg.test(this.num5*1)){
console.log("符合要求");
// 字符串 0020 乘以 1 的话,结果是 20 就把字符串转数字了
this.num5 = this.num5*1 + "" // 最后再转回来数字方便传后台
}else{
console.log("不符合要求");
this.num5 = ""
}
},
// XXXXX-XXXXX或XXX&XXXX等相似的产品编号形式的正则
check6(){
let reg1 = /^([0-9]{5})-([0-9]{5})$/
let reg2 = /^([0-9]{3})&([0-9]{4})$/
if(reg1.test(this.num6) | reg2.test(this.num6)){
console.log("符合要求");
}else{
console.log("不符合要求");
this.num6 = ""
}
}
},
};
有些时候,用正则可以搞定大多数的情况,不过有的时候正则又会比较死板,再结合js的一些常用的小技巧,就可以实现了input框框的校验控制啦。
PS:各位看官,我的代码的注释写的也不少哦。如果那里我没写明白,欢迎评论@我,我再回复呢。哈哈哈
诸位看官上午好,我们前端在做项目的过程中,常常遇到一些input框检验,比如限制用户不能乱输入内容。方式有很多种,咋办啊?此时,若能善用正则,或许会事半功倍,那么,什么是正则呢?所谓正则我的理解,就是一个前人封装好的对象,此对象自带属性和方法,我们常用...
赞 0 收藏 0 评论 1
水冗水孚 回答了问题 · 1月13日
其实也没啥,vuex就是用来存数据的罢了。和一些.vue文件中的data存数据差不多的意思。不过用vuex高大上一些,像一般的公司的不是特别大的项目,用vuex就有点大材小用了。data就够用了。只不过想要使用vuex,就要遵循vuex的规则,其实话说回来,我们程序员的知识通俗来说,都是规则,前人定义好的规则罢了。
其实也没啥,vuex就是用来存数据的罢了。和一些.vue文件中的data存数据差不多的意思。不过用vuex高大上一些,像一般的公司的不是特别大的项目,用vuex就有点大材小用了。data就够用了。只不过想要使用vuex,就要遵循vuex的规则,其实话说回来,我们程序员的知识通俗...
关注 6 回答 4
水冗水孚 发布了文章 · 1月13日
问题关于如何解除网页不让复制的方式有很多,本篇文章也是其中一种方式。如果帮助到您,欢迎点个赞吧。问题描述图示解决方案图示最终效果
赞 0 收藏 0 评论 0
水冗水孚 发布了文章 · 1月13日
以前工作写代码遇到不熟悉的,通过思考、查资料、咨询大佬,解决了以后常常喜欢自己用笔记存一份,并不喜欢公开。现在想想的确是不太好,毕竟程序员开发这个行业,在工作中会遇到很多坑。当大家都来分享自己是如何采坑的,就可以减少彼此的踩坑成本,提升开发效率和时间。毕竟很多大佬的优秀项目也都在git上开源。所以以后有空就在思否上写点博客吧。与大家共同分享,共同进步。
写的不好,多见谅
以前工作写代码遇到不熟悉的,通过思考、查资料、咨询大佬,解决了以后常常喜欢自己用笔记存一份,并不喜欢公开。现在想想的确是不太好,毕竟程序员开发这个行业,在工作中会遇到很多坑。当大家都来分享自己是如何采坑的,就可以减少彼此的踩坑成本,提升开发效率和...
赞 0 收藏 0 评论 0
水冗水孚 关注了专栏 · 1月13日
一个有温度的前端号,关注行业前沿。从基础到架构,携手你我共同成长。
关注 9886
水冗水孚 关注了专栏 · 1月13日
达达前端技术社群:囊括前端Vue、JavaScript、数据结构与算法、实战演练、Node全栈一线技术,紧跟业界发展步伐,一个热爱前端的达达程序员。
关注 10135
水冗水孚 关注了专栏 · 1月13日
SegmentFault 思否对开发者行业的洞见、观察与报道
关注 26287
水冗水孚 关注了专栏 · 1月13日
注重前端性能优化和前沿技术,重型跨平台开发,即时通讯技术等。 欢迎关注微信公众号:前端巅峰
关注 20099
查看全部 个人动态 →
(゚∀゚ )
暂时没有
(゚∀゚ )
暂时没有
注册于 1月13日
个人主页被 109 人浏览
推荐关注