先通过 layui 进行表单验证 ，验证通过后使用ajax提交表单

一、需求

• 使用 layui-verify 验证 表单选项 , 如果不满足则停留在此页面 ， 不进行表单提交 。
• 如果表单验证通过 ，通过ajax对表单进行相应操作。

二、效果图

三、如何使用 ？

示例 ：

表单

<form class="layui-form" id="addBookForm">

    <div class="layui-form-item">
        <label class="layui-form-label">
            书 名
        label>
        <div class="layui-input-inline">
            <input required="" lay-verify="required" id="bookName" type="text" name="bookName"
            placeholder="请输入书名" class="layui-input" />
        div>
    div>
    
    <div class="layui-form-item">
        <label class="layui-form-label">
            作 者
        label>
        <div class="layui-input-inline">
            <input id="bookAuthor" lay-verify="required" type="text" name="bookAuthor"
            placeholder="请输入作者" class="layui-input" />
        div>
    div>
    
    
    <div style="margin-left: 60px">
        <input type="btn" lay-filter="btn1" id="btn1" class="layui-btn" lay-submit=""
        value="添加" />
    div>
    
form>

js模块

layui.use('form', function () {
     
    let form = layui.form;

    form.on('submit(btn1)', function (data) {
     
        addBook();

        // console.log(data.field); //当前容器的全部表单字段，名值对形式：{name: value};获取单个值data.field["title"]
         return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });
});

function addBook() {
     
    
    $.ajax({
     
        async: false,
        type: 'post',
        url: '/addBook',
        data: $('#addBookForm').serialize(),
        success: function (data) {
     
            layer.msg("添加成功" ,{
     time: 1500 ,icon:1});
        },
        error: function (data) {
     
            alert("添加失败");
        }
    });
};