Common rules checks in front-end Vue

Posted by Flying Sagittarius on Thu, 14 Nov 2019 06:18:57 +0100

premise

In the development of vue, it is unavoidable to encounter a variety of form checks, here sorted out some checking methods used on the network and in their usual high frequencies.If you are wrong, you are welcome to add updates later.

1. Is it a legal IP address

export function validateIP(rule, value,callback) {
  if(value==''||value==undefined||value==null){
    callback();
  }else {
    const reg = /^(\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])$/;
    if ((!reg.test(value)) && value != '') {
      callback(new Error('Please enter correct IP address'));
    } else {
      callback();
    }
  }
}

2. Is there a mobile number or a fixed phone?

export function validatePhoneTwo(rule, value, callback) {
  const reg = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/;;
  if (value == '' || value == undefined || value == null) {
    callback();
  } else {
    if ((!reg.test(value)) && value != '') {
      callback(new Error('Please enter the correct phone number or fixed number'));
    } else {
      callback();
    }
  }
}

3. Firm or not

export function validateTelphone(rule, value,callback) {
  const reg =/0\d{2,3}-\d{7,8}/;
  if(value==''||value==undefined||value==null){
    callback();
  }else {
    if ((!reg.test(value)) && value != '') {
      callback(new Error('Please enter the correct landline)'));
    } else {
      callback();
    }
  }
}

4. Whether to have a mobile number

export function validatePhone(rule, value,callback) {
  const reg =/^[1][3-9][0-9]{9}$/;
  if(value==''||value==undefined||value==null){
    callback();
  }else {
    if ((!reg.test(value)) && value != '') {
      callback(new Error('Please enter the correct phone number'));
    } else {
      callback();
    }
  }
}

5. Is ID Number

export function validateIdNo(rule, value,callback) {
  const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
  if(value==''||value==undefined||value==null){
    callback();
  }else {
    if ((!reg.test(value)) && value != '') {
      callback(new Error('Please enter the correct ID number'));
    } else {
      callback();
    }
  }
}

6. Mailbox or not

export function validateEMail(rule, value,callback) {
  const reg =/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/;
  if(value==''||value==undefined||value==null){
    callback();
  }else{
    if (!reg.test(value)){
      callback(new Error('Please enter the correct mailbox'));
    } else {
      callback();
    }
  }
}

7. Legal URLs

export function validateURL(url) {
  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(url);
}

8. Verify that the content contains English numbers and underscores

export function isPassword(rule, value, callback) {
  const reg =/^[_a-zA-Z0-9]+$/;
  if(value==''||value==undefined||value==null){
    callback();
  } else {
    if (!reg.test(value)){
      callback(new Error('Only consist of letters, numbers and underscores'));
    } else {
      callback();
    }
  }
}

9. Automatically verify the range of values

export function checkMax20000(rule, value, callback) {
  if (value == '' || value == undefined || value == null) {
    callback();
  } else if (!Number(value)) {
    callback(new Error('Please enter[1,20000]Number between'));
  } else if (value < 1 || value > 20000) {
    callback(new Error('Please enter[1,20000]Number between'));
  } else {
    callback();
  }
}

10. Verify the maximum value of the digital input box

export function checkMaxVal(rule, value,callback) {
  if (value < 0 || value > Maximum) {
    callback(new Error('Please enter[0,Maximum]Number between'));
  } else {
    callback();
  }
}

11. Verify 1-99

export function isOneToNinetyNine(rule, value, callback) {
  if (!value) {
    return callback(new Error('Input cannot be null'));
  }
  setTimeout(() => {
    if (!Number(value)) {
      callback(new Error('Please enter a positive integer'));
    } else {
      const re = /^[1-9][0-9]{0,1}$/;
      const rsCheck = re.test(value);
      if (!rsCheck) {
        callback(new Error('Please enter a positive integer with a value of [1],99]'));
      } else {
        callback();
      }
    }
  }, 0);
}

12. Verify Integer

export function isInteger(rule, value, callback) {
  if (!value) {
    return callback(new Error('Input cannot be null'));
  }
  setTimeout(() => {
    if (!Number(value)) {
      callback(new Error('Please enter a positive integer'));
    } else {
      const re = /^[0-9]*[1-9][0-9]*$/;
      const rsCheck = re.test(value);
      if (!rsCheck) {
        callback(new Error('Please enter a positive integer'));
      } else {
        callback();
      }
    }
  }, 0);
}

13. Verify that integers are not required

export function isIntegerNotMust(rule, value, callback) {
  if (!value) {
    callback();
  }
  setTimeout(() => {
    if (!Number(value)) {
      callback(new Error('Please enter a positive integer'));
    } else {
      const re = /^[0-9]*[1-9][0-9]*$/;
      const rsCheck = re.test(value);
      if (!rsCheck) {
        callback(new Error('Please enter a positive integer'));
      } else {
        callback();
      }
    }
  }, 1000);
}

14. Verify that it is a decimal [0-1]

export function isDecimal(rule, value, callback) {
  if (!value) {
    return callback(new Error('Input cannot be null'));
  }
  setTimeout(() => {
    if (!Number(value)) {
      callback(new Error('Please enter[0,1]Number between'));
    } else {
      if (value < 0 || value > 1) {
        callback(new Error('Please enter[0,1]Number between'));
      } else {
        callback();
      }
    }
  }, 100);
}

