vue验证整数_前端Vue中常用rules校验规则
前端Vue中常用rules校验规则
1、是否合法IP地址
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('请输入正确的IP地址'));
}else{
callback();
}
}
}
2、是否手机号码或者固话
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('请输入正确的电话号码或者固话号码'));
}else{
callback();
}
}
}
3、是否固话
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('请输入正确的固定电话)'));
}else{
callback();
}
}
}
4、是否手机号码
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('请输入正确的电话号码'));
}else{
callback();
}
}
}
5、是否身份证号码
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('请输入正确的身份证号码'));
}else{
callback();
}
}
}
6、是否邮箱
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('请输入正确的邮箱'));
}else{
callback();
}
}
}
7、合法url
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.,?'\\+&%$#=~_-]+))*$/;
returnurlregex.test(url);
}
8、验证内容是否包含英文数字以及下划线
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('仅由英文字母，数字以及下划线组成'));
}else{
callback();
}
}
}
9、自动检验数值的范围
export function checkMax20000(rule, value, callback) {if (value == '' || value == undefined || value == null) {
callback();
}else if (!Number(value)) {
callback(new Error('请输入[1,20000]之间的数字'));
}else if (value < 1 || value > 20000) {
callback(new Error('请输入[1,20000]之间的数字'));
}else{
callback();
}
}
10、验证数字输入框最大数值
export function checkMaxVal(rule, value,callback) {if (value < 0 || value >最大值) {
callback(new Error('请输入[0,最大值]之间的数字'));
}else{
callback();
}
}
11、验证是否1-99之间
export function isOneToNinetyNine(rule, value, callback) {if (!value) {return callback(new Error('输入不可以为空'));
}
setTimeout(()=>{if (!Number(value)) {
callback(new Error('请输入正整数'));
}else{const re = /^[1-9][0-9]{0,1}$/;const rsCheck =re.test(value);if (!rsCheck) {
callback(new Error('请输入正整数，值为【1,99】'));
}else{
callback();
}
}
},0);
}
12、验证是否整数
export function isInteger(rule, value, callback) {if (!value) {return callback(new Error('输入不可以为空'));
}
setTimeout(()=>{if (!Number(value)) {
callback(new Error('请输入正整数'));
}else{const re = /^[0-9]*[1-9][0-9]*$/;const rsCheck =re.test(value);if (!rsCheck) {
callback(new Error('请输入正整数'));
}else{
callback();
}
}
},0);
}
13、验证是否整数,非必填
export function isIntegerNotMust(rule, value, callback) {if (!value) {
callback();
}
setTimeout(()=>{if (!Number(value)) {
callback(new Error('请输入正整数'));
}else{const re = /^[0-9]*[1-9][0-9]*$/;const rsCheck =re.test(value);if (!rsCheck) {
callback(new Error('请输入正整数'));
}else{
callback();
}
}
},1000);
}
14、 验证是否是[0-1]的小数
export function isDecimal(rule, value, callback) {if (!value) {return callback(new Error('输入不可以为空'));
}
setTimeout(()=>{if (!Number(value)) {
callback(new Error('请输入[0,1]之间的数字'));
}else{if (value < 0 || value > 1) {
callback(new Error('请输入[0,1]之间的数字'));
}else{
callback();
}
}
},100);
}
15、 验证是否是[1-10]的小数,即不可以等于0
export function isBtnOneToTen(rule, value, callback) {if (typeof value == 'undefined') {return callback(new Error('输入不可以为空'));
}
setTimeout(()=>{if (!Number(value)) {
callback(new Error('请输入正整数，值为[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('请输入正整数，值为[1,10]'));
}else{
callback();
}
}
},100);
}
16、验证是否是[1-100]的小数,即不可以等于0
export function isBtnOneToHundred(rule, value, callback) {if (!value) {return callback(new Error('输入不可以为空'));
}
setTimeout(()=>{if (!Number(value)) {
callback(new Error('请输入整数，值为[1,100]'));
}else{if (value < 1 || value > 100) {
callback(new Error('请输入整数，值为[1,100]'));
}else{
callback();
}
}
},100);
}
17、验证是否是[0-100]的小数
export function isBtnZeroToHundred(rule, value, callback) {if (!value) {return callback(new Error('输入不可以为空'));
}
setTimeout(()=>{if (!Number(value)) {
callback(new Error('请输入[1,100]之间的数字'));
}else{if (value < 0 || value > 100) {
callback(new Error('请输入[1,100]之间的数字'));
}else{
callback();
}
}
},100);
}
18、验证端口是否在[0,65535]之间
export function isPort(rule, value, callback) {if (!value) {return callback(new Error('输入不可以为空'));
}
setTimeout(()=>{if (value == '' || typeof(value) ==undefined) {
callback(new Error('请输入端口值'));
}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('请输入在[0-65535]之间的端口值'));
}else{
callback();
}
}
},100);
}
19、验证端口是否在[0,65535]之间，非必填,isMust表示是否必填
export function isCheckPort(rule, value, callback) {if (!value) {
callback();
}
setTimeout(()=>{if (value == '' || typeof(value) ==undefined) {//callback(new Error('请输入端口值'));
} 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('请输入在[0-65535]之间的端口值'));
}else{
callback();
}
}
},100);
}
20、小写字母
export function validateLowerCase(val) {const reg = /^[a-z]+$/;returnreg.test(val);
}
22、两位小数验证
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('最多两位小数！！！'));
}else{
callback();
}
};
23、是否大写字母
export function validateUpperCase(val) {const reg = /^[A-Z]+$/;returnreg.test(val);
}
24、是否大小写字母
export function validatAlphabets(val) {const reg = /^[A-Za-z]+$/;returnreg.test(val);
}
25、密码校验
export const validatePsdReg = (rule, value, callback) =>{if (!value) {return callback(new Error('请输入密码'))
}if (!/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/.test(value)) {
callback(new Error('请输入6-20位英文字母、数字或者符号(除空格)，且字母、数字和标点符号至少包含两种'))
}else{
callback()
}
}
26、中文校验
export const validateContacts = (rule, value, callback) =>{if (!value) {return callback(new Error('请输入中文'))
}if (!/^[\u0391-\uFFE5A-Za-z]+$/.test(value)) {
callback(new Error('不可输入特殊字符'))
}else{
callback()
}
}
27、 账号校验
export const validateCode = (rule, value, callback) =>{if (!value) {return callback(new Error('请输入账号'))
}if (!/^(?![0-9]*$)(?![a-zA-Z]*$)[a-zA-Z0-9]{6,20}$/.test(value)) {
callback(new Error('账号必须为6-20位字母和数字组合'))
}else{
callback()
}
}
28 、纯数字校验
export const validateNumber = (rule, value, callback) =>{
let numberReg= /^\d+$|^\d+[.]?\d+$/
if (value !== '') {if (!numberReg.test(value)) {
callback(new Error('请输入数字'))
}else{
callback()
}
}else{
callback(new Error('请输入值'))
}
}
29、最多一位小数
const onePoint = (rule, value, callback) =>{if (!/^[0-9]+([.]{1}[0-9]{1})?$/.test(value)) {
callback(new Error('最多一位小数！！！'));
}else{
callback();
}
};
使用方法：
在使用地方直接 import 引入，然后在 rules 校验中加入即可。
相信很多人在刚接触前端或者中期时候总会遇到一些问题及瓶颈期，如学了一段时间没有方向感或者坚持不下去一个人学习枯燥乏味有问题也不知道怎么解决，对此我整理了一些资料 喜欢我的文章想与更多资深大牛一起讨论和学习的话 欢迎加入我的学习交流群907694362
原文链接:https://www.cnblogs.com/xsd1/p/11976324.html
如有疑问请与原作者联系
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
vue验证整数_前端Vue中常用rules校验规则相关推荐
- 前端Vue中常用rules校验规则(轮子)如电话身份证邮箱等校验
目录 前言 一.正则是什么? 二.造轮子 三.轮子使用实例 总结 前言 例如:随着前端的发展,很多功能都需要在前端填写时就先校验是否填写正确,则博主写了一些校验轮子供大家使用. 一.正则是什么? 正则 ...
- axios vue 回调函数_前端Vue 面试题大全
点蓝色字关注"程序员报刊" 「 学习 新闻 招聘 」 vue的底层原理? vue组件之间的通信? JS中判断数据类型的方法有几种? 最常见的判断方法:typeof 判断已知对象类 ...
- 前端开发中常用的几种设计模式
设计模式概览 设计模式是对软件设计开发过程中反复出现的某类问题的通用解决方案.设计模式更多的是指导思想和方法论,而不是现成的代码,当然每种设计模式都有每种语言中的具体实现方式.学习设计模式更多的是理解 ...
- 前端开发中常用设计模式-总结篇
本文是向大家介绍前端开发中常用的设计模式,它使我们编写的代码更容易被复用,也更容易被人理解,并且保证代码的稳定可靠性. 1.什么是设计模式 通俗来讲,就是日常使用设计的一种惯性思维. 因为对应的这种思 ...
- 前端开发中常用图片格式
前端开发中常用图片格式 在我们的日常开发中.必不可少会使用很多种图片. 我们需要根据业务场景来选择所使用的图片类型. 这里我整理了一些常用图片类型.他们的优缺点以及建议的使用场景. 如何在计算机中显示 ...
- VUE路由守卫_前端实现权限验证
VUE路由守卫_权限验证 引言: 本文在利用SpringBoot和Vue实现前后端分离一文的基础上追加的路由守卫:未登录时会限制访问某些页面(前台控制),与之前的Shiro不同: 文章目录 VUE路由 ...
- vue接收索引_前端开发：Vue中findIndex() 方法的使用
前端开发过程中对数据的遍历是非常常见的操作,在Vue.js中通过对数组下标遍历操作来进行相关逻辑处理的方法常用的有两种:some()和findIndex() ,二者都是通过遍历数组里面的id值来进行操 ...
- vue 初始化方法_前端发展方向指南—Vue源码初始化
Vue 的源码结构比较绕,同时使用了大量的面向对象的高级技巧.重写方法,扩展方法,多态等应用.从 Vue 实例的加载过程就可以看出来,这一节重点看看 Vue 的源码加载流程是什么. 前言 vue已是目 ...
- iframe vue 前进 后退_前端面试准备笔记系列之vue(01)
目录 01. 对于MVVM的理解? 02. 概述Vue以及优缺点? 03. vue等单页面应用及其优缺点 04. Vue实现数据双向绑定的原理 05. vue.js的两个核心是什么? 06. css如 ...
最新文章
- PHP的Reflection反射机制
- 7 种 Javascript 常用设计模式学习笔记
- javaScript 的小技巧
- python基础语法手册format-Python-输出格式化format()方法的基本使用(2)
- 基于Struts2的供求信息网设计(三)
- Mybatis应用（一）应用步骤
- 学生签到系统c代码_C语言实现简单学生学籍管理系统
- jstat分析_jstat –分析
- 苹果依旧强大 物联网领域举足轻重
- 图书馆占座系统-产品需求规格说明书
- 华为手机解锁码计算工具_华为高通全系列手机解锁工具
- 电容或电感的电压_磁场对于电感路径检测的影响
- IEEE邮件爆出：禁止华为员工审稿，惨遭网友吐槽！
- Hadoop+Spark 之旅—脚踏实地、仰望星空（教程目录）
- 通常环境光照度参照表
- 如何批量输出条形码图片
- jquery-weui扩展功能Picker实现营业时间选择
- 斗图高手教你用Python批量爬取表情包
- SpringMVC通过ResponseEntity实现文件下载
- Hybrid与h5使用webview+JSBridge实现通信原理简析