前言
最近感触越来越深，就是要经常分享，分享自己遇到的坑，分享自己的解决办法，分享自己的各种经验，这非常有必要。所以，以后我会尽量定期进行总结分享，与人方便与己方便~（本文内容比较简单，介绍了开发中用到表单校验的一些基础概念和用法，下一篇会总结一下常用校验规则~）
参考链接
表单校验简介
使用目的
在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。
简单使用
Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。
<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-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
ruleForm: {
name: '',
},
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
常用字段
required
是否为必填项，用于验证字段内容是否为空；
type
数据类型，类似数据格式校验，默认是string，常见的类型有number，boolean，integer，float，array，date，email等；
pattern
字段值匹配正则表达式才能通过验证；
min 和 max
对于string和数组来说，min和max表示最小和最大的长度；对于数字number来说，表示限制值大小；
trigger
触发验证的条件；
validator
可以为指定字段自定义验证函数：function(rule, value, callback)；
使用方式
常规
利用el-form的rules属性，对表单做统一处理
常规的对表单做统一处理的使用方式就是像官网示例的那样，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可；
如：表单的rules属性绑定了data里的rules对象；
表单的form-item 活动名称 的 prop属性对应校验规则中的name规则；
<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-item label="活动区域" prop="region">
<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
ruleForm: {
name: '',
region: '',
},
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
],
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
利用el-form-item的rules属性，对表单项单独处理
有时候整个表单可能只需要一个必填项，或者需要对这个必填项做简单的特殊处理，这个时候可以选择这样做：
如：表单中只需要活动名称必填；只需要在所需的el-form-item上绑定rules属性即可；
<el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="活动名称" prop="name" :rules="[{ required: true, message: '活动名称不能为空',trigger: 'blur'}]">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="region">
<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
ruleForm: {
name: '',
region: '',
},
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
利用三元表达式，动态处理表单项的必填或非必填
有时候某个表单项是否必填依赖于另一个表单项，或者另外某个字段值；
比如：当活动区域选择了上海，活动时间必填；
实现起来其实很简单，用一个三元表达式即可。
(开发经验少的我，见到这种处理方式觉得很棒！)
<el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="活动名称" prop="name"
:rules="ruleForm.region == '0' ? [{ required: true, message: '活动名称不能为空',trigger: 'blur'}] : [{ required: false}]">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="region">
<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
ruleForm: {
name: '',
region: '',
},
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
自定义
validator绑定(rule, value, callback) => {} ，
基础用法示例 这是官网给出的示例，展示了如何使用自定义验证规则来完成密码的二次验证。需要注意的是：自定义校验 callback 必须被调用。
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
</el-form-item>
<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-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</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 validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.ruleForm.pass) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
ruleForm: {
pass: '',
checkPass: '',
age: ''
},
rules: {
pass: [
{ validator: validatePass, trigger: 'blur' }
],
checkPass: [
{ validator: validatePass2, trigger: 'blur' }
],
age: [
{ validator: checkAge, trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
validator绑定method,根据接口返回值进行校验并提示错误信息
需求就是，输入id之后调接口判断是否重复，如果重复给出提示；
rule: {
id: [{ required: true, message: '请输入id', trigger: 'blur' },
{ validator: this.check, trigger: 'blur' }],
check(rule, value, callback){
checkData(this.query).then(res =>{
if(res.data.data > 0) {
this.query.id=''
callback(new Error('id重复，请重新输入！'));
} else {
callback()
}
})
},
注意适时清空校验规则 resetFields()
在项目中经常会使用el-dialog里面使用el-form,伴随的业务经常是增加和修改；需要注意关闭dialog时，或者取消相应业务时，清空表单的校验规则！不然下次再打开dialog，还是会有一堆的红色校验信息的提示，体验感很不好。
我正在参与掘金技术社区创作者签约计划招募活动，点击链接报名投稿。
