所需的HTML引导程序属性不起作用

Question

我在我的laravel中使用vuexy管理面板，我想使用表单验证，我需要添加一个css和js插件。我试着添加它，但它没有出现在"文本字段"下；该字段必须填写"；提交时，我添加所有插件css和JS的代码中的错误在哪里？

代码头CSS

<!-- BEGIN: Vendor CSS-->
<link rel="stylesheet" type="text/css" href="{{asset('app-assets/vendors/css/vendors.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('app-assets/vendors/css/tables/datatable/datatables.min.css')}}">
<!-- END: Vendor CSS-->
<!-- BEGIN: Theme CSS-->
<link rel="stylesheet" type="text/css" href="{{asset('app-assets/css/bootstrap.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('app-assets/css/bootstrap-extended.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('app-assets/vendors/css/forms/select/select2.min.css')}}">
<!-- BEGIN: Page CSS-->
<link rel="stylesheet" type="text/css" href="{{asset('app-assets/css/plugins/forms/validation/form-validation.css')}}">
<link rel="stylesheet" href="{{asset('app-assets/sweetalert/sweetalert2.min.css')}}">
<!-- END: Page CSS-->
<!-- BEGIN: Custom CSS-->
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/style.css')}}">
<!-- END: Custom CSS-->
</head>

我的表单代码

<form class="form form-horizontal" id="formfg"  novalidate>
<div class="form-body">
<div class="row" style="margin-top: 10px">
<div class="col-12">
<div class="form-group row">
<div class="col-md-2">
<label class="font-weight-bolder">Category Code<span class="required">*</span></label>
</div>
<div class="col-md-4">
<input type="text" id="category_code" class="form-control" name="category_code"  value="{{$valuecode}}"  autocomplete="off" required>
</div>
</div>
<div class="form-group row">
<div class="col-md-2">
<label class="font-weight-bolder">Category Name<span class="required">*</span></label>
</div>
<div class="col-md-4">
<input type="text" id="category_name" class="form-control" name="category_name"  autocomplete="off" required>
</div>
</div>
<div  class="col-12 d-flex justify-content-center">
<button type="submit" id="btnData"  class="btn btn-success">Save</button>
&nbsp;
<a href="{{ url('master-category') }}" class="btn btn-danger">Kembali</a>
</div>
</div>
</div>
</div>
</form>

我的js插件代码

<!-- BEGIN: Vendor JS-->
<script src="{{asset('app-assets/js/jquery.min.js')}}"></script>
<script src="{{asset('app-assets/vendors/js/vendors.min.js')}}"></script>
<script src="{{asset('app-assets/vendors/js/tables/datatable/datatables.min.js')}}"></script>
<script src="{{asset('app-assets/vendors/js/tables/datatable/datatables.buttons.min.js')}}"></script>
<script src="{{asset('app-assets/vendors/js/tables/datatable/buttons.html5.min.js')}}"></script>
<script src="{{asset('app-assets/vendors/js/tables/datatable/buttons.bootstrap.min.js')}}"></script>
<script src="{{asset('app-assets/vendors/js/tables/datatable/datatables.bootstrap4.min.js')}}"></script>
<!-- BEGIN Vendor JS-->
<!-- BEGIN: Page Vendor JS-->
<script src="{{asset('app-assets/vendors/js/ui/prism.min.js')}}"></script>
<script src="{{asset('app-assets/vendors/js/forms/validation/jqBootstrapValidation.js')}}"></script>
<!-- END: Page Vendor JS-->
<!-- BEGIN: Theme JS-->
<script src="{{asset('app-assets/js/core/app-menu.js')}}"></script>
<script src="{{asset('app-assets/js/core/app.js')}}"></script>
<script src="{{asset('app-assets/js/scripts/components.js')}}"></script>
<script src="{{asset('app-assets/vendors/js/forms/select/select2.full.min.js')}}"></script>
<script src="{{ URL::asset('app-assets/sweetalert/sweetalert2.min.js')}}"></script>
<!-- END: Theme JS-->
<!-- BEGIN: Page JS-->
<script src="{{asset('app-assets/js/scripts/forms/select/form-select2.js')}}"></script>
<script src="{{asset('app-assets/js/scripts/forms/validation/form-validation.js')}}"></script>
<!-- END: Page JS-->
@yield('script')

Answer 1

Vuexy已经附带了Vee验证插件，如果您的版本中没有，您可以使用npm显式添加它！

导入后，在<form>中，对于每个输入或所需字段，您可以添加这样的结构，

<input type="text" 
id="category_name" 
class="form-control" 
name="category_name"  
autocomplete="off" 
v-validate="'required'" />

<span class="text-danger text-sm"  
v-show="errors.has('category_name')">

{{ errors.first('category_name') }}
</span>

在这里，将切换错误，查看vee验证api以获取更多详细信息。