常用的表單校驗規(guī)則——郵箱/QQ/身份證號碼/微信/電話/數(shù)字字母/整數(shù)/文本/密碼等

這篇具有很好參考價值的文章主要介紹了常用的表單校驗規(guī)則——郵箱/QQ/身份證號碼/微信/電話/數(shù)字字母/整數(shù)/文本/密碼等。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

1.郵箱校驗規(guī)則

//郵箱校驗
export const validateEmail = async (RuleObject, value) => {
  // const reg = new RegExp(/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+$/)
  const reg = new RegExp(/^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/)
  if (value) {
    if (!reg.test(value)) {
      return Promise.reject('請輸入正確的郵箱');
    } else {
      return Promise.resolve();
    }
  } else {
    return Promise.resolve();
  }
}

2.郵箱校驗規(guī)則

export const validateEmail1 = async (RuleObject, value) => {
  const reg = new RegExp(/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)
  if (value) {
    if (!reg.test(value)) {
      return Promise.reject('請輸入正確的郵箱');
    } else {
      return Promise.resolve();
    }
  } else {
    return Promise.resolve();
  }
}

?3.QQ校驗規(guī)則

//qq校驗
export const validateQQ = async (RuleObject, value) => {
  const reg = new RegExp(/^[1-9][0-9]{4,10}$/);
  if (value) {
    if (!reg.test(value)) {
      return Promise.reject('請輸入正確的QQ號');
    } else {
      return Promise.resolve();
    }
  } else {
    return Promise.resolve();
  }
}

4.身份證號碼校驗規(guī)則?

