laravel 5.4中的客户端验证

Rups 发表于 Dev

毛虫

我已经将此https://github.com/proengsoft/laravel-jsvalidation用于客户端验证。服务器端验证正在运行，但客户端onFocusout验证未启动。
在作曲家文件Laravel 5.4“ proengsoft / laravel-jsvalidation”中：“ ^ 2.0”在Controller中

    <?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,
        ]); 

    }
?>

并在View文件中创建用户数据

  {!! 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 !!}

亚当·科兹洛夫斯基

我想您的问题与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（）方法的可选useCapture参数）来确定元素的子代是否失去焦点。

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

要确保你需要onfocusout不onmouseleave活动。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。