一.基本表单验证
1.el-form绑定
model:绑定数据
rules:验证规则
ref='form'用于获取el-form的实例对象
2.el-fom-item
prop=’需要验证的字段名‘
rules:{
prop对应的值:[
{required:true,message:"错误信息",trigger:"change/blur"},
{min:最小长度,max:最大长度,message:"错误信息",trigger:"change/blur"}
{
自定义规则:
validator:(rule,value,callback)=>{
rule:规则
value:当前验证项的值
callback:回调函数
验证成功:callback()
验证失败:callback(new Error('错误信息'))
} ,
trigger:"change/blur"
}
]
}
二.全局表单验证
el-form ref="form"
this.$refs.form.validate((result)=>{
result:true 验证成功
false:验证失败
})
三.代码照进现实
<template>
<div class="box">
<el-form ref="form" :model="form" :rules="rules">
<el-form-item label="账号" prop="mobile">
<el-input v-model="form.mobile" />
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="form.password" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="fn">提交</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: '',
data() {
return {
form: {
mobile: '',
password: ''
},
rules: {
mobile: [{ required: true, message: '请输入正确手机号', trigger: 'blur' }],
password: [{ required: true, message: '请输入正确手机号', trigger: 'blur' }, {
validator: (rule, value, callback) => {
const reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
if (reg.test(value)) {
callback()
} else {
return callback(new Error('请输入正确的手机号'))
}
},
trigger: 'change'
}]
}
}
},
methods: {
fn() {
this.$refs.form.validate((result) => {
if (result) {
this.$message('验证通过')
} else {
this.$message('验证失败')
}
})
}
}
}
</script>
<style scoped>
.box{
height: 100%;
}
</style>
这些就是饿了么的一些基本的表单验证,希望能帮助到大家。