溧阳建设局网站6,如何优化网站提高排名,无锡网站建设设计公司,wordpress分行符#x1f973;博 主#xff1a;初映CY的前说(前端领域) #x1f31e;个人信条#xff1a;想要变成得到#xff0c;中间还有做到#xff01; #x1f918;本文核心#xff1a;vue使用elementUI进行表单验证实操#xff08;附源码#xff09; 【前言】我们在构建一… 博 主初映CY的前说(前端领域) 个人信条想要变成得到中间还有做到 本文核心vue使用elementUI进行表单验证实操附源码 【前言】我们在构建一个项目中基本是无法避免不使用表单来收集数据的。比如登录注册页面我们需要验证输入者的用户名与密码当都具有合法性与正确性的时候我们才可以进行注册以及登录的操作。当登录进页面之后还会涉及到数据的增删改查操作这都无一例外需要我们通过某一个载体来接收我们的数值因此表单在项目中是很常见的大家物必得学会呦。
目录
一、表单校验流程发请求流程
二、使用elementUI框架进行表单校验 一、表单校验流程发请求流程 收集数据、进行验证、处理验证通过与错误 二、使用elementUI框架进行表单校验
关于vue的UI库介绍的文章大家请移步下面这个超链接
UI与Vant组件库的导入、注册、使用方法
2.1.我们使用表单组件来讲解翻阅文档看表单怎么用
组件 | Element 我们重点放在这样的几个点上面model、rules、validate、prop、ref
model:用于绑定表单数据rules:用于表单验证规则validate:任一表单项被校验后触发(被校验的表单项 prop 值校验是否通过)prop:表单域 model 字段在使用 validate、resetFields 方法的情况下该属性是必填的ref用于选中我们的form表单此刻我们的表单长这个样子 此时关键源码截图 2.2给每个el-form-item通过prop进行绑定下props,我们才能开启校验规则
类似于下图这样绑定我们的数据进去 2.3写下我们的rules校验规则 2.4rules校验写在data当中
required必选项message错误提示trigger:触发方式blur是失去焦点的时候触发 当我写下校验规则之后我们的图标发现有了新的变化。左上角有了红色星号 那我们来测试以下吧
现在表单的一层数据校验就完成了接下还需要一层兜底校验。这一层校验是收集所有表单数据进行检测当检测都通过了再执行相应的规则。在这就是当我点击 立即创建 的时候收集数据我们进行其他操作比如发请求到服务器中这里为了演示的难度就不写发送请求的操作啦。发送ajax请求的文章请看博主vue专栏喔
2.5绑定点击事件 el-button typeprimary clickonSubmit立即创建/el-button
2.6写下校验方法
onSubmit () {this.$refs.form.validate(valid {console.log(valid)if (valid) {console.log(submit!,校验通过)console.log(这是FormData:, this.FormData)}})}
2.7点击查看 嘿可以看到当我们校验通过了valid形参打印的true,因此我们才获取到了我们想看到的值。当我们表单数据但凡有一个有错误时都不能走这个if为true的条件这样就完成了兜底校验。一般这个表单是那里用一般是登陆页面用或者我们后管系统做增删改查操作的时候会使用上表单验证等技术。等验证通过了我们再去发请求或者存储数据等等操作。
【附上源码】
template
el-form refform :modelFormData label-width80px :rulesruleFormel-form-item label活动名称 propnameel-input v-modelFormData.name/el-input/el-form-itemel-form-item label活动时间 propdate1el-col :span11el-date-picker typedate placeholder选择日期 v-modelFormData.date1 stylewidth: 100%;/el-date-picker/el-colel-col classline :span2-/el-col/el-form-itemel-form-item label活动性质 proptypeel-checkbox-group v-modelFormData.type proptypeel-checkbox label美食/餐厅线上活动 nametype/el-checkboxel-checkbox label地推活动 nametype/el-checkboxel-checkbox label线下主题活动 nametype/el-checkboxel-checkbox label单纯品牌曝光 nametype/el-checkbox/el-checkbox-group/el-form-itemel-form-item label活动形式 propdescel-input typetextarea v-modelFormData.desc propdesc/el-input/el-form-itemel-form-itemel-button typeprimary clickonSubmit立即创建/el-button/el-form-item
/el-form/template
script
export default {data () {return {ruleForm: {name: [{ required: true, message: 请输入活动名称, trigger: blur },{ min: 2, max: 50, message: 活动名称字数为2-50个字, trigger: blur }],date1: [{ required: true, message: 请选择活动事件, trigger: blur }],type: [{ required: true, message: 请确定活动活动性质, trigger: blur }],desc: [{ required: true, message: 活动形式, trigger: blur }]},FormData: {// 一定需要在data中声明我们绑定的数据name: ,date1: ,type: [],desc: }}},methods: {onSubmit () {this.$refs.form.validate(valid {console.log(valid)if (valid) {console.log(submit!,校验通过)console.log(这是FormData:, this.FormData)}})}}
}
/script至此本文结束学的开心 ——期待大家的关注与支持! 你的肯定是我更新的最大动力——
