Element-UI中el-form 表单如何校验
Posted liyunlonggg
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Element-UI中el-form 表单如何校验相关的知识,希望对你有一定的参考价值。
Element-UI
表单 简单验证
<el-form >
<el-form-item>
<el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
</el-form-item>
</el-form>
第一种:在el-form-item单个添加验证
这种方式适用于需要个别检验的字段,或者表单字段有变动的校验;
下面举个例子(验证用户名 不能为空)
<el-form-item label="用户名" :prop="userName" :rules="[ required: true, message: '请输入用户名', trigger: 'blur' ]">
<el-input v-model="userName" :maxlength="16" placeholder clearable></el-input>
</el-form-item>
第二种:在表单上加多个验证
这种方式适用于表单全部字段校验或需要校验字段类型比较简单的数据类型
做法:需要在el-form-item标签中加入 :rules=’'rules ‘’ ,然后在data()中写入rule添加每个表单的验证
下面举个例子(验证用户名和密码 不能为空)
<el-form :model="formData" :rules="dateRule" ref="form">
<el-form-item label="用户名" prop="userName">
<el-input v-model="formData.userName" type="password" placeholder="请输入用户名" clearable></el-input>
</el-form-item>
<el-form-item label="密码" prop="userPass">
<el-input v-model="formData.userPass" :maxlength="18" placeholder="请输入密码" clearable></el-input>
</el-form-item>
</el-form>
data中
rule:
userName: loginName: [
required: true, message: "用户名不能为空", trigger: "blur"
],
userPass: [
required: true, message: "密码不能为空", trigger: "blur"
]
rules 表单验证规则
required true 必填项
message 提示语
trigger 在失去焦点时触发
maxLength 字符串的最大长度
min 和 max 必须同时给 min < max
type 类型
以上是关于Element-UI中el-form 表单如何校验的主要内容,如果未能解决你的问题,请参考以下文章