1：引入 H-ui 用户添加页面，并修改script对应的src,添加input框的name属性值

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<meta name="renderer" content="webkit|ie-comp|ie-stand">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

<meta http-equiv="Cache-Control" content="no-siteapp" />

<!--[if lt IE 9]>

<script type="text/javascript" src="/static/lib/html5shiv.js"></script>

<script type="text/javascript" src="/static/lib/respond.min.js"></script>

<![endif]-->

<link rel="stylesheet" type="text/css" href="/static/static/h-ui/css/H-ui.min.css" />

<link rel="stylesheet" type="text/css" href="/static/static/h-ui.admin/css/H-ui.admin.css" />

<link rel="stylesheet" type="text/css" href="/static/lib/Hui-iconfont/1.0.8/iconfont.css" />

<link rel="stylesheet" type="text/css" href="/static/static/h-ui.admin/skin/default/skin.css" id="skin" />

<link rel="stylesheet" type="text/css" href="/static/static/h-ui.admin/css/style.css" />

<!--[if IE 6]>

<script type="text/javascript" src="/static/lib/DD_belatedPNG_0.0.8a-min.js" ></script>

<script>DD_belatedPNG.fix('*');</script>

<![endif]-->

<title>添加管理员 - 管理员管理 - H-ui.admin v3.1</title>

<meta name="keywords" content="H-ui.admin v3.1,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">

<meta name="description" content="H-ui.admin v3.1，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">

</head>

<body>

<article class="page-container">

    <form class="form form-horizontal" id="form-admin-add">

    @csrf

        <div class="row cl">

        <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>管理员：</label>

        <div class="formControls col-xs-8 col-sm-9">

            <input type="text" class="input-text" value="" placeholder="" id="adminName" name="username">

        </div>

    </div>

    <div class="row cl">

        <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>初始密码：</label>

        <div class="formControls col-xs-8 col-sm-9">

            <input type="password" class="input-text" autocomplete="off" value="" placeholder="密码" id="password" name="password">

        </div>

    </div>

    <div class="row cl">

        <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>确认密码：</label>

        <div class="formControls col-xs-8 col-sm-9">

            <input type="password" class="input-text" autocomplete="off"  placeholder="确认新密码" id="password2" name="confirm_password">

        </div>

    </div>

    <div class="row cl">

        <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>性别：</label>

        <div class="formControls col-xs-8 col-sm-9 skin-minimal">

            <div class="radio-box">

                <input name="sex" type="radio" id="sex-1" value="1" checked>

                <label for="sex-1">男</label>

            </div>

            <div class="radio-box">

                <input type="radio" id="sex-2" name="sex" value="2">

                <label for="sex-2">女</label>

            </div>

        </div>

    </div>

    <div class="row cl">

        <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>手机：</label>

        <div class="formControls col-xs-8 col-sm-9">

            <input type="text" class="input-text" value="" placeholder="" id="phone" name="phone">

        </div>

    </div>

    <div class="row cl">

        <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>邮箱：</label>

        <div class="formControls col-xs-8 col-sm-9">

            <input type="text" class="input-text" placeholder="@" name="email" id="email">

        </div>

    </div>

    <div class="row cl">

        <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">

            <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">

        </div>

    </div>

    </form>

</article>

<!--_footer 作为公共模版分离出去-->

<script type="text/javascript" src="/static/lib/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript" src="/static/lib/layer/2.4/layer.js"></script>

<script type="text/javascript" src="/static/static/h-ui/js/H-ui.min.js"></script>

<script type="text/javascript" src="/static/static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->

<script type="text/javascript" src="/static/lib/jquery.validation/1.14.0/jquery.validate.js"></script>

<script type="text/javascript" src="/static/lib/jquery.validation/1.14.0/validate-methods.js"></script>

<script type="text/javascript" src="/static/lib/jquery.validation/1.14.0/messages_zh.js"></script>

