elementUI From表单校验，整体校验和部分校验的使用方法

我们在开发中，有势会接到一种关于表单验证的需求，在对整体表单验证的同时也希望对单个表单进行验证，虽然官网都有api，但是为了让大家更为直观，这里小杰为了更为直观的理解做了总结。

本次涉及到的核心点

validate（callback）参数为回调函数

validateField（arr,callback）第一个参数为数组，第二个参数为回调函数

--额外两个--

resetFields（）表单重置，表单所有字段值重置为初始值，移除校验结果

clearValidate（arr/string）移除表单项的校验结果。他的参数是字符串或者数组，想移除那个就把prop值作为参数，多个就以数组形式

---------------------------------接下来我们进入正题----------------------------------

from表单

------表单随便写的不要在意格式，此次的目的是为了理解表单校验-----

<el-formstatus-icon:model='ruleFrom':rules="rules"ref="ruleForm"style="width: 345px"class="demo-ruleForm"><el-form-item prop="user"  label="账户 :"> <el-inputplaceholder="请输入账户"size="small"style="width: 200px"v-model="ruleFrom.user"></el-input>  <el-button size="small" type="primary" @click="dd">校验</el-button>            </el-form-item>            <el-form-item prop="pass" label="密码 :">               <el-inputplaceholder="输入数字"size="small"style="width: 250px"v-model="ruleFrom.pass"></el-input>                 </el-form-item>               <el-form-item><el-button class="btn">取消</el-button>    <el-button class="btn" @click="submitForm">提交</el-button>            </el-form-item>
</from>

一. 首先是创建校验规则

1. 表单验证

//trigger: "blur" 输入框失焦时触发校验
//required: true 输入框为空校验提示
rules: {user: [{ required: true, message: '请输入账户', trigger: "blur" }],pass: [{required: true, message: '请输入密码' ,trigger: "blur" },],},

2. 自定义校验规则

var validateuser = (rule, value, callback) => {if (value === "") {callback(new Error("账户为空"));} else if (!/^\d{4}$/.test(value)){callback(new Error("请输入正确的账户"));}callback();  };
var validatePass = (rule, value, callback) => {if (value === "") {callback(new Error("密码为空"));} else  if (!/\d/.test(value)) {callback(new Error("请输入正确密码"));}callback();};return {ruleFrom:{user: "",pass: "",},rules: {user: [{ validator: validateuser,trigger: "blur" }],pass: [{ validator: validatePass,trigger: "blur" },],},

注：这些操作都是在data()下进行的

二、校验

1. 点击提交时，整体表单校验，validate方法

//value 返回的是布尔值 true和false
submitForm() {this.$refs.ruleForm.validate((value) => {console.log(value)});},

--------------校验效果如图所示-------------

①、表单为空时

②、表单不符合规则

③、表单部分不符合规则

④、表单校验成功

2. 点击校验时，对部分表单校验，validateField方法，这里拿账户来举例

//validateField第一个参数是数组，里面就是我们要部分校验的表单
//validateField第二个参数是数组，valid返回的是表单验证错误时返回的提示语，vv返回的是个对象
dd() {this.$refs.ruleForm.validateField(["user"], (valid,vv) => {if(!valid){console.log("校验成功")}});},

----------校验效果如图所示------------

①、账户为空时

②、账户不符合规则

③、账户验证成功 valid返回的是空串，vv返回的是null

最后，如果想在添加提交的时候也校验一下部分表单是否通过，可以加个开关然后在validate中多加一个开关判断就ok了，希望可以帮助到大家

elementUI From表单校验，整体校验和部分校验的使用方法相关推荐

Element-ui Form表单校验-兜底校验-自定义检验规则
用户登录表单-数据双向绑定 <template><div class="form-container"><el-form label-width=&q ...
elementui 按钮表单_仿ElementUI实现一个Form表单的实现代码
使用组件就像流水线上的工人:设计组件就像设计流水线的人,设计好了给工人使用. 一. 目标仿 ElementUI 实现一个简单的 Form 表单,主要实现以下四点: Form FormItem Inp ...
vue 表单验证正则_vue elementui form表单验证的实现
最近我们公司将前端框架由easyui 改为 vue+elementui .自学vue两周就开始了爬坑之路.业余时间给大家分享一下心得,技术新手加上第一次分享(小激动),有什么不足的地方欢迎大家指正, ...
ElementUI的表单验证及常用规则
element-cn.eleme.io/#/zh-CN/com- 在官网上有关于form组件的详细介绍这里总结了几个常用的规则,方便下次使用必填,必选,邮箱,手机号,时间,数字,数组,字符长度, ...
element-ui清除表单验证提示语
一.需求描述: 使用了element-ui的表单, 点击发布当物流单号为空时,会出现提示,如果我通过上方下拉框切换了物流名称,我希望能够主动的清除下方的红色提示信息. 二.解决方案 1.编写表单代码, ...
elementUI form表单重置问题
elementUI form表单重置问题问题如果修改了data里的表单form默认值,那么重置以后就是你修改以后的值,而不是data里的值了所以this.$refs.ruleForm.resetF ...
基于VUE的ElementUi可视化表单设计器布局器
码农苦码农懂的个人空间工作日志正文基于VUE的ElementUi可视化表单设计器布局器顶原码农苦码农懂发布于 09/11 15:35 字数 1187 阅读 41 收藏 0 点赞 1 评论 ...
Php获取id并提交表单,提交表单后 PHP获取提交内容的实现方法
提交表单后 PHP获取提交内容的实现方法2020-06-14 15:35:24 问题:网页上提交表单之后,PHP为什么不能获取提交的内容?然而在老版本的PHP上运行却正常. 新版的PHP已经废弃了原来 ...
element UI 表单自定义验证，css水平且垂直居中方法
element UI 表单自定义验证 element UI提供了一种内部的表单验证,但是这种方法不能够来进行复杂的验证,如邮箱,手机号等的验证需要用到自定义验证首先是element UI 提供的基础 ...

elementUI From表单校验，整体校验和部分校验的使用方法

elementUI From表单校验，整体校验和部分校验的使用方法相关推荐

最新文章

热门文章