element-ui 表单验证

小鱼儿 2023-03-14 13:30 41阅读 0赞

<el-form ref="form" :model="form" :rules="rules" label-width="0px" class="demo-ruleForm">
                <el-form-item prop="username">
                    <el-input v-model="form.username" placeholder="username">
                        <el-button slot="prepend" icon="el-icon-user"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" v-model="form.password" placeholder="password">
                        <el-button slot="prepend" icon="el-icon-goods"></el-button>
                    </el-input>
                </el-form-item>
                <el-button type="primary" @click="submitForm()" class="login-btn">登录</el-button>
            </el-form>

this.$refs.form.validate((valid) => { 
            if (valid) { 
              
              
              this.$message.success('登录成功')
              this.$router.push('/')
            } else { 
              this.$message.error('请输入账号和密码')
              console.log('error submit!')
              return false
            }
          })

发表评论取消回复

表情：

评论列表（有 0 条评论，41人围观）

还没有评论，来说两句吧...

相关阅读

相关 ElementUI之CUD+表单验证

![76896d430d554fe795fdfe74e12272d0.jpeg][] 一.ELementUI之CUD 后端CUD编写 @Control

Dear 丶/ 2024年02月23日 04:15/ 0 赞/ 64 阅读

相关 vue之elementui表单验证最基本实例

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

谁借莪１个温暖的怀抱￠/ 2023年01月20日 09:57/ 0 赞/ 53 阅读

相关 ElementUI Form 表单

一、概述 Form 表单由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据官方链接： [https://element.eleme.cn/\/zh

快来打我*/ 2022年12月30日 13:55/ 0 赞/ 194 阅读

相关 elementui表单密码强度自定义验证

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

约定不等于承诺〃/ 2022年11月27日 08:54/ 0 赞/ 372 阅读

相关 ElementUI的form表单验证事件

用过了elementUi的表单验证、表单提交之后，个人觉得不是太建议使用。第一：和我们自己写js的繁琐程度差不多，第二，还要读文档增加了学习时间和成本。废话不多说，直接上

旧城等待，/ 2022年05月17日 00:43/ 0 赞/ 288 阅读

相关 elementui之表单验证

1.举例子 [{text:""},{text:''},.......] <el-form-item

Dear 丶/ 2022年04月24日 10:42/ 0 赞/ 234 阅读

相关 vue+elementui 对话框取消表单验证重置

最近在写增删改查，在新增的时候要弹出对话框填写form表单信息，发现对话框右上角的小X和右下角的取消不是一个事件，我想在点击它们两个的时候都可以重置表单，最终解决，如下。 v

Myth丶恋晨/ 2022年04月18日 01:21/ 0 赞/ 502 阅读

相关 elementui关闭弹窗清空表单验证清空表单

给form添加一个ref属性 <el-form ref="paper"></el-form> 调用方法，注意先清空验证再清空表单，这样就可以清除自定义的

清疚/ 2022年03月26日 12:52/ 0 赞/ 373 阅读

相关 elementui 自定义表单验证邮箱、电话号码

1.html部分: <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="125

拼搏现实的明天。/ 2022年03月11日 10:16/ 0 赞/ 1092 阅读

相关 elementUI表单验证数字时失效

在写vue+elementUI项目的时候遇到了验证数字失败的问题，解决办法：用‘.number’修饰v-model，例子如下： <el-form-item lab

心已赠人/ 2021年12月12日 15:47/ 0 赞/ 584 阅读