UI组件的表单校验

最新推荐文章于 2021-11-03 18:51:16 发布
最新推荐文章于 2021-11-03 18:51:16 发布
阅读量433 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 框架 文章标签： 表单校验 element form表单校验 form的表单校验 iview form表单校验
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_39985511/article/details/82805628

在开发中，表单校验是必不可少elementUI和iviewUI的表单校验都是类似的

目前我们开发大部分都用UI组件，下面来说一下element UI的表单校验。

 

1最简单的一种校验

 2、官网提供的动态校验（具体看http://element-cn.eleme.io/#/zh-CN/component/form#form-biao-dan）

之前楼主用过iview的表单动态rules，规则如果是对象还好，直接赋值就可以，之前楼主接到的rules是后台配的规则，是个String类型的，可以用eval解析一下ok了！！！ 

3、formValue有层级关系的校验

*****规则也可以是自定义动态规则

el-form-item中的prop参数：

*1*如果设置rules，将prop的值绑定在rules中的sex规则上 

*2*如果不设置rules，则默认prop绑定data中rules对应的属性

 原创不易，转载请注明出处！！！

form表单验证组件
08-07
为表单的提交前做验证本站这里提供一个纯js原生组件validate没有任何的依赖，支持全部的浏览器没有兼容问题
ElementUI多个子组件表单的校验管理实现
10-16
本文将详细介绍如何在 ElementUI 中实现多个子组件表单的校验管理。 首先，我们来看一个简单的例子。假设我们有两个子组件，PersonForm 和 AdsForm，它们各自包含不同的表单字段。在父组件 App.vue 中，我们将这两...
组件参数校验与非props特性
07-11 121
父组件传递content="hello world"，子组件有权对其进行约束，或者说校验 <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /...
表单验证组件
chuangboha500422的博客
08-14 203
demo文档链接 调用： var$=require('zepto'); $(function() {//引用模块 varVA=require('../modules/yue_ui/valid/index'); //...
框架----Django之Form组件
dejiong3425的博客
07-03 213
Django的Form主要具有一下几大功能： 生成HTML标签 验证用户数据（显示错误信息） HTML Form提交保留上次提交数据 初始化页面显示内容 一、小试牛刀 1、创建Form类 1 from django.forms import Form 2 from django.forms import widgets 3 from django....
表单数据验证组件
weixin_42223701的博客
11-03 178
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap表单样式一</title> <!-- 让页面样式根据设备大小进行调整显示 --> <meta name=viewport content="width=device-width,initial-scale=1"> <script type="text/javas
Vue element-ui父组件控制子组件的表单校验操作
10-15
在Vue.js框架中，Element-UI是一个非常流行的UI组件库，它提供了丰富的界面元素和功能，包括表单验证。在大型应用中，我们经常需要在父组件中控制子组件的行为，比如触发子组件的表单验证。以下将详细介绍如何实现...
Vee-validate 父组件获取子组件表单校验结果的实例代码
01-19
vee-validate 是为 Vue.js 量身打造的表单校验框架，允许您校验输入的内容并显示对应的错误提示信息。它内置了很多常见的校验规则，可以组合使用多种校验规则，大部分场景只需要配置就能实现开箱即用，还支持自定义...
通用的表单验证组件
iteye_8019的博客
11-08 160
一个通用的表单验证组件，可以根据验证类型自行扩展，可以被动验证和主动验证。需要用到方法ParamUtil.setParam(已贴出) 组件代码： [code="java"] package pizazz.flex4.manager{ import flash.events.Event; import flash.events.MouseEvent; import...
validate.js 表单校验插件
草木红的博客
12-09 4719
菜鸟教程： https://www.runoob.com/jquery/jquery-plugin-validate.html (一) 使用步骤 导入jquery.js，validate基于jquery 导入validate.js 页面加载成功后，对表单进行校验，$(“选择器”).validate(); <form action="" id="login"> 必填： <input type="text" name="userName" id=""><br /
react-material-ui-form-validator:用于使用Material-UI组件设计的表单的简单验证器
05-11
材质用户界面表单的验证组件 安装 npm install react-material-ui-form-validator 版本号 0.x，1.x-支持Material-ui <= 0.x ^ 2.0.0-支持material-ui> = 1.x || 3.x || 4.x 的实现 迁移指南 从<2> = 2.1.1 为了避免遗留上下文，将重大更改引入了react-form-validator-core。 如果您具有自定义的验证器组件，则应将输入组件的render方法更改为renderValidatorComponent 。 前： import React from 'react' ; import { ValidatorComponent } from 'react-material-ui-form-validator' ; class SomeValidator e
vue表单验证组件vverifyplugin
08-10
vue表单验证组件 v-verify-plugin
Material-UI-Form-Design-and-Validation:重大的UI表单设计和验证
04-28
完整的React Material UI教程-表单设计和验证 这些是用于解释Material UI主题的演示项目，例如 表格设计 表格验证 在表单提交中插入新记录 本系列React Materil UI中的完整视频： ://bit.ly/3k2tUSD 取得验证码 $ git clone https://github.com/CodAffection/Material-UI-Form-Design-and-Validation.git $ cd Material-UI-Form-Design-and-Validation $ npm install 这个怎么运作 ？ 3.材质UI-表单设计。 视频教程： : 4.物料用户界面-表单验证 视频教程： : :bar_chart: 教程清单 :money_bag: 支持我们 角度的 贝宝 Asp.Net核心 亚马逊会员 React http://bit.ly/3
react-material-ui-universal-form:具有材料UI库的React的通用表单（带有验证）
03-09
用React with Material UI编写的通用表单（带有验证） 弗拉基米尔·扬科维奇（Vladimir Jankovic） 这是通用的，可自定义的表单，其中包含使用React with Material UI库编写的字段验证。 主要特点是： 将对象定义发送到表单组件，并通过验证获得完全呈现的表单。 两种类型的验证-必填字段和正则表达式验证。 自定义提交按钮操作。 自定义取消按钮动作。 7种类型的输入字段，包括：“滑块”，“日期/时间”和“切换”字段。 照明快速分页 HTML5语义标记和Sass支持CSS + BEM方法论 依存关系 唯一的依赖关系是Material Ui库，因此您必须（已经或已）将其安装在项目中： npm install @material-ui/core 安装 非常简单。 将该项目解压缩到任何文件夹，执行“ npm install”，就这样。
js几种常用表单验证控件
04-18
NULL 博文链接：https://vipshow.iteye.com/blog/1838930
初识 Vue（16）---（组件参数校验与非Props特性）
姜皓的博客
07-28 933
组件参数校验与非Props特性 1.组件参数校验： 父组件向子组件传递内容，子组件可以对这些内容做一些约束，这种约束称为组件参数校验 示例：对传入数据 content 进行约束，必须为 string 类型数据 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &
组件参数校验
小小少年eason的博客
03-03 192
父组件向子组件传值 约束传值为string型 约束传值为string和number required 要求必须传值 default设置默认值 要求长度大于5
JSP表单自动数据验证组件
joyzhang 态度决定一切
07-14 221
从jsp到servlet或者action过程中还有很多需要处理的事情：数据有效性验证包括jsp页面的 javascript验证和服务器端的验证、对文件上传的处理、文件上传大小的控制、防止二次提交、multipart form的非文件字段的处理。这些事情不属于jsp也不属于action，我们的开发人员会把这些事情直接在jsp里处理或者交给了action处理,当然如果采用了mvc框架来开发的话，有...
vue前端框架 iview UI库，部分表单验证
geyu小屋
11-08 1387
vue前端框架 iview UI库，部分表单验证。 &amp;amp;amp;lt;!-- 表单编辑区 --&amp;amp;amp;gt; &amp;amp;amp;lt;Row&amp;amp;amp;gt; &amp;amp;amp;lt;Col span=&amp;amp;quot;20&amp;amp;quot; offset=&amp;amp;quot;
element ui form表单校验
03-16
Element UI 是一个基于 Vue.js 的前端组件库，其中包含了表单校验功能。可以通过在表单元素上设置 "rules" 属性来实现校验。例如: ``` <el-form ref="form" :rules="rules" > <el-form-item label="用户名" prop="username"> <el-input v-model="form.username" placeholder="请输入用户名"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input v-model="form.password" placeholder="请输入密码"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('form')">提交</el-button> </el-form-item> </el-form> ``` 其中 rules 是一个数组，里面包含了校验规则对象，例如: ``` data() { return { form: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' } ] } } }, ``` 然后提交表单时调用 this.$refs.form.validate() 方法进行校验，如果校验失败会返回一个 false，可以根据返回值来判断表单是否通过校验。 ``` methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } });Element UI 是一个基于 Vue.js 的前端 UI 组件库，它提供了一组丰富的表单组件，可以方便地进行表单校验。通常可以使用其中的 el-form 和 el-form-item 组件进行校验。可以在 el-form 上设置 rules 属性来配置校验规则，在 el-form-item 上设置 prop 属性来指定其对应的表单字段。例如： ``` <el-form ref="form" :rules="rules" v-model="formData"> <el-form-item label="用户名" prop="username"> <el-input v-model="formData.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input v-model="formData.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> ``` 然后在data 中的 rules 设置校验规则： ``` data() { return { formData: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' } ] } } } ``` 在提交表单时调用this.$refs.form.validate()进行校验，校验通过后进行下一步操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值