网站建设工具开源,阳江人才招聘网官网,外链seo服务,谷歌推广代理1、问题说明#xff1a;
在开发表单的时候#xff0c;可能会遇到el-form-item中绑定的值不在表单绑定的数据对象中。
此时用prop绑定该字段名是无效的#xff0c;需要单独对这个字段进行校验。
在el-form-item中有一个属性 error 。用于表单域验证错误信息#xff0c;设…1、问题说明
在开发表单的时候可能会遇到el-form-item中绑定的值不在表单绑定的数据对象中。
此时用prop绑定该字段名是无效的需要单独对这个字段进行校验。
在el-form-item中有一个属性 error 。用于表单域验证错误信息设置该值会使表单验证状态变为error并显示该错误信息。
2、方法
1设置required给label增加校验的*图标
2设置error属性初始值设为空在表单校验时做一个判断如果字段为空时给error赋值校验失败提示文字。
3同时加一个失去焦点时的方法 blur input输入框select下拉框用change事件其他的根据情况选择事件在进行表单操作时也做校验。
3、代码
templateel-form refform :rulesrules :modelform label-width110px
!-- 1、设置required :errorcustomError--el-form-item label非表单校验 required :errorcustomErrorel-input v-modelcustomValid blurcheckCustomValid/el-input/el-form-itemel-form-item label活动形式 propdescel-input typetextarea v-modelform.desc/el-input/el-form-itemel-form-itemel-button typeprimary clickonSubmit确定/el-buttonel-button取消/el-button/el-form-item/el-form
/template
script
export default {data() {return {form: {desc: },rules: {desc: [{ required: true, message: 请填写活动形式, trigger: blur }]},// 要非表单校验的参数customValid: ,// 显示非表单校验的内容customError: }},methods: {// 2、非表单校验checkCustomValid(){if (!this.customValid.trim()) {this.customError 非表单校验不能为空return false} else {this.customError return true}},// 提交onSubmit() {this.$refs.form.validate((valid) {// 3.提交校验this.checkCustomValid()if (this.checkCustomValid() valid) {alert(submit!);} else {console.log(error submit!!);return false;}});}}
}
/script