//身份證號校驗
export const validateIdCard = async (RuleObject, value) => {
  const reg = new RegExp(/(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0[1-9]|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/);
  const reg1 = new RegExp(/^[A-Z]\d{7,11}$/)
  if (value) {
    if (!reg1.test(value)&&!reg.test(value)) {
      return Promise.reject('請輸入正確的身份證號');
    } else {
      return Promise.resolve();
    }
  } else {
    return Promise.resolve();
  }
}

?5.微信校驗規(guī)則

//微信校驗
export const validateCharts = async (RuleObject, value) => {
  const reg = new RegExp(/^[a-zA-Z][-_a-zA-Z0-9]{5,19}$/);
  if (value) {
 
    if (!reg.test(value)) {
      return Promise.reject('請輸入正確的微信號');
    } else {
      return Promise.resolve();
    }
  } else {
    return Promise.resolve();
  }
}

6.電話校驗規(guī)則?

//電話校驗
export const validatPhone = async (RuleObject, value) => {
  const reg = new RegExp(/^(?:(?:\+|00)86)?1[3-9]\d{9}$/);
  if (value) {
 
    if (!reg.test(value)) {
      return Promise.reject('請輸入正確的手機號');
    } else {
      return Promise.resolve();
    }
  } else {
    return Promise.resolve();
  }
}

7.銀行卡號校驗規(guī)則?

//銀行卡號校驗
export const validatBankCard = async (RuleObject, value) => {
  const reg = new RegExp(/^[1-9]\d{9,29}$/);
  if (value) {
    if (!reg.test(value)) {
      return Promise.reject('請輸入正確的銀行卡號');
    } else {
      return Promise.resolve();
    }
  } else {
    return Promise.resolve();
  }
}

8.數(shù)字字母校驗規(guī)則?

//數(shù)字字母校驗
export const validatNumberLetter = async (RuleObject, value) => {
  const reg = new RegExp(/^([A-Z]|[a-z]|[\d])*$/);
  if (value) {
    if (!reg.test(value)) {
      return Promise.reject('請輸入正確的工號');
    } else {
      return Promise.resolve();
    }
  } else {
    return Promise.resolve();
  }
}

9.整數(shù)校驗規(guī)則?

//整數(shù)校驗
export const validateInitNumber = async (RuleObject, value, min, max) => {
  if (value !== '' && value !== null && value !== undefined) {
    if (!Number(value) && value !== 0) {
      return Promise.reject('請輸入數(shù)字');
    } else if (!Number.isInteger(Number(value))) {
      return Promise.reject('請輸入整數(shù)');
    } else {
      if (max) {
        value = Number(value);
        if (value > max || value < min) {
          return Promise.reject('請輸入' + min + '到' + max + '之間的數(shù)值');
        } else {
          return Promise.resolve();
        }
      } else {
        return Promise.resolve();
      }
    }
  } else {
    return Promise.resolve();
  }
}

10.數(shù)字校驗規(guī)則?

//數(shù)字校驗
export const validateNumber = async (RuleObject, value, min, max) => {
  if (value !== '' && value !== null && value !== undefined) {
    if (!Number(value) && value !== 0) {
      return Promise.reject('請輸入數(shù)字');
    } else {
      if (max) {
        if (value > max || value < min) {
          return Promise.reject('請輸入' + min + '到' + max + '之間的數(shù)值');
        } else {
          return Promise.resolve();
        }
      } else {
        return Promise.resolve();
      }
    }
  } else {
    return Promise.resolve();
  }
}

11.文本校驗規(guī)則?

//文本校驗
export const validateInitTxt = async (RuleObject, value, min, max) => {
  if (value) {
    if (max) {
      if (value.length > max || value.length < min) {
        return Promise.reject('請輸入' + min + '到' + max + '個字符');
      } else {
        return Promise.resolve();
      }
    } else {
      return Promise.resolve();
    }
  } else {
    return Promise.resolve();
  }
}

12.密碼校驗規(guī)則?

//密碼校驗
export const validatePWD = async (RuleObject, value, min, max) => {
  if (value) {
    if (max) {
      if (value.length > max || value.length < min) {
        return Promise.reject('請輸入' + min + '到' + max + '個字符');
      } else {
        return Promise.resolve();
      }
    } else {
      return Promise.resolve();
    }
  } else {
    return Promise.resolve();
  }
}

最后附上rules中的使用方法?

import { validateEmail,validateInitTxt, validateQQ, validateIdCard, validatPhone,validateEmail1, validatBankCard, validateInitNumber,validateNumber,validateCharts,validatNumberLetter  } from './validateForm.js';
export default  {
    '姓名': [
        {
            required: true, message: '請輸入名字'
        },
        {
            validator: async (RuleObject, value) => validateInitTxt(RuleObject, value, 1, 30), trigger: 'change'
        }
    ],
    '年齡': [
        {
            required: true, message: '請輸入年齡'
        },
        {
            validator: async (RuleObject, value) => validateInitNumber(RuleObject, value, 16, 65), trigger: 'change'
        }
    ],
    '身高': [
        {
            required: true, message: '請輸入身高'
        },
        {
            validator: async (RuleObject, value) => validateInitNumber(RuleObject, value, 140, 210), trigger: 'change'
        }
    ],
    '體重': [
        {
            required: true, message: '請輸入體重'
        },
        {
            validator: async (RuleObject, value) => validateNumber(RuleObject, value, 35, 200), trigger: 'change'
        }
    ],
    '郵件': [
        {
            required: true, message: '請輸入郵件'
        },
        {
            validator: validateEmail, trigger: 'change'
        }
    ],
    '郵箱': [
        {
            required: true, message: '請輸入郵箱'
        },
        {
            validator: validateEmail1, trigger: 'change'
        }
    ],
    'QQ': [
        {
            required: true, message: '請輸入QQ'
        },
        {
            validator: validateQQ, trigger: 'change'
        }
    ],
    '微信': [
        {
            required: true,message: '請輸入微信'
        },
 
        {
            validator: validateCharts, trigger: 'change'
        }
    ],
    '身份證': [
        {
            required: true, message: '請輸入身份證號'
        },
        {
            validator: validateIdCard, trigger: 'change'
        }
    ],
    '電話': [
        {
            required: true, message: '請輸入聯(lián)系電話'
        },
        {
            validator: validatPhone, trigger: 'change'
        }
    ],
    '銀行卡': [
        {
            required: true,message: '請輸入銀行卡卡號'
        },
        {
            validator: validatBankCard, trigger: 'change'
        }
    ],
    '留言板': [
        {
            required: true,message: '請輸入'
        },
        {
            validator: async (RuleObject, value) => validateInitTxt(RuleObject, value, 1, 300), trigger: 'change'
        }
    ],
    '輸入框50': [
        {
            required: true,message: '請輸入'
        },
        {
            validator: async (RuleObject, value) => validateInitTxt(RuleObject, value, 1, 50), trigger: 'change'
        }
    ],
    '輸入框30': [
        {
            required: true,message: '請輸入'
        },
        {
            validator: async (RuleObject, value) => validateInitTxt(RuleObject, value, 1, 30), trigger: 'change'
        }
    ],
 
    '下拉框': [
        {
            required: true, message: '請選擇'
        }
    ],
    '整數(shù)': [
        {
            required: true,message: '請輸入'
        },
        {
            validator: validateInitNumber, trigger: 'change'
        }],
    '組合':[
        {
            required: true,message: '請輸入'
        },
        {
            validator: validatNumberLetter, trigger: 'change'
        },
    ],
    '浮點數(shù)': [
        {
            required: true,message: '請輸入'
        },
        {
            validator: validateNumber, trigger: 'change'
        }]
 
}

?文章來源地址http://www.zghlxwxcb.cn/news/detail-743013.html

到了這里，關(guān)于常用的表單校驗規(guī)則——郵箱/QQ/身份證號碼/微信/電話/數(shù)字字母/整數(shù)/文本/密碼等的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！