element rules 校验

1、简单的校验，之间通过rules 校验

:rules="{required: true, message: '执行时间不能为空', trigger: 'blur'}"

这个是失去焦点的时候，校验是否有值，如果没有会之间有校验提示

2、通过定义方法校验

:rules="validateTaskName"

这个校验需要定义一个变量，即在data里面return里定义变量：validateTaskName

然后在变量里面定义校验规则：

return {validateTaskName:[{required: true, message: '任务名称不能为空', trigger: 'blur'},{required: true, message: '任务名称不能为中文', validator: checkName,         trigger: 'blur' }],
}

其中可以添加多个校验，比如中文这个，可以通过validator定义一个校验，校验的规则在checkName里面，checkName需要定义在data里面，在return外。这样校验的时候会自动引用checkName进行校验，这里相当于通过方法进行校验。

 data () {var checkName = (rule, value, callback) => { var reg = /[\u4E00-\u9FA5\uF900-\uFA2D]/;if(reg.test(value)){return callback(new Error('任务名称不能为中文'));}};return {validateTaskName:[{required: true, message: '任务名称不能为空', trigger: 'blur'},{required: true, message: '任务名称不能为中文', validator: checkName, trigger: 'blur' }],
}

3、对整个表达进行校验

<el-form :model="addForm" label-width="200px" :rules="addFormRules" ref="addForm">

这里定义规则校验表单，其中addFormRules里面需要定义每个表单的item的校验规则

addFormRules: {name: [{ type: "string", required: true, message: '请输入Jenkins名称', trigger: 'blur' }],ip: [{ required: true, validator: checkIP, trigger: 'blur' }],port: [{ required: true, validator: validatePort, trigger: 'blur' }],userId: [{ type: "string", required: true, message: '请输入Jenkins的userId', trigger: 'blur' }],apiToken: [{ type: "string", required: true, message: '请输入Jenkins的apiToken', trigger: 'blur' }]},

element rules 校验相关推荐

vue表单rules校验
文章目录一.表单校验 1. 表单项校验 2. 表单整体校验二.规则模板三.踩坑合集 1. 单项规则校验没问题,表单整体校验不通过? 一.表单校验此部分详情可参考此博客<在vue中使用ru ...
vue验证整数_前端Vue中常用rules校验规则
前端Vue中常用rules校验规则 1.是否合法IP地址 export function validateIP(rule, value,callback) {if(value==''||value== ...
element上传图片校验尺寸
<template><div class="idea-container"><el-form :model="ruleForm" ...
前端Vue中常用rules校验规则(轮子)如电话身份证邮箱等校验
目录前言一.正则是什么? 二.造轮子三.轮子使用实例总结前言例如:随着前端的发展,很多功能都需要在前端填写时就先校验是否填写正确,则博主写了一些校验轮子供大家使用. 一.正则是什么? 正则 ...
vue中rules校验是验证首字符_小白也能秒懂Vue源码中那些精细设计（选项处理）...
我"崩"不住了,在彭凡同志锲而不舍的催促下这篇文章终于"蛋"生了. 说正经的这篇文章不好写,不好写的原因是我不太擅长写这些类比文,但它还是写出来了. 相信大部分 ...
vue的element组件校验-手机号/电话号\邮箱\身份证号
<template><div><el-form:model="ruleForm":rules="rules"ref="r ...
element正整数校验
const blurText = async(rule, value, callback) => { const boolean = new RegExp('^[1-9][0-9]*$').te ...
html中表单的校验的插件,功能强大的jquery.validate表单验证插件
本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体内容如下 1 .表单验证的准备工作在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助 ...
validate.js 插件表单校验
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...

element rules 校验

element rules 校验相关推荐

最新文章

热门文章