bab-icon/resources/views/admins/users/create.blade.php

<div style="margin-top: 10px;" id="users-app">
    <div style="text-align: center;margin-top: 5px;margin-bottom: 10px;font-size: 20px;">
        新增 - 账号
    </div>

    <el-form action="{{route('admin.user.save')}}" method="post" id="form-create">
        <!-- name -->
        <ui-input-text label="账号昵称：" name="name" placeholder="账号昵称" maxlength="255" tips="请输入账号昵称" autofocus="true"></ui-input-text>
        <!-- email -->
        <ui-input-text label="账号(邮箱)：" name="email" placeholder="注册邮箱账号" maxlength="255" tips="请输入注册邮箱" autofocus="true"></ui-input-text>
        <!-- password -->
        <ui-input-text label="登录密码：" name="password" placeholder="登录密码" minlength="6" maxlength="12" tips="请输入登录密码" autofocus="true"></ui-input-text>
        {{-- 商品分类 --}}
        <ui-select label="选择角色：" name="role_id" placeholder="" :options="options" :free="true"></ui-select>
        <ui-submit></ui-submit>
    </el-form>
</div>

<script type="application/javascript">
    $(function () {
        // 注意：Vue组件一定放在jQuery.validator前面验证
        new Vue({
            el: '#users-app',
            data :function () {
                return {
                    options: {!! $options !!},
               
                };
            }
        });
        jQuery.validator.setDefaults({
            debug: false,         // 调试模式true不会提交,false允许提交
            success: "success",   // 匹配成功的class样式名称
            errorElement: 'div'   // 兼容el标签时使用(兼容el Vue组件label.error标签问题)
        });
        // 前台数据验证 验证需要设置window.form全局变量
        window.form = $('#form-create').validate({
            rules: {
                email: {
                    required: true,
                    email: true,
                    maxlength: 255,
                    normalizer: function ( value ) {
                        return $.trim(value);
                    }
                },
                name: {
                    required: true
                },
                password: {
                    required: true
                },
                role_id: {
                    required: true
                }
            }
        });
    });
</script>
@include('layouts.admin.form_script')