<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 属性需要指定表单对象中的数据名称
代码:
立即创建
取消
验收效果
我们做到这一步时,当用户输入的内容不符合表单规则要求时,并且某个输入框失焦时,它会给出相应的提示,当我们输入的内容符合要求时,错误提示会自动消失。
格式
element-ui的表单组件.validate(valid => {
if(valid) {
// 通过了验证
} else {
// 验证失败
}
})
说明:
代码-模板
添加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' }
]
}
模板中配置应用规则
立即创建
取消
下面三个地方的属性名必须一致
场景:
密码不允许是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'},
]
}