input 正则表达式验证

4,521 阅读1分钟

一下内容为本人项目中亲测,如有问题,希望大家更正,谢谢!

input框限制输入:

    // 只能输入中文:
    <el-input 
        v-model="value" 
        onkeyup="value=value.replace(/[^\u4e00-\u9fa5]/g,'')"
    ></el-input>

    // 只能输入英文:
    <el-input 
        v-model="value" 
       onkeyup="value=value.replace(/[^a-zA-Z]/g,'')"
    ></el-input>

    // 只能输入数字:
    <el-input 
        v-model="value" 
        onkeyup="value=value.replace(/\D/g,'')"
    ></el-input>

    // 只能输入数字和点:
    <el-input 
        v-model="value" 
        onkeyup="value=value.replace(/[^\d.]/g,'')"
    ></el-input>

    // 输入数字和字母:
    <el-input 
        v-model="value" 
        onkeyup="value=value.replace(/[\W]/g,'')"
    ></el-input>

    // 输入中文、数字、英文:   
    <el-input 
        v-model="value" 
        onkeyup="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')"
    ></el-input>

    // 只能输入大小写字母、数字、下划线:
    <el-input 
        v-model="value" 
        onkeyup="value=value.replace(/[^\w_]/g,'')"
    ></el-input>

    // 只能输入小写字母、数字、下划线:
    <el-input 
        v-model="value" 
        onkeyup="value=value.replace(/[^a-z0-9_]/g,'')"
    ></el-input>

input框只能输入数字:

    //方法一:只能输入数字(有回显)
    <el-input v-model="value" onkeyup="value=value.replace(/\D/g,'')"></el-input>

    //方法二:只能输入数字(无回显)
    只能输入数字:无回显
    <input id="Text1" type="text" @keypress="IsNum($event)" />

    methods:{
        IsNum(e) {
            var k = window.event ? e.keyCode : e.which;
            if (((k >= 48) && (k <= 57)) || k == 8 || k == 0) {
            } else {
                if (window.event) {
                    window.event.returnValue = false;
                }
                else {
                    e.preventDefault(); //for firefox
                }
            }
        }
    }

input小数点后面只能输入两位小数:

    <el-input 
        type="text" 
        v-model="value" 
        @keyup.native="value = oninput('number',value)"
    ></el-input>

    <script>
    export default {
        data(){
            return{
                value: ''
            }
        },
        methods:{
            oninput(type,num) {
                var str = num;
                // 只能输入两位小数
                if(type == 'number'){
                    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(/([0-9]+\.[0-9]{2})[0-9]*/,"$1");  // 保留小数点后面两位小数
                }
                return str
            }
        }
    }
    </script>

正则表达式验证:

数字:  /^[0-9]+$/
英文:  /^[a-zA-Z]+$/
整数:  /^(0|[1-9][0-9]*|-[1-9][0-9]*)$/
五位数以内的正整数:  /^(0|\+?[1-9][0-9]{0,4})$/
整数不超过9位,小数不超过2位(不包含0):   /^(0|\+?[1-9][0-9]{0,8})(\.\d{1,2})?$/
整数不超过9位,小数不超过2位(不包含00.00):  /^(0\.\d{0,1}[1-9]|\+?[1-9][0-9]{0,8})(\.\d{1,2})?$/
包含0的正整数: /^([1-9]\d*|[0]{1,1})$/
最多两位小数:  /^([\+ \-]?(([1-9]\d*)|(0)))([.]\d{0,2})?$/ 
数字 / 英文:  /^[a-zA-Z0-9]+$/
中文 / 英文:  /^[\u0391-\uFFE5A-Za-z]+$/
中文 / 英文 / 数字:  /^[\d|A-z|\u4E00-\u9FFF]+$/
数字 / 小数(只有一个小数点):  /^\d+$|^\d+\.\d+$/
两位小数: /^[0-9]+\.[0-9]{2}$/
手机号:/^[1][3,4,5,7,8,9][0-9]{9}$/
邮箱:/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/

大于0的正数,最多两位小数:
const num1 = (rule, value, callback) => {
    let reg1 = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/;  // 验证请输入大于0的正数,最多2位小数
    if(!value){
        callback();
    }
    else if (reg1.test(value)) {
        if (value == 0) {
            callback(new Error("请输入大于0的正数,最多2位小数!"));
        }else{
            callback();
        }  
    } else {
        callback(new Error("请输入大于0的正数,最多2位小数!"));
    }
};

正则表达式的方法:

test() : test是正则表达式的方法, 参数是字符串, 返回值是false或者truematch() : match是字符串的方法, 参数是正则表达式, 返回值是null或者字符串数组。

var reg = /^[a-zA-Z0-9]+$/;
<input v-model="val">
val.match(reg)   // match() 
reg.test(val)    // test()