vue+element 学习之路（五）自定义表单校验
示例：
非空校验：
格式校验：
几个常用的校验规则
required：是否非空
max：最大字符数
min：最小字符数
首先给表单绑定校验规则，表单加上ref属性，最后方便遍历表单校验
定义规则：
rules中定义的校验方法通过prop属性传递
当然了这只是第一步校验，当输入框变化时进行校验，为了保证数据正确性，我们通常在提交表单时需要再校验一次
控制台
源码：
<template>
<div>
<el-form :model="reUser" :rules="rules" ref="reUser">
<!-- 隐藏数据 -->
<input type="hidden" v-model="reUser.userId"/>
<!-- 隐藏数据 -->
<!-- 第一行 -->
<el-row :gutter="30">
<el-col :span="8">
<el-form-item label="姓名" label-width="80px" prop="name">
<el-input placeholder="请填写真实姓名" v-model="reUser.name"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="性别" prop="gender">
<el-select placeholder="请选择性别" v-model="reUser.gender">
<el-option label="男" value="M"></el-option>
<el-option label="女" value="F"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="所在地">
<el-cascader
size="large"
:options="options"
v-model="selectedOptions"
@change="handleChange"
>
</el-cascader>
</el-form-item>
</el-col>
</el-row>
<!-- 第二行 -->
<el-row :gutter="30">
<el-col :span="12">
<el-form-item label="手机号码" label-width='80px' prop="telphone">
<el-input placeholder="请输入正确的手机号码" v-model="reUser.telphone"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="邮箱" label-width='80px' prop="email">
<el-input placeholder="请输入正确邮箱" v-model="reUser.email"></el-input>
</el-form-item>
</el-col>
</el-row>
<!-- 第三行 -->
<el-row :gutter="30">
<el-col :span="12">
<el-form-item label="QQ" label-width="80px" prop="qq">
<el-input placeholder="请输入QQ号码" v-model="reUser.qq"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="Wechat" label-width="80px" prop="wechat">
<el-input placeholder="请输入微信号" v-model="reUser.wechat"></el-input>
</el-form-item>
</el-col>
</el-row>
<!-- 第四行 按钮 -->
<el-row>
<el-col :span="6" :offset="18" :gutter="20">
<el-button type="primary" @click="save()">保存</el-button>
<el-button>取消</el-button>
</el-col>
</el-row>
</el-form>
</div>
</template>
<script>
//地区级联插件
import { provinceAndCityData,CodeToText,TextToCode } from 'element-china-area-data';
export default {
name:'userInfo',
data(){
//自定义校验规则 正则表达式校验
//手机格式
let validateTelphone = /^1[34578]\d{9}$/;
let isTelphone = (rule,value,callback) =>{
if(!validateTelphone.test(value)){
return callback(new Error('手机格式不正确！'))
}else{
callback()
}
}
//邮箱格式
let validateEmail = /^([a-zA-Z0-9_-])[email protected]([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
let isEmail = (rule,value,callback) =>{
if(!validateEmail.test(value)){
return callback(new Error('邮箱格式不正确！'))
}else{
callback()
}
}
return{
options:provinceAndCityData,
selectedOptions:[],
reUser:{
userId:'',
name:'',
gender:'',
localtionCode:'',
telphone:'',
email:'',
qq:'',
wechat:'',
},
//字段校验 以prop定位 trigger:blur表示在失去焦点时进行校验 change表示值改变就校验
rules:{
name:[
{required:true,message:'请输入姓名',trigger:'blur'},
{min:2,max:20,message:'姓名不符合规范',trigger:'blur'}
],
gender:[
{required:true,message:'请选择性别',trigger:'change'}
],
telphone:[
{required:true,message:'请输入手机号码',trigger:'blur'},
{validator:isTelphone}
],
email:[
{required:true,message:'请输入邮箱号码',trigger:'blur'},
{validator:isEmail}
],
qq:[
{max:16,message:'QQ号码长度超出限制',trigger:'blur'}
],
wechat:[
{max:30,message:'微信号长度超出限制',trigger:'blur'}
]
}
}
},
methods:{
handleChange(value){
this.reUser.localtionCode = value[0]+value[1]
},
save(){
//提交前校验
this.$refs['reUser'].validate((valid)=>{
if(valid){
console.log(this.reUser)
}else{
console.log('error')
}
})
}
}
}
</script>
<style>
</style>
以上是 vue+element 学习之路（五）自定义表单校验 的全部内容， 来源链接： utcz.com/z/378365.html
