laravel 5.4 中的客户端验证

Question

我已将此 https://github.com/proengsoft/laravel-jsvalidation 用于客户端验证。服务器端验证有效，但客户端 onFocusout 验证未启动。
在作曲家文件中 Laravel 5.4 "proengsoft/laravel-jsvalidation": "^2.0" 在控制器中

    <?php 
 protected $validationRules=[
        'email' => 'required|unique|max:255',
        'name' => 'required',
        'password' => 'required',
        'userRoleId' => 'required'
    ];
public function create() {
        $model = new Admuser();
       $validator = JsValidator::make($this->validationRules); 

        $userRoleData = Userrole::orderBy('role')->pluck('role', 'userRoleId'); 

        return view('adminlte::portaluser.create')->with([
            'validator' => $validator,
            'userRoleData' => $userRoleData,
        ]); 

    }
?>

并在查看文件中创建用户数据

  {!! Form::open(['url' => 'backoffice/portaluser/store', 'class' => 'form-horizontal']) !!}
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <fieldset>        
                        <div class="col-sm-8">

                                    <div class="form-group {{ $errors->has('name') ? 'has-error' : ''}}">
                                        {!! Form::label('name', 'Name:', ['class' => 'col-lg-2 control-label']) !!}
                                        <div class="col-lg-10">
                                            {!! Form::text('name', $value = null, ['class' => 'form-control', 'placeholder' => 'Name']) !!}
                                            {!! $errors->first('name', '<p class="help-block">:message</p>') !!}
                                        </div>
                                    </div>

                                    <div class="form-group {{ $errors->has('email') ? 'has-error' : ''}}">
                                        {!! Form::label('email', 'Email:', ['class' => 'col-lg-2 control-label']) !!}
                                        <div class="col-lg-10">
                                            {!! Form::email('email', $value = null, ['class' => 'form-control', 'placeholder' => 'Email', ]) !!}
                                            {!! $errors->first('email', '<p class="help-block">:message</p>') !!}
                                        </div>
                                    </div>
                                    <div class="form-group {{ $errors->has('password') ? 'has-error' : ''}}">
                                        {!! Form::label('password', 'Password:', ['class' => 'col-lg-2 control-label']) !!}
                                        <div class="col-lg-10">
                                            {!! Form::password('password',   ['class' => 'form-control', 'placeholder' => 'Password', 'type' => 'password', ]) !!}
                                            {!! $errors->first('password', '<p class="help-block">:message</p>') !!}
                                        </div>
                                    </div>

                                    <div class="form-group {{ $errors->has('userRoleId') ? 'has-error' : ''}}">
                                        {!! Form::label('userRoleId', 'Select Userrole', ['class' => 'col-lg-2 control-label'] )  !!}
                                        <div class="col-lg-10">
                                            {!!  Form::select('userRoleId',  $userRoleData, '', ['class' => 'form-control' ]) !!}
                                            {!! $errors->first('userRoleId', '<p class="help-block">:message</p>') !!}
                                        </div>
                                    </div> 
                          <button type="submit" class="submitbtn btn btn-primary">Submit</button>
                        </div>

                    </fieldset> 
                    {!! Form::close()  !!} 

<!-- Scripts --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>

<!-- Laravel Javascript Validation -->
<script type="text/javascript" src="{{ asset('/jsvalidation/js/jsvalidation.js')}}"></script> 
{!! $validator !!}

Answer 1

我想你的问题与 jsvalidation 无关，但与 OnFocusOut 的工作逻辑有关。

测试活动的运作方式：

<!DOCTYPE html>
<html>
<body>

Enter your name: <input type="text" id="fname" onfocusout="myFunction()">

<p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>

<script>
function myFunction() {
    var x = document.getElementById("fname");
    x.value = x.value.toUpperCase();
}
</script>

</body>
</html>

onfocusout 事件在元素即将失去焦点时发生。

提示：onfocusout事件类似于onblur事件。主要区别在于 onblur 事件不会冒泡。因此，如果你想知道一个元素或者它的子元素是否失去焦点，你应该使用onfocusout事件。

提示：虽然 Firefox 不支持 onfocusout 事件，但您可以通过使用 onblur 事件的捕获侦听器（使用 addEventListener( ) 方法)。

提示：onfocusout事件与onfocusin事件相反。

确保您需要 onfocusout 而不是 onmouseleave 事件。

laravel 5.4 中的客户端验证

client validation in laravel 5.4

laravel

client-side-validation

jsvalidation