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; //這行代碼是用來控制跳頁面的 跳轉提交
});
下面看下效果,完美,哈哈