<script type="text/javascript">

    $(function(){

        $('.skin-minimal input').iCheck({

        checkboxClass: 'icheckbox-blue',

        radioClass: 'iradio-blue',

        increaseArea: '20%'

    });

    //验证form表单的id

    $("#form-admin-add").validate({

        //验证规则

        rules:{

            //用户名

            username:{

                required:true,

                minlength:4,

                maxlength:16

            },

            //密码

            password:{

                required:true,

            },

            //确认密码

            confirm_password:{

                required:true,

                equalTo: "#password"

            },

            //性别

            sex:{

                required:true,

            },

            //手机号

            phone:{

                required:true,

                isPhone:true,

            },

            //邮箱

            email:{

                required:true,

                email:true,

            },

        },

        //在 keyup 时验证。

        onkeyup:false,

        //如果是 true 那么当未通过验证的元素获得焦点时，移除错误提示。避免和 focusInvalid 一起用。

        focusCleanup:true,

        //要验证的元素通过验证后的动作，如果跟一个字符串，会当作一个 css 类，也可跟一个函数。

        success:"valid",

        submitHandler:function(form){

            //表单提交

            $(form).ajaxSubmit({

                type: 'post',

                url: "/admin/doregister" ,

                success: function(res){

                    //后端验证不通过

                    if(res.code==500){

                        layer.msg('res.message',{icon:1,time:1000});

                    }

                    //添加成功后

                    if (res.code==200){

                        layer.msg('添加成功!',{icon:1,time:1000});

                        //添加成功后，跳转页面

                        location.href='/admin/email';

                    }

                    //添加失败给出提示

                    if (res.code==501){

                        layer.msg('添加失败!',{icon:1,time:1000});

                    }

                },

                // error: function(XmlHttpRequest, textStatus, errorThrown){

                // layer.msg('error!',{icon:1,time:1000});

                // }

            });

            var index = parent.layer.getFrameIndex(window.name);

            parent.$('.btn-refresh').click();

            parent.layer.close(index);

        }

    });

});

</script>

<!--/请在上方写此页面业务相关的脚本-->

</body>

</html>

2：设置路由

Route::group(['prefix'=>'admin','namespace'=>'day3'],function (){

//用户注册表单页面

    Route::get('register','exam@registerView');

//    表单数据添加

    Route::post('doregister','exam@doregister');

});

3：控制器代码

<?php

namespace App\Http\Controllers\day3;

use App\Http\Controllers\Controller;

use App\models\ExamMoel;

use Illuminate\Http\Request;

use Illuminate\Support\Facades\Mail;

class Exam extends Controller

{

    //

    public function registerView()

    {

        return view('day3.register');

    }

    public function doregister(Request $request)

    {

//接值，去除_token，重复密码

        $params = $request->except('_token', 'confirm_password');

//        验证

        $validate = $this->validate($request, [

            'username' => 'required',

            'password' => 'required',

            'phone' => 'required',

            'email' => 'required',

            'sex' => 'required'

        ], [

            'username.required' => '用户名不可以为空',

            'password.required' => '密码不可以为空',

            'phone.required' => '手机号不可以为空',

            'email.required' => '邮箱不可以为空',

            'sex.required' => '性别不可以为空',

        ], $params);

//        验证不通过给出提示

        if ($validate == false) {

            return ['code' => 500, 'data' => $validate, 'message' => '错误'];

        }

//        设置数据库状态值

        $params['state'] = 1;

//        引入模型进行添加

        $res = ExamMoel::addUser($params);

//        返回结果

        if ($res) {

            return ['code' => 200, 'data' => $params, 'message' => 'ok'];

        } else {

            return ['code' => 501, 'data' => [], 'message' => 'ok'];

        }

    }

}

4：模型代码：

<?php

namespace App\models;

use Illuminate\Database\Eloquent\Model;

class ExamMoel extends Model

{

    //表名

    protected $table='day3';

    public $primaryKey='id';

    public $timestamps=false;

    public static function addUser($params){

            $obj=new self();

            $obj->username=$params['username'];

            $obj->password=$params['password'];

            $obj->sex=$params['sex'];

            $obj->phone=$params['phone'];

            $obj->email=$params['email'];

            $obj->state=$params['state'];

            return $obj->save();

    }

}

5查看数据库

