vue中rule数据校验

一、自带的数据校验

rules: {//验证非空和长度one: [{required: true, message: "站点名称不能为空", trigger: "blur"},{min: 3, max: 5,  message: '长度在 3 到 5 个字符',trigger: 'blur' }],//验证数值two: [{ type: 'number', message: '请输入数字类型',trigger: "blur"}],//验证日期three:[{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }],//验证多选four: [{ type: 'array', required: true, message: '请选择一个', trigger: 'change' }],//验证邮箱five: [{ type: 'email',  message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],// 验证手机号telephone: [{pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,message: "请输入正确的手机号码",trigger: "blur"}],// 验证身份证号telephone: [{pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,message: "请输入正确的身份证号",trigger: "blur"}],// 验证经度 整数部分为0-180小数部分为0到7位longitude: [{pattern: /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,7})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/,message: "整数部分为0-180,小数部分为0到7位",trigger: "blur"}],// 验证维度 整数部分为0-90小数部分为0到7位latitude: [{pattern: /^(\-|\+)?([0-8]?\d{1}\.\d{0,7}|90\.0{0,6}|[0-8]?\d{1}|90)$/,message: "整数部分为0-90,小数部分为0到7位",trigger: "blur"}]
}

二、常用自定义的校验规则

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();}
};
export function checkMinVal(rule, value,callback) {if(value <0) {callback(new Error('请输入正整数'));} else {callback();}
}
export function checkMaxVal(rule, value,callback) {if(value >= 2147483647) {callback(new Error('输入的数字过大'));} else {callback();}
}//将数据的数据调用controller验证是否存在
export function checkDay(rule, value, callback) {selectDay(value).then(response => {const code = response.data.code;console.log(code);if (code == 500) {//数据已存在callback(new Error('该数据已存在'));} else {callback();}})
}

三、rule中的引用

rules: {idCard: [{pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,message: "请输入正确的身份证号",trigger: "blur"}],day: [{ required: true, message: "数据不能为空", trigger: "blur" },{validator: checkMinVal, trigger: 'blur' },{validator: checkMaxVal, trigger: 'blur' },{validator: checkDay, trigger: 'blur' },],integral: [{validator: checkMinVal, trigger: 'blur' },{validator: checkMaxVal, trigger: 'blur' },]}

vue中rule数据校验相关推荐

vue验证整数_前端Vue中常用rules校验规则
前端Vue中常用rules校验规则 1.是否合法IP地址 export function validateIP(rule, value,callback) {if(value==''||value== ...
[WPF 基础知识系列] —— 绑定中的数据校验Vaildation
[WPF 基础知识系列] -- 绑定中的数据校验Vaildation 原文:[WPF 基础知识系列] -- 绑定中的数据校验Vaildation 前言: 只要是有表单存在,那么就有可能有对数据的校验需 ...
在vue中把数据导出Excel文件
在vue中把数据导出Excel文件第一次尝试写文章在vue中把数据导出成Excel格式的文件,话不多,上代码: 第一步我们要先安装几个集成的插件 npm install -S file-saver ...
如何在 Vue 中导出数据至 Excel 表格 - 卡拉云
本文首发:<如何在 Vue 中导出数据至 Excel 表格 - 卡拉云> 我们经常需要在 Vue 搭建的后台管理系统里导出数据到 Excel / CSV ,方便我们将数据共享给其他同学或在 ...
vue中data数据之间如何赋值
vue中data数据之间如何赋值前言实现方式前言最近我妹突然问我vue的data之间需要进行赋值,这是什么奇葩需求,干嘛不直接自己定义好就好了啊,既然有这种场景,那么我们就需要去解决这种场景. ...
Vue学习：Vue中的数据代理
一.回顾Object.defineProperty Object.defineProperty方法可以用来增加和修改对象的属性,该方法有三个参数: 1.属性所在的对象: 2.属性的名字: 3.一个描述 ...
Vue中的数据代理与数据劫持
数据代理数据代理字面上是通过一个对象代理对另一个对象属性的操作在vue中的数据代理,实际上是通过vm上的属性代理对_data中属性的操作数据劫持数据劫持也可称作数据代理,字面上是劫持到某个属性 ...
java 护照校验,Java应用中的数据校验
翻译:叩丁狼教育吴嘉俊 [译者注:这篇文章是开源项目CUBA Platform的作者,在这篇文章中,作者阐述了CUBA平台中关于数据校验的设计思想和使用方式,可以作为大家在设计数据校验方面一个比较好的 ...
前端Vue中常用rules校验规则(轮子)如电话身份证邮箱等校验
目录前言一.正则是什么? 二.造轮子三.轮子使用实例总结前言例如:随着前端的发展,很多功能都需要在前端填写时就先校验是否填写正确,则博主写了一些校验轮子供大家使用. 一.正则是什么? 正则 ...
Vue中组件数据的传递
Vue中组件的作用域是隔离的,父组件中的数值子组件看不到!也就是说,用angular作比喻,组件的scope天生是scope:()的! 如果父组件需要往子组件中传数据,此时应该使用标签属性: < ...

vue中rule数据校验

vue中rule数据校验相关推荐

最新文章

热门文章