vue前端验证输入_Vue-Element之vue-element 输入框验证

1.控制输入位数

限制输入为10位，这种方式可以使输入框中输入10位后不能输入后续内容

因为number输入框自动将最后一位小数点忽略不计，因此“.”,"2.","3.3."这三种情况均为正确的输入

rules:{

channelName:[

{required:true,message:'渠道名称不能为空',trigger:'change'},

}

2.控制小数输入位数

input 设置类型为number,step控制步长，正则表达式匹配输入的格式必须为xxx.xxx.

注意，此种方法无法区分不输入的情况，故将提示信息合并为一个。

统一触发方式为change

//js

let checkPrice = (rule,value,callback)=>{

if(value){

let rgx = /^\d+(\.\d{1,3})?$/;

if(value.match(rgx)==null){

return callback(new Error('请检查输入格式，不能为空，且最多三位小数'))

}else{

callback();

}

};

rules:{

price:[

{required:true,message:'请检查输入格式，不能为空，且最多三位小数',trigger:'change'},

{validator:checkPrice,trigger:'change'}

]

3.验证时间控件选择的时间是否在某个范围

let checkSendTime = (rule, value, callback) => {

let hour = value ? value.getHours() :0;

if (value !== "") {

if (hour < 8 || hour > 21) {

return callback(new Error('请选择8:00~22:00之间发送'));

} else {

callback();

}

};

sendTime:[

{type:'date',required: true, message: '发送时间不能为空', trigger: 'blur'},

{validator:checkSendTime,trigger:'blur'}

]

vue前端验证输入_Vue-Element之vue-element 输入框验证相关推荐

搭建vue前端框架或微信小程序vue框架步骤
搭建vue前端框架或微信小程序vue框架步骤 1.下载node.js 下载地址:https://nodejs.org/en/download/ 查看node.npm版本,确保环境正确 node --v ...
vue 前端ui框架_vue前端框架
推荐几个vue 前端ui框架第一名 appwork 演示地址 http://appwork.nicethemes.cn 第二名 color admin 演示地址 http://www.colora ...
vue 表单验证正则_vue elementUI如何自定义表单验证规则
一.elementUI自带了一部分表单验证规则,本文讲解如何使用自定义验证规则来完成密码的二次验证. 1.1.首先添加验证邮箱和电话规则和正则表达式// 验证邮箱的规则 var checkEmail ...
vue前端服务器端口_Vue前后端不同端口实现方案
前浏围开幸,业来很广例量站标闪择以近览着发端Vue 8080端口,后端Node.js 8085端口主要记录下前后端不同端口遇到的问友持都发很秀框事,应编差里互是过是来本商理类了如则处果.展,字到中图 ...
vue 匹配键盘输入_vue如何监听键盘事件中的按键？
poj1966 求顶点连通度 Cable TV Network Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 4563 ...
element手机验证格式_vue封装 element-ui form表单验证正则匹配手机号自定义校验表格内容...
效果 image.png 在methods中 //检查手机号 isCellPhone(val) { if (!/^1(3|4|5|6|7|8)\d{9}$/.test(val)) { return f ...
vue 父传子_Vue.js教程Vue基本指令
前言本文仅介绍基本常用指令(不包括自定义指令和相应的修饰符,这两个以后再写). 再附上官方API文档,大家也可以去看官方解释,更全面更具体.VueAPI 本文所有指令写在views文件夹下的Home ...
vue模仿后台数据_Vue学习之Vue模拟后台数据
1 {2 "seller": {3 "name": "粥品香坊(回龙观)",4 "description": " ...
vue 前端邮箱、密码、手机号码等输入验证规则
最近在写前端表单验证的时候,发现一篇文章质量很好,所以写下这篇文章记录原文章链接:vue 邮箱.密码.手机号码等输入验证规则 1.手机号 const checkPhone = (rule, valu ...
Vue+element登录页面实现拼图验证
Vue+element登录页面实现拼图验证需求分析一.导入二.验证的意义三.常规验证手段详细设计一.使用组件二.轮子已找好,开始拼凑效果展示结尾需求分析一.导入项目开发过程中, ...

vue前端验证输入_Vue-Element之vue-element 输入框验证

vue前端验证输入_Vue-Element之vue-element 输入框验证相关推荐

最新文章

热门文章