1.最简单的普通校验
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="活动名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
}
}
}
}
</script>
rules对象中的属性名‘name’,是根据prop='name’这个‘name’定义的;(一般如果prop=‘zs’,rules对象中的校验属性名也要叫‘zs’);
trigger定义触发校验的方式
2.自定义校验
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="确认密码" prop="checkPass">
<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="ruleForm.age"></el-input>
</el-form-item>
</el-form>
<script>
export default {
data() {
var checkAge = (rule, value, callback) => {
if (!value) {
return callback(new Error('年龄不能为空'));
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('请输入数字值'));
} else {
if (value < 18) {
callback(new Error('必须年满18岁'));
} else {
callback();
}
}
}, 1000);
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.ruleForm.pass) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
ruleForm: {
checkPass: '',
age: ''
},
rules: {
checkPass: [
{ validator: validatePass2, trigger: 'blur' }
],
age: [
{ validator: checkAge, trigger: 'blur' }
]
}
}
}
</script>
3.1跟其他数据有联动逻辑,当数据1有值时数据2才必填,否则非必填这种情况的校验;
如果有多个input需要一样的校验逻辑,也可以在commin.js中定义一个公共的校验方法;
required:动态的控制必填与非必填;
checkCnt自定义的校验逻辑;
表单校验规则一般写在data中,但有时候也可以写在computed计算属性里;
ref="dataForm"
:model="form"
:rules="formRules"
label-width="80px"
class="form_dialog"
>
<el-descriptions border >
<el-descriptions-item>
<template slot="label"> 1优化完善业务流程 </template>
<el-form-item label="" prop="obj1">
<el-input
v-model="form.obj1"
:disabled="checkType"
maxlength="100"
class="ipt_w"
/>
</el-form-item>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
流程数量
<span v-if="flag" class="valid">*</span>
</template>
<el-form-item label="" prop="obj2">
<el-input
v-model="form.obj2"
/>
</el-form-item>
</el-descriptions-item>
</el-descriptions>
</el-form>
import { checkCnt } from './common.js'
data() {
return {
flag:false,
form:{ }
}
}
watch: {
// 监听数据1并且给必选/非必须一个标识 :
'form.obj1': {
handler(val) {
if (val) {
this.flag= true
} else {
this.flag= false
}
},
immediate: true
},
},
computed: {
// 表单校验
formRules() {
return {
// 校验-流程数量
obj2: [
{
validator: (_, value, callback) =>
checkCnt(value, callback, this.flag),
trigger: 'blur',
required: this.ywlcFlag
}
],
}
}
}
common.js
export const checkCnt = (value, callback, status) => {
if (status) {
if (value) {
if (/^[1-9]\d*$/.test(value) && value >= 1) {
callback()
} else {
callback(new Error('数量请输入大于0的整数'))
}
} else {
callback(new Error('数量不能为空'))
}
} else {
callback()
}
}
3.2 也可以校验逻辑直接在methods中定义一个方法,在data中直接this.方法名去调用;
data() {
return {
// 表单校验
rules: {
stockCode: [
{
validator: this.validStockCode,
trigger: 'blur',
required: true
}
]
}
}
},
methods: {
validStockCode(rule, value, callback) {
if (!this.isZQ) {
if (!value) {
return callback(new Error('账号不能为空'))
} else {
callback()
}
} else {
if (!value) {
return callback(new Error('账号不能为空'))
} else {
if (this.isValidStockCode(value)) {
callback()
} else {
callback(new Error('长度必须8位或10位'))
}
}
}
}
}
以上就是最近关于form表单校验的一点整理,希望能帮助到刚开始做前端的基础小白;