赞
踩
<template> <div class="form-container"> <el-form label-width="80px"> <el-form-item label="手机号"> <el-input v-model="form.mobile"></el-input> </el-form-item> <el-form-item label="密码"> <el-input v-model="form.code"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">登录</el-button> <el-button>取消</el-button> </el-form-item> </el-form> </div> </template> <script> export default { data() { return { form: { mobile: '', code: '' } } }, methods: { onSubmit() { console.log('submit!') } } } </script> <style scoped> .form-container{ width: 600px; } </style>
表单中的数据项一般会用一个对象包起来
属性名一般和后端接口中保持一致
在元素上采用v-model双向绑定
了解表单校验的必要性和实现方式
在向后端发请求调用接口之前,我们需要对所要传递的参数进行验证,来把用户的错误扼杀在摇篮之中。
不能相信用户的任何输入!不能相信用户的任何输入!不能相信用户的任何输入!
表单内容一定要验证(不能相信用户的任何输入!);
如果使用是组件库中的表单,最好是采用它们自带的验证方式
在上面的表单中,要求:用户名必填
掌握element-ui中表单校验的使用
定义验证规则。data()中按格式定义规则
在模板上做属性配置来应用规则(三个配置)
给表单设置 rules
属性传入验证规则
给表单设置model
属性传入表单数据
给表单项(Form-Item )设置 prop
属性,其值为设置为需校验的字段名
手动兜底验证
在 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' }
]
}
}
},
注意:
内容:
给 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>
验收效果
我们做到这一步时,当用户输入的内容不符合表单规则要求时,并且某个输入框失焦时,它会给出相应的提示,当我们输入的内容符合要求时,错误提示会自动消失。
格式
element-ui的表单组件.validate(valid => {
if(valid) {
// 通过了验证
} else {
// 验证失败
}
})
说明:
代码-模板
<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
属性,其值为设置为需校验的字段名
手动兜底验证
手机号不能为空,且必须为11位手机号 (/^1[0-9]{10}$/)
密码为必填且长度6到8位字符
定义规则
rules:{
name: [
// trigger: 什么时候触发验证
{ required: true, message: '请输入手机号', trigger: 'blur' },
// pattern : 正则
{ pattern: /^1[345678]\d{9}$/, message: '请输入合法的手机号', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 8, message: '长度为6-8位', trigger: 'blur' }
]
}
模板中配置应用规则
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="手机号" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
下面三个地方的属性名必须一致
场景:
密码不允许是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'}, ] }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。