layui form 自定義校驗,不通過form還是會提交的問題

layui一個不錯的前端框架,上手較快不過,不過官網文檔有些還是不全面,廢話不多說,直接入題。

寫了一個form但是要校驗用戶名的唯一性,所以使用了layui的自定義校驗,代碼如下

form.verify({
    username:function(value){
        var code;
        $.ajax({
            type:"get",
            async:false, //必須同步提交
            url: baseURL+'sys/user/username/'+value,
            success:function(res){
                code = res.code;
            }
        })
        if(code==500){
            return '用戶名已存在!';  //返回值必須在這裏返回 只能返回 字符串,不能返回true or false
        }
    }
})

input加上需要校驗的地方,required是必填,username 必須是你上面 定義的驗證方法。

<input type="text" name="username" lay-verify="required|username" autocomplete="off" placeholder="請輸入用戶名" class="layui-input">

接下來就是form 表單的提交方法

form.on('submit(userAddOrUpdate)', function(data){
    var url = data.field.userId == "" ? "sys/user/save" : "sys/user/update";
		
    $.ajax({
        type: "post",
        url: baseURL + url,
        contentType: "application/json",
        data: JSON.stringify(data.field),
        success:function(res){
            if(res.code === 0){
                layer.msg(res.msg);
            }else{
                layer.msg(res.msg);
            }
        }
    })
    //return false; //這行代碼是用來控制跳頁面的 跳轉提交
});

下面看下效果,完美,哈哈

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章