layui的form表单字段校验

layui的form表单字段校验

代码示例

<form class="layui-form">
          <input type="hidden" name="cateId" th:value="${category != null ? category.cateId : 0}">
          <div class="layui-form-item">
              <label for="name" class="layui-form-label">
                  <span class="x-red">*</span>分类名
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="name" name="name" required lay-verify="required" th:value ="${category!= null ? category.name : ''}"
                  class="layui-input">
              </div>
          </div>
          <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span>是否为父母录
                </label>
                <div class="layui-input-inline">
                    <input type="radio"  name="isParent" required="" lay-verify="required" value="1" th:checked="${category != null and category.isParent == 1}"
                           class="layui-input">是&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="radio"  name="isParent" required="" lay-verify="required" value="0" th:checked="${category != null and category.isParent == 0}"
                           class="layui-input">否
                </div>
          </div>
          <div class="layui-form-item">
                <label for="category_id" class="layui-form-label">
                    <span class="x-red">*</span>父母录id
                </label>
                <div class="layui-input-inline">
                    <select name="parentId" id="category_id">
                        <option value="0"></option>
                        <option th:each="parentCate:${parentCateList}" th:value="${parentCate.cateId}" th:text="${parentCate.name}" th:selected="${category!= null and (parentCate.cateId  eq category.parentId)}"></option>
                    </select>
                </div>
          </div>
          <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <button  class="layui-btn" lay-filter="add" lay-submit id="addButton">
                    添加
                </button>
          </div>
      </form>

js代码

layui.use(['form','layer'], function() {
            $ = layui.jquery;
            var form = layui.form,
            layer = layui.layer;
            var nameFlag = 0;//为0表示nameFlag可以注册，为1表示不可以
            //校验目录名的唯一性
            $("#name").on("blur",function () {
                var name = $("#name").val();
                $.ajax({
                    url :'admin/checkCateName',
                    type:'post',
                    data:{
                        name:name,
                    },
                    beforeSend: function(xhr){
                        xhr.setRequestHeader(header, token);
                    },
                    success:function (data) {
                        //console.log(data);
                        if(data.code == 201){//字符串相等
                            nameFlag = 1;
                            layer.msg(data.message, {icon: 7}, 1000);
                        }else{
                            nameFlag = 0;
                        }
                    },
                    error:function (data) {
                        layer.msg(data.message, {icon: 2}, 1000);
                    }
                })
            });
            form.on('submit(add)', function(data){
                alert(111);
                layer.msg(JSON.stringify(data.field));
                    var content = new FormData($("form")[0]);
                    var name = $("#name").val();
                    if(name == ''){
                        nameFlag = 1;
                    }
                    if(nameFlag == 0){
                        $.ajax({
                            url: 'admin/addCate',
                            type: 'post',
                            dataType: 'json',
                            async: false,
                            processData: false,  //tell jQuery not to process the data
                            contentType: false,  //tell jQuery not to set contentType
                            data: content,
                            beforeSend: function(xhr){
                                xhr.setRequestHeader(header, token);
                            },
                            success: function (data) {
                                if(data.code == 200 ){
                                    layer.msg(data.message, {icon: 1}, 1000);
                                }else {
                                    layer.alert(data.message, {icon: 2}, 1000);
                                }
                            }, error: function () {
                                layer.msg("内部错误", {icon: 7},1000);
                            }
                        });
                    }
                    // 获得frame索引
                    var index = parent.layer.getFrameIndex(window.name);
                    //关闭当前frame
                    parent.layer.close(index);
                    //刷新父页面
                    parent.location.reload();
                return false;
            });

        });