共计 2399 个字符,预计需要花费 6 分钟才能阅读完成。
指标
把握 element-ui 中表单校验的应用
根本步骤 - 共三步
- 定义验证规定。data()中按格局定义规定
-
在模板上做属性配置来利用规定(三个配置)
给表单设置
rules
属性传入验证规定给表单设置
model
属性传入表单数据给表单项(Form-Item)设置
prop
属性,其值为设置为需校验的字段名 - 手动兜底验证
步骤 1 - 定义表单验证规定
在 data 中, 补充定义规定。
格局:
data() {
return {
rules: {
// 字段名 1:示意要验证的属性
// 值: 示意验证规定列表。它是一个数组,数组中的每一项示意一条规定。// 数组中的多条规定会按程序进行
字段名 1: [{ 验证规定 1},
{验证规定 2},
],
字段名 2: [{ 验证规定 1},
{验证规定 2},
],
}
}
}
示例
{required: true, message: '请输出验证码', trigger: 'blur'},
{pattern: /^\d{6}$/, message: '请输出非法的验证码', trigger: 'blur' },
{min: 6, max: 8, message: '长度为 6 - 8 位', trigger: 'blur'}
实操代码
data () {
return {
// 表单验证规定,整体是一个对象
// 键:要验证的字段, 值:是一个数组,每一项就是一条规定
rules: {
// 字段名:mobile 就示意要验证的 属性
// 值: 是一个数组。数组中的每一项示意一条规定。mobile: [{ required: true, message: '请输出手机号', trigger: 'blur'}
]
}
}
},
留神:
- rules 中的属性名与表单数据项中的属性名必须是统一的。
步骤 2 - 模板中的配置
内容:
- 给 el-form 组件绑定 model 为表单数据对象
- 给 el-form 组件绑定 rules 属性配置验证规定
- 给须要验证的表单项 el-form-item 绑定 prop 属性,留神:prop 属性须要指定表单对象中的数据名称
代码:
<el-form label-width="80px" :model="form" :rules="rules">
<el-form-item label="手机号" prop="mobile">
<el-input v-model="form.mobile"></el-input>
</el-form-item>
<el-form-item label="明码" prop="code">
<el-input v-model="form.code"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit"> 立刻创立 </el-button>
<el-button @click="onCancel"> 勾销 </el-button>
</el-form-item>
</el-form>
验收成果
咱们做到这一步时,当用户输出的内容不合乎表单规定要求时,并且某个输入框失焦时,它会给出相应的提醒,当咱们输出的内容符合要求时,谬误提醒会主动隐没。
步骤 3 - 手动兜底验证
格局
element-ui 的表单组件.validate(valid => {if(valid) {// 通过了验证} else {// 验证失败}
})
阐明:
- validate 办法是表单组件自带的,用来对表单内容进行测验。
- 须要在模板中增加对表单组件的援用:ref 的作用次要用来获取表单组件手动触发验证
代码 - 模板
<el-form label-width="80px"
+ ref="form"
:model="form"
:rules="rules">
增加 ref 来援用 el-form 组件。
代码
在做提交时进行手动兜底验证,如果通过了验证
doLogin () {alert('我能够做登录了')
},
submit () {
this.$refs.form.validate(valid => {
// valid 就是表单验证的后果,如果是 true,示意通过了
// console.log(valid)
if (valid) {
// 通过了验证,你能够做后续动作了
this.doLogin()}
})
}
总结:
步骤
- 定义验证规定(按 element-ui 的要求来)
-
配置模板,利用规定
给表单设置
rules
属性传入验证规给表单设置
model
属性传入表单数据给表单中的元素(Form-Item)设置
prop
属性,其值为设置为需校验的字段名 - 手动兜底验证
自定义测验规定的应用格局
场景:
明码不容许是123456
指标
把握自定义测验规定的应用格局
思路
在 rules 中自定义 validator
格局
rules:{
属性名 1: [
{
// 留神参数程序
validator: function (rule, value, callback) {
// rule:采纳的规定
// value: 被校验的值
// callback 是回调函数,// 如果通过了规定测验,就间接调用 callback()
// 如果没有通过规定测验,就调用 callback(谬误对象,在谬误对象中阐明起因)
// 例如:callback(new Error('谬误阐明'))
},
trigger: 'blur'
}]
}
落地代码
rules: {name: [{required: true, message:'必须要填入', triggle: 'blur'}],
code: [
{validator:(rule, value, callback)=>{console.log(rule, value, callback)
if(value === '123456') {callback(new Error('这是世界上最差的明码了'))
} else {callback()
}
},
triggle: 'blur'
},
{min: 6, max:8, message:'长度为 6 - 8 位', triggle: 'blur'},
{required: true, message:'必须要填入', triggle: 'blur'},
]
}
正文完