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

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

使用正则表达式判断

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

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

	if (!/^(\d)+\.(\d)+$/.test(value) & !/^[0-9]*[1-9][0-9]*$/.test(value)) {
          callback(new Error("请输入非零的数字值"))
        }

//判断是否为字符
var a = "16.689";
var b = "asf"
var c = "16.865asdf"
var d = /^([a-z]|[A-Z])+$/.test(a) //false
var e = /^([a-z]|[A-Z])+$/.test(b) //true
var 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) //true
var e = /^[0-9]+([.]{1}[0-9]{1})?$/.test(b) //false
var 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.56
var d = Number.parseFloat(b) //NaN
var e = Number.isNaN(c) //false
var f = Number.isNaN(d) //true

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

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

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

data() {
    var checkzeroten = (rule, value, callback) => {
      if (!value && value != 0) {
        return callback(new Error("该值不能为空"))
      }
      setTimeout(() => {
        if (Number.isNaN(Number.parseFloat(value))) {
          callback(new Error("请输入数字值"))
        } else {
          if (!/^[0-9]+([.]{1}[0-9]{1})?$/.test(value)) {
            callback(new Error("小数点后只能为一位"))
          } else {
            if (value < 0 || value > 10) {
              callback(new Error("取值范围为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萨芬”也判断为数字类型的情况。

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