描述
layui中像输入长度、大小写这样的自定义校验,官方文档中应该很容易看懂的。
这里说两个常用的:注册时的确认密码校验;注册时用户已存在校验。
实施
1、确认密码
html:
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">登录密码</label>
<div class="layui-input-inline">
<input type="password" name="password" lay-verify="required" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">确认密码</label>
<div class="layui-input-inline">
<input type="password" lay-verify="required|confirmPass" class="layui-input">
</div>
</div>
</div>
js:
// 校验两次密码是否一致
form.verify({
confirmPass:function(value){
if($('input[name=password]').val() !== value)
return '两次密码输入不一致!';
}
});
2、用户已存在
html:
<div class="layui-form-item">
<label class="layui-form-label">用户Id</label>
<div class="layui-input-inline">
<input type="text" name="userId" lay-verify="required|isExist" class="layui-input">
</div>
</div>
js:
form.verify({
isExist:function(value){
var params = {"userId":value };
var data;
$.ajax({
url: ...,
contentType: "application/json",
dataType:'json',
type: "post",
async: false,
data: JSON.stringify(params),
success: function(result) {
data = result.flag;
},
});
if (data.flag) {
return '用户id已存在';
}
}
});
结语
layui校验不友好的是在点击提交时才给出提示。
————————————————
版权声明:本文为CSDN博主「SD_54」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_24484911/article/details/94398590