15. Verify that it is a decimal [1-10], that is, it cannot be equal to 0

export function isBtnOneToTen(rule, value, callback) {
  if (typeof value == 'undefined') {
    return callback(new Error('Input cannot be null'));
  }
  setTimeout(() => {
    if (!Number(value)) {
      callback(new Error('Please enter a positive integer with a value of[1,10]'));
    } else {
      if (!(value == '1' || value == '2' || value == '3' || value == '4' || value == '5' || value == '6' || value == '7' || value == '8' || value == '9' || value == '10')) {
        callback(new Error('Please enter a positive integer with a value of[1,10]'));
      } else {
        callback();
      }
    }
  }, 100);
}

16. Verify that it is a decimal [1-100], that is, it cannot be equal to 0

export function isBtnOneToHundred(rule, value, callback) {
  if (!value) {
    return callback(new Error('Input cannot be null'));
  }
  setTimeout(() => {
    if (!Number(value)) {
      callback(new Error('Please enter an integer with a value of[1,100]'));
    } else {
      if (value < 1 || value > 100) {
        callback(new Error('Please enter an integer with a value of[1,100]'));
      } else {
        callback();
      }
    }
  }, 100);
}

17. Verify that it is a decimal [0-100]

export function isBtnZeroToHundred(rule, value, callback) {
  if (!value) {
    return callback(new Error('Input cannot be null'));
  }
  setTimeout(() => {
    if (!Number(value)) {
      callback(new Error('Please enter[1,100]Number between'));
    } else {
      if (value < 0 || value > 100) {
        callback(new Error('Please enter[1,100]Number between'));
      } else {
        callback();
      }
    }
  }, 100);
}

18. Verify that the port is between [0,65535]

export function isPort(rule, value, callback) {
  if (!value) {
    return callback(new Error('Input cannot be null'));
  }
  setTimeout(() => {
    if (value == '' || typeof(value) == undefined) {
      callback(new Error('Please enter a port value'));
    } else {
      const re = /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/;
      const rsCheck = re.test(value);
      if (!rsCheck) {
        callback(new Error('Please enter in[0-65535]Port value between'));
      } else {
        callback();
      }
    }
  }, 100);
}

19. Verify that ports are not required between [0,65535], isMust indicates required

export function isCheckPort(rule, value, callback) {
  if (!value) {
    callback();
  }
  setTimeout(() => {
    if (value == '' || typeof(value) == undefined) {
      //callback(new Error('please enter a port value');
    } else {
      const re = /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/;
      const rsCheck = re.test(value);
      if (!rsCheck) {
        callback(new Error('Please enter in[0-65535]Port value between'));
      } else {
        callback();
      }
    }
  }, 100);
}

20. Lower case letters

export function validateLowerCase(val) {
  const reg = /^[a-z]+$/;
  return reg.test(val);
}

22. Two-digit decimal validation

const validateValidity = (rule, value, callback) => {
  if (!/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(value)) {
    callback(new Error('Up to two decimal places!!!'));
  } else {
    callback();
  }
};

23. Uppercase or not

export function validateUpperCase(val) {
  const reg = /^[A-Z]+$/;
  return reg.test(val);
}

24. Uppercase and lowercase letters

export function validatAlphabets(val) {
  const reg = /^[A-Za-z]+$/;
  return reg.test(val);
}

25. Password verification

export const validatePsdReg = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('Please input a password'))
  }
  if (!/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/.test(value)) {
    callback(new Error('Please enter 6-20 Bit English letters, numbers, or symbols (except spaces) with at least two types of letters, numbers, and punctuation'))
  } else {
    callback()
  }
}

26. Chinese Verification

export const validateContacts = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('Please enter Chinese'))
  }
  if (!/^[\u0391-\uFFE5A-Za-z]+$/.test(value)) {
    callback(new Error('Special characters cannot be entered'))
  } else {
    callback()
  }
}

27. Identity card verification

export const ID = (rule, value, callback) => {
    if (!value) {
      return callback(new Error('Identity card cannot be empty'))
    }
    if (! /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
      callback(new Error('Please enter the correct second generation ID number'))
    } else {
      callback()
    }
}

28. Account Verification

export const validateCode = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('Please enter an account'))
  }
  if (!/^(?![0-9]*$)(?![a-zA-Z]*$)[a-zA-Z0-9]{6,20}$/.test(value)) {
    callback(new Error('Account must be 6-20 Bit letter and number combination'))
  } else {
    callback()
  }
}

29. Pure Digital Check

export const validateNumber = (rule, value, callback) => {
    let numberReg = /^\d+$|^\d+[.]?\d+$/
    if (value !== '') {
        if (!numberReg.test(value)) {
            callback(new Error('please enter a number'))
        } else {
            callback()
        }
    } else {
        callback(new Error('Please enter a value'))
    }
}

30. Maximum one decimal

const onePoint = (rule, value, callback) => {
  if (!/^[0-9]+([.]{1}[0-9]{1})?$/.test(value)) {
    callback(new Error('Maximum one decimal!!!'));
  } else {
    callback();
  }
};

Usage method:

import directly where you are using it and add it to the rules check.

Other

Regular checks commonly used on the front end

Public Number Xiaoku Classmate

Front End AC Group

Add a WeChat Robot and pull you into the group with a post-reply code string

Focus on Public Number

Topics: Javascript Mobile Vue network ftp