在我的vuejs 2.5表单中，我出现错误时出现了颜色错误
<label class="col-xs-12 col-sm-4 control-label">Name<span class="required"> * </span></label>
<div class="col-xs-12 col-sm-8">
<input type="text" v-model="newUserTaskType.name" v-bind:class="{'form-control':true, 'text-warning': errorsList.name}"
placeholder="Enter unique name of new user's task type" >
<small v-if="errorsList.name" class="text-warning">{{ errorsList.name[0] }}</small>
</div>
我想在输入错误的情况下按下大小写按键清除此彩色范围。 当我使用Jquery时，我写了一个像
这样的函数setErrorKeypress: function () {
$(".text-warning").bind('keypress', function () {
$(this).removeClass("text-warning");
...
但是如果erorr span有文本警告类，它现在不会被触发。
我找到了一个关键的处理程序，如：
<input v-on:keydown="keyhandler" />
但我不喜欢在任何输入定义中设置事件的方法。
你能给出一个参考/提示，以这种方式实现吗？
谢谢！
您好， 让我再问2个关于这个主题的问题： 我使用VeeValidate进行表单验证，它运行正常。 但是我决定使用slot重新编写我的编辑器，比如资源/ assets / js / components / lib / FormHelper.vue：
<template>
<section>
<div class="panel panel-default">
<div id="form-header">
<h3>Fill the form:FormHelper.vue</h3>
<editor-header :show_loading_image="!is_page_loaded || is_page_updating" :header_title=title :message=message></editor-header>
</div>
<form @submit.prevent="validateBeforeSubmit" id="form_document_category_edit" class="form-horizontal">
<div id="form-editable-fields">
<slot name="form-editable-fields"></slot>
</div>
<div id="form-button-controls">
<slot name="form-button-controls">
<div class="row pull-right">
<editor-buttons submit_label="Update" cancel_label="Cancel" :is_page_updating="is_page_updating"></editor-buttons>
</div>
</slot>
</div>
</form>
</div>
</section>
</template>
<script>
import appMixin from '../../appMixin';
export default{
created() {
},
mixins : [appMixin],
mounted() {
}, // mounted() {
methods: {
validateBeforeSubmit() {
alert( "validateBeforeSubmit::"+var_dump(-1) )
this.$validator.validateAll().then((result) => {
if (result) {
alert( "Validated::"+(-9) )
this.updateDocumentCategory()
return;
}
alert( "False::"+(0) )
})
}, // validateBeforeSubmit() {
}, // methods: {
data(){
return{
title : 'Default Title',
message : '',
is_page_loaded:false,
is_page_updating:false,
}
},
}
</script>
并在resources / assets / js / components / user_task_types / UserTaskTypesCreate.vue中使用此助手：
<template>
<section>
<form-helper title="Password Reset" >
<div slot="form-editable-fields">
<div class="row">
<div class="col-xs-12 form-group">
<label class="col-xs-12 col-sm-4 control-label">Name<span class="required"> * </span></label>
<div class="col-xs-12 col-sm-8">
<input name="name" v-validate="'required'" type="text" v-model="newUserTaskType.name"
:class="{ 'form-control':true, 'input': true, 'text-danger': vueErrorsList.has('name') }"
placeholder="Enter unique name of new user's task type">
<span v-show="vueErrorsList.has('name')" class="text-danger">{{ vueErrorsList.first('name') }}</span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 form-group">
<label class="col-xs-12 col-sm-4 control-label">Description<span class="required"> * </span></label>
<div class="col-xs-12 col-sm-8">
<textarea name="description" v-validate="'required'" v-model="newUserTaskType.description" rows="10"
:class="{ 'form-control':true, 'input': true, 'text-danger': vueErrorsList.has('description') }"
placeholder="Enter description of new user's task type"></textarea>
<span v-show="vueErrorsList.has('description')" class="text-danger">{{ vueErrorsList.first('description') }}</span>
</div>
</div>
</div>
</div> <!-- <div slot="form-editable-fields -->
</form-helper>
</section>
</template>
<script>
import appMixin from '../../appMixin';
import formHelper from '../lib/FormHelper.vue'; // resources/assets/js/components/lib/FormHelper.vue
export default{
components: {
'form-helper': formHelper,
},
created() {
},
mixins : [appMixin],
mounted() {
this.setUserTaskTypeDefaultValue();
this.loadUserTaskTypeDictionaries()
}, // mounted() {
data(){
return{
header_title : 'Create new user\'s task type',
newUserTaskType:{
name:'',
description:'',
},
errorsList:[],
message:'',
}
},
methods:{
createUserTaskType() {
this.is_page_updating= true
axios.post(window.API_VERSION_LINK + '/user_task_types', this.newUserTaskType).then((response) => {
this.errorsList= [];
this.is_page_updating= false
this.newUserTaskType = []
this.$router.push({path: '/'});
}).catch((error) => {
this.$setLaravelValidationErrorsFromResponse(error.response.data);
this.is_page_updating= false
this.showRunTimeError(error, this);
});
}, // createUserTaskType() {
setUserTaskTypeDefaultValue() {
this.newUserTaskType.name= '';
this.newUserTaskType.description= '';
},
loadUserTaskTypeDictionaries() {
this.is_page_loaded = true
}, // loadDocumentCategoryDictionaries() {
}
}
</script>
1）当我点击带有必需选项的字段时，我收到错误消息， bluring输入我收到错误消息，因为输入在UserTaskTypesCreate.vue文件中。
但是当我点击提交功能时（调用validateBeforeSubmit） 验证无法正常工作。看起来帮助器中的验证对象与验证对象不同 UserTaskTypesCreate.vue表单。如果有一种方法可以在表单和帮助器中使用相同的验证对象吗？
2）助手的变量具有默认值
title : 'Default Title',
调用for我将title属性设置为：
<form-helper title="Password Reset" >
但它不起作用，我看到默认值。哪种方法正确？
谢谢！
答案 0 :(得分：1)
是的，您需要通过验证来捕获每个输入的关键新闻事件。
按下输入时删除text-warning课程可能有误。
您可能对该输入有验证规则，用户输入错误。因此，您向用户发出错误消息警告。在这种情况下，如果在按键时删除错误类，则用户可能看起来不对。当用户输入正确的输入时，最好将其删除。
我使用VeeValidate来验证Vue的输入。这将更容易并节省时间。