vue使用JavaScript的Number方法或正则表达式进行表单验证,判断值是否为数字(包括整数和小数),验证值只能为小数点后一位

2022-08-05 08:49:41

更新在最前面,新增使用正则表达式判断是否为数字的方法。使用Number方法的问题在最后面已写出。更新一个正则表达式判断的方法。

使用正则表达式判断

//判断是否为数字var a="1";var b="16.789"var c="16.78asd"var d=/^(\d)+\.(\d)+$/.test(a)//falsevar e=/^(\d)+\.(\d)+$/.test(b)//truevar f=/^(\d)+\.(\d)+$/.test(c)//false

当值为整数时,不能判断其为true。
解决方法,共同使用判断浮点数和整数来判断,即:

if(!/^(\d)+\.(\d)+$/.test(value)&!/^[0-9]*[1-9][0-9]*$/.test(value)){callback(newError("请输入非零的数字值"))}
//判断是否为字符var a="16.689";var b="asf"var c="16.865asdf"var d=/^([a-z]|[A-Z])+$/.test(a)//falsevar e=/^([a-z]|[A-Z])+$/.test(b)//truevar f=/^([a-z]|[A-Z])+$/.test(c)//false
//判断小数点后一位var a="16.6";var b="16.789"var c="16.865asdf"var d=/^[0-9]+([.]{1}[0-9]{1})?$/.test(a)//truevar e=/^[0-9]+([.]{1}[0-9]{1})?$/.test(b)//falsevar f=/^[0-9]+([.]{1}[0-9]{1})?$/.test(c)//false//小数点后两位  /^[0-9]+([.]{1}[0-9][0-9]{1})?$/

使用Number数据类型判断

var a="1.56";var b="asf"var c= Number.parseFloat(a)//1.56var d= Number.parseFloat(b)//NaNvar e= Number.isNaN(c)//falsevar f= Number.isNaN(d)//true

NaN --》not a number,不是一个数,但是属于number类型
所以,当使用parseFloat()转化字符串的时候,当值为非数字类型,结果为NaN。那么,我们就可以通过使用isNaN()判断转化结果是否为NaN,若结果为true,则字符串值为非数字,显示提示信息。

<el-formref="addform":model="addform"label-width="28%":rules="rules"><el-form-itemlabel="取值为0-10的整数或小数"prop="zoom"><el-inputclass="forminput"v-model="addform.zoom"placeholder="取值范围为0-10"/></el-form-item></el-form>

为什么不能直接把v-model写成v-model.number强制只能输入数字?因为设置为v-model.number后,就无法输入小数。

data(){varcheckzeroten=(rule, value, callback)=>{if(!value&& value!=0){returncallback(newError("该值不能为空"))}setTimeout(()=>{if(Number.isNaN(Number.parseFloat(value))){callback(newError("请输入数字值"))}else{if(!/^[0-9]+([.]{1}[0-9]{1})?$/.test(value)){callback(newError("小数点后只能为一位"))}else{if(value<0|| value>10){callback(newError("取值范围为0-10!"))}else{callback()}}}},1000)}return{
      rules:{
        zoom:[{ validator: checkzeroten, trigger:"blur"}],},}},

提示:这种方法也有一个问题,首先需要知道parseInt()、parseFloat()的转化机制。

parseInt()

也是把其它数据类型值转换为number,和Number方法在处理字符串的时候有所区别。 Number (‘12px’) ->NaN
parseInt(’ 12px ') ->12 parseInt(‘12px13’) ->12
提取规则:从左到右依次查找有效数字字符,直到遇见非有效数字字符为止;(不管后面是否还有,都不找了、)。把找到的转换为数字;
parseInt(‘px12’) ->NaN

parseFloat()

在parseInt的基础上可以识别小数点 parseFloat(‘12.5px’) ->12.5 ————————————————
版权声明:本文为CSDN博主「weixin_44830077」的原创文章,遵循CC 4.0
BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_44830077/article/details/88914826

所以,当输入值为数字开头后接字符串的时候,也会判断为数字类型而不会返回NaN数据类型。
由于我这里还做了一个判断小数点后一位的验证,所以暂时没问题,但是如果不做这个判断就会出现把“12萨芬”也判断为数字类型的情况。

这个问题暂时还没解决,希望有大佬可以指教一下!!谢谢!!!

  • 作者:ironybbb
  • 原文链接:https://blog.csdn.net/weixin_43185419/article/details/120737730
    更新时间:2022-08-05 08:49:41