天天看點

在vue中常用的表單正則驗證規則

這個挺好用的:

<input placeholder="金額" oninput="value=value.replace(/[^1-9]/g,'')">
<!-- 隻能輸入1-9的正整數 -->
<input placeholder="金額" oninput="value=value.replace(/[^0-9]/g,'')">
<!-- 隻能輸入0-9的正整數 -->

<input placeholder="金額" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
<!-- 限制輸入框隻能輸入數字小數(小數點後兩位) -->

//vue隻允許input框輸入小數點和數字
oninput = "value=value.replace(/[^\d.]/g,'')"
           

而且這個沒有bug出現,這個在我項目中做了測試

附一個正則大全的連結

// 驗證使用者名 過濾特殊符号和空白
export function isvalidUsername(str) {
  // const urlregex = /^[A-Za-z0-9]+$/
  const regex = /^[\u4e00-\u9fa5a-zA-Z0-9\w]+$/g
  return regex.test(str)
}

/* 合法uri*/
export function validateURL(textval) {
  const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
  return urlregex.test(textval)
}

/* 小寫字母*/
export function validateLowerCase(str) {
  const reg = /^[a-z]+$/
  return reg.test(str)
}

/* 大寫字母*/
export function validateUpperCase(str) {
  const reg = /^[A-Z]+$/
  return reg.test(str)
}

/* 大小寫字母*/
export function validateAlphabets(str) {
  const reg = /^[A-Za-z]+$/
  return reg.test(str)
}
/* 數字 */
export function validateNumber(str) {
  const reg = /^[0-9]+$/g
  return reg.test(str)
}
/* 數字 首位非0 */
export function validateNumber1(str) {
  const reg = /^[1-9][0-9]*$/g
  return reg.test(str)
}
/* 數字,小數點後2位 */
export function validateNumber2(str) {
  const reg = /^$|^\d{1,8}(\.\d{1,2})?$/g
  return reg.test(str)
}
/* 數字,小數點後4位 */
export function validateNumber3(str) {
  const reg = /^$|^\d{1,9}(\.\d{1,4})?$/g
  return reg.test(str)
}
// 限定大寫字母+數字+符号“-”
export function validateUpperCaseNumber(str) {
  const reg = /^[A-Z0-9-]+$/
  return reg.test(str)
}
// ip位址
export function validateIP(textval) {
  const regIP = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
  return regIP.test(textval)
}
// 端口号
export function validatePort(textval) {
  const regPort = /^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5])$/
  return regPort.test(textval)
}
// 隻是漢字
export function validateChina(textval) {
  const regChina = /^[\u4e00-\u9fa5]+$/
  return regChina.test(textval)
}
//郵箱
export function validateEmail(email) {
  const re = /^(([^<>()\[\]\\.,;:\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,}))$/
  return re.test(email)
}
           

在頁面是的使用方法是這樣的:

在vue中常用的表單正則驗證規則
在vue中常用的表單正則驗證規則

繼續閱讀