laravel 7 H_ui ajax添加入库及前端jQuery Validate验证+后端验证的更多相关文章

  1. 前端jquery validate表单验证框架的使用

    一.框架本身校验方法的扩展 建议写在页内用于扩展框架本身的一些校验方法, 使用频繁也可以直接在源码上修改 例如扩展手机号码的校验: /*手机号码验证扩展 最新的号码 mobile: class的表示 ...

  2. jQuery Validate 表单验证插件----在class属性中添加校验规则进行简单的校验

    一.下载插件包. 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二.jQuery表单验证插件----添加class属性形式的校验 <!DOCTY ...

  3. Jquery Validate表单验证，动态添加和删除验证规则

    最近一直在忙着维护Jquery的商城,用到了Validate的表单验证,觉得很有意思,就纪录一下. // 动态添加验证规则 $("#invoice_send_region_id") ...

  4. Ajax如何实现从前端不刷新页面就可以到后端取到数据

    提到axaj很多人总说很难,什么回调函数呀等等就让人心烦,其实懂得ajax在js里面是如何实现向服务器请求数据的原理,那么理解ajax也就不是很难了,现在我们一起来看看. ajax作用:ajax技术的 ...

  5. 前端ajax用post方式提交json数据给后端时，网络报错 415

    项目框架:spring+springmvc+mybatis 问题描述:前端ajax用post方式提交json数据给后端时,网络报错 415 前端异常信息:Failed to load resource ...

  6. 教你如何使用flask实现ajax数据入库

    摘要:在正式编写前需要了解一下如何在 python 函数中去判断,一个请求是 get 还是 post. 本文分享自华为云社区<[首发]flask 实现ajax 数据入库,并掌握文件上传>, ...

  7. 前端-jQuery的ajax方法

    https://www.cnblogs.com/majj/p/9134922.html 0.什么是ajax AJAX = 异步的javascript和XML(Asynchronous Javascri ...

  8. Laravel 解决在ajax 请求下不能保存session的问题

    Laravel 解决在ajax 请求下不能保存session的问题 \Session::put('isLogin',true); // 你要保存的session key \Session::put(' ...

  9. 【轮询】【ajax】【js】【spring boot】ajax超时请求：前端轮询处理超时请求解决方案 + spring boot服务设置接口超时时间的设置

    场景描述: ajax设置timeout在本机测试有效,但是在生产环境等外网环境无效的问题 1.ajax的timeout属性设置 前端请求超时事件[网络连接不稳定时候,就无效了] var data = ...

随机推荐

  1. Net6 DI源码分析Part1 ServiceCollection、ServiceDescriptor、ServiceLifetime、IServiceProvider

    ServiceCollection.ServiceDescriptor.ServiceLifetime.IServiceProvider Microsoft.Extensions.Dependency ...

  2. web常用开发工具

    1.WebStorm[推荐] WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.目前已经被广大中国JS开发者誉为"Web前端开发神器"." ...

  3. array_intersect_key 取得需要字段 用法

    $need_key = [ 'hash' => 0 ];        $parma = array_intersect_key( $parmas, $need_key );

  4. 简单的MAC的终端命令

    今天小研究了一下MAC的终端命令,主要为了方便调试程序用,XCODE用不来啊... 在这里记下..防止丢失 pwd 当前工作目录 cd(不加参数) 进root cd(folder) 进入文件夹 cd ...

  5. feiQ发送信息

    import java.io.IOException; import java.net.DatagramPacket; import java.net.DatagramSocket; import j ...

  6. hibernate中的映射文件xxx.hbm.xml详解总结

    转自 http://blog.csdn.net/a9529lty/article/details/6454924 一.hibernate映射文件的作用: Hibernate映射文件是Hibernate ...

  7. Anacanda 与 jupyter 的使用

    内容概要 爬虫开发环境搭建 Anacanda 开发环境 jupyter jupyter 的基本使用 启动 基本使用 快捷键的使用 内容详细 一.爬虫开发环境搭建 1.Anacanda 开发环境 Ana ...

  8. 前端程序员初步认识 docker

    初步认识 docker 为什么要学习 docker 有同学说他开发工作中有两大神器,一个是 vim 编辑器,另一个就是 Docker. 什么是 docker Docker 是一个开源的应用容器引擎. ...

  9. ios开发 将json格式数据上传服务器

    看了一些大小牛的资料其实就3步 1.使用post 请求 ,因为get是不能上传的 2.设置请求类型 , 讲你的json数据上传 3.向服务器发送数据按照下面示例代码,就差不多了 1 // 1.创建请求 ...

  10. zabbix密码复杂度有效期安全增强，符合三级等保要求。

    一.关于三级等保要求 1.zabbix默认没有设置密码复杂度功能,密码有效期功能. 2.zabbix具备失败处理功能,但是没有页面手动调试,需要修改源代码. 3.zabbix具备超时退出功能. 二.整 ...