VUE el-input正則驗證

①只能輸入大於0的整數

check(value) {
    let reg = /^[1-9]\d*$/;
    var _this = this;
    if (value) {
        if (new RegExp(reg).test(value) == false) {
            setTimeout(() => {
                _this.actionDataForm.studNum = '';
               _this.errorTip = true;
　　　　　　　　}, 500); }

       else { 
　　　　　　this.errorTip = false; 
　　　　} 
  } 
},

var checkBalance = (rule, value, callback) => {
    if (!value) {
        return callback(new Error('充值余額不能為空'));
    }
    setTimeout(() => {
        if (!Number.isInteger(value)) {
            callback(new Error('請輸入數字值'));
        } else {
            if (Number(value) > 999999) {
                callback(new Error('請輸入1-999999的數字'));
            } else {
                callback();
            }
        }
    }, 1000);
};

var checkBalance = (rule, value, callback) => {
    let reg = /^[1-9]\d*$/;  //整數
    let reg2 = /^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$/;  //小數
    if (!value) {
        return callback(new Error('充值余額不能為空'));
    }
    setTimeout(() => {
        if (!reg.test(value)) {
            if (reg2.test(value)) {
                callback(new Error('請輸入整數'));
            } else {
                callback(new Error('請輸入符合規則的數字'));
            }
        } else if (Number(value) > 999999) {
            callback(new Error('請輸入1-999999的數字'));
        } else {
            callback();
        }
    }, 1000);
};

②只能輸入數字（整數，浮點數）

check() {
    let reg = /[^\d\.]/g;
    if (this.searchKey && new RegExp(reg).test(this.searchKey)) {//非數字
        this.$message({
            message: '請輸入正確的數字',
            type: 'warning'
        })
        return;
    }
    ...
    ...
},

③手機號驗證

checkMobile (number) {
    var partten = /^(13[0-9]|14[0-9]|15[0-9]|16[6]|18[0-9]|19[6,9]|17[0-9])\d{8}$/i;
    return partten.test(number);
},

④郵箱驗證

var checkEmail = (rule, value, callback) => {
    if (!value) {
        return callback();
    }
    if (value) {
        setTimeout(() => {
            var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
            if (!reg.test(value)) {
                callback(new Error('請輸入有效的電子郵箱！'));
            } else {
                callback();
            }
          }, 500);
      }
}

⑤將輸入框的內容全角轉為半角

var ToCDB = function(str){ 
    var tmp = ""; 
    for(var i=0;i<str.length;i++) 
    { 
        if(str.charCodeAt(i)>65248&&str.charCodeAt(i)<65375) 
        { 
            tmp += String.fromCharCode(str.charCodeAt(i)-65248); 
        }else { 
            tmp += String.fromCharCode(str.charCodeAt(i)); 
        } 
    } 
    return tmp 
}

⑥名稱字數限制(30個中文字符長度)

nameLimt (){
    var reg = /[!@#$%^&*?？\/\\“：：;~+]/;
    this.companyName = this.companyName.replace(reg,'')    ;
    var GetLength = function (str) {
        //獲得字符串實際長度，中文2，英文1
        var realLength = 0, len = str.length, charCode = -1;
        for (var i = 0; i < len; i++) {
            charCode = str.charCodeAt(i);
            if (charCode >= 0 && charCode <= 128) realLength += 1;
            else realLength += 2;
        }
      return realLength;
    };
    
     /** 
    * js截取字符串，中英文都能用 
    * @param str：需要截取的字符串 
    * @param len: 需要截取的長度 
    */
    var cutstr = function(str, len) {
        var str_length = 0;
        var str_len = 0;
        var str_cut = new String();
         str_len = str.length;
        for (var i = 0; i < str_len; i++) {
            var temp = str.charAt(i);
            str_length++;
            if (escape(temp).length > 4) {//中文字符的長度經編碼之后大於4  
                str_length++;
            }
            str_cut = str_cut.concat(temp);
            if (str_length >= len) {
             return str_cut;
         }
       }
            
        //如果給定字符串小於指定長度,直接返回  
         if (str_length < len) {
           return str;
      }
    }
        
    if(GetLength(this.companyName) > 60){
        this.companyName = cutstr(this.companyName, 60);
        return;
    }
        
}

⑦只能輸入正整數和負整數

let reg = /^(0|[1-9][0-9]*|-[1-9][0-9]*)$/;

⑧以字符開頭只能輸入數字、字母、下划線

let reg = /^[a-zA-Z][a-zA-Z0-9_]*$/

        var checkEmail = (rule, value, callback) => {
            if (!value) {
                return callback();
            }
            if (value) {
                setTimeout(() => {
                    var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
                    if (!reg.test(value)) {
                        callback(new Error('請輸入有效的電子郵箱！'));
                    } else {
                        callback();
                    }
                }, 500);
            }
        };

rules: {
                name: [
                    {required: true, message: '請輸入姓名', trigger: 'blur'},
                    {min: 1, max: 15, message: '長度在 15 個字以內', trigger: 'blur'}
                ],
                email: [
                    {validator: checkEmail, trigger: ['blur,change']}
                ],

            },

 

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validLowerCase(str) {
  const reg = /^[a-z]+$/
  return reg.test(str)
}

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validUpperCase(str) {
  const reg = /^[A-Z]+$/
  return reg.test(str)
}

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validAlphabets(str) {
  const reg = /^[A-Za-z]+$/
  return reg.test(str)
}

 

 

 

 

https://www.cnblogs.com/websmile/p/8650930.html   vue +element 搭建項目，el-input 常用的驗證

 

https://www.cnblogs.com/lieone/p/11856330.html  前端Vue中常用rules校驗規則
https://www.cnblogs.com/luoxuemei/p/9295506.html   vue如何使用rules對表單字段進行校驗
https://www.jb51.net/article/174246.htm     Vue中常用rules校驗規則(實例代碼)