我想显示一个密码条件,输入密码和条件时应该显示该密码条件。
它应该显示在密码的文本字段下方。
我需要知道如何做到这一点,我对此密码文本字段进行了屏幕截图,并在此文本字段下方显示了消息。
任何帮助将不胜感激!
答案 0 :(得分:0)
您可以使用Vue.js和axios验证并显示错误。在控制器中有一个名为/ validate-data的路由来验证数据。
app.js文件:
import Vue from 'vue'
window.Vue = require('vue');
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
class Errors {
constructor() {
this.errors = {};
}
get(field) {
if (this.errors[field]) {
return this.errors[field][0];
}
}
record(errors) {
this.errors = errors;
}
clear(field) {
delete this.errors[field];
}
has(field) {
return this.errors.hasOwnProperty(field);
}
any() {
return Object.keys(this.errors).length > 0;
}
}
new Vue({
el: '#app',
data:{
errors: new Errors(),
model: {
business-name: '',
business-description: '',
business-phone: ''
},
},
methods: {
onComplete: function(){
axios.post('/validate-data', this.$data.model)
// .then(this.onSuccess)
.catch(error => this.errors.record(error.response.data.errors));
},
}
});
使用控制器中的方法创建一个名为/ validate-data的路由,执行标准验证
$this->validate(request(), [
'business-name'=> 'required|string|max:255',
'business-description'=> 'required|string',
'business-phone' => 'nullable|phone|numeric',
'business-email' => 'nullable|email',
'business-street'=> 'required|string',
'business-city' => 'required|string',
'business-state' => 'required|string|max:2',
'business-zip' => 'required|min:5|max:5|numeric'
]
);
然后使用与vue.js数据模型字段相对应的v-model在视图文件中创建输入。在其下,添加一个带有错误类(例如,基本的红色错误样式)的跨度,该类仅在存在错误的情况下显示。例如:
<input type="text" name="business-name" v-model="model.business-name" class="input">
<span class="error-text" v-if="errors.has('business-name')" v-text="errors.get('business-name')"></span>
请不要忘记在视图文件的页脚中包含app.js文件。记住要包括标签,然后运行npm run watch来编译vue代码。这将使您可以验证其输入字段下的所有错误。
忘记添加,有一个带有@ onclick =“ onComplete”的按钮来运行validate方法。