vue输入框验证

595 阅读1分钟

一,HTML部分

<el-input
	placeholder="请输入金额"
	v-model="number"
	class="my_input"
	v-on:input="inputNum"
></el-input>

二,JS部分

// 校验输入的内容

// 对应匹配:1.保留小数点后两位 2.只能输入数字
inputNum_first(num) {
    var str = num;
    var len1 = str.substr(0, 1);
    var len2 = str.substr(1, 1);
    //如果第一位是0,第二位不是点,就用数字把点替换掉
    if (str.length > 1 && len1 == 0 && len2 != ".") {
        str = str.substr(1, 1);
    }
    //第一位不能是.
    if (len1 == ".") {
        str = "";
    }
    //限制只能输入一个小数点
    if (str.indexOf(".") != -1) {
        var str_ = str.substr(str.indexOf(".") + 1);
        if (str_.indexOf(".") != -1) {
            str = str.substr(
                0,
                str.indexOf(".") + str_.indexOf(".") + 1
            );
        }
    }
    //正则替换,保留数字和小数点
    str = str.replace(/[^\d^\.]+/g, "");
    //如果需要保留小数点后两位,则用下面公式
    // str = str.replace(/\.\d\d$/,'')
    str = str.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3");
    return str;
},

// 对应匹配:0-100的正整数(包含0和100)
inputNum_second(num) {
    var str = num
    if (isNaN(str)) {
        str = "";
    } else {
        var myNum = /^([1-9]?\d|100)$/; //0-100的正整数
        if (!myNum.test(str)) {
            str = "";
        }
    }
    return str;
},

// 对应匹配:前后禁止输入空格,输入空格自动清空
inputNum_thirdly(num) {
    var str = num
    str = str.replace(/^\s+|\s+$/g,'')
    return str;
},