lay-verify 无效
使用lay-verify有两个需要注意的地方:
- form标签需要添加
class="layui-form"
- 提交按钮需要添加
lay-submit=""
如:
<form action="#" method="post" class="layui-form">
<input id="login-username" type="text" name="username" placeholder="Username" lay-verify="required|username">
<input id="login-password" type="password" name="password" placeholder="Password" lay-verify="required|password">
<input class="layui-btn layui-btn-fluid layui-btn-normal " lay-submit="" type="button" value="Login" lay-filter="login-submit">
</form>
<script type="text/javascript">
layui.use(['layer', 'form'], function () {
var layer = layui.layer;
var form = layui.form;
form.verify({
username: function (value, item) {
//value:表单的值、item:表单的DOM对象
if (!new RegExp("^(.+){4,18}$").test(value)) {
return '用户名长度必须为4-18位'
}
if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
return '用户名不能有特殊字符';
}
if (/(^\_)|(\__)|(\_+$)/.test(value)) {
return '用户名首尾不能出现下划线\'_\'';
}
if (/^\d+\d+\d$/.test(value)) {
return '用户名不能全为数字';
}
},
password: [
/^[\S]{6,18}$/,
'密码必须6到12位,且不能出现空格'
],
confirm_password: function (value) {
if (!new RegExp("^[\\S]{6,18}$").test(value)) {
return '密码长度必须为6-18位'
}
if (value !== $('#login-password').val()) {
return '两次输入的密码不一致';
}
}
});
form.on('submit(login-submit)', function (data) {
var login_username = $("#login-username");
var login_password = $("#login-password");
var username = login_username.val();
var password = login_password.val();
password = md5(password);
$.ajax({
url: "/XXX/login/",
type: "POST",
data: {
username: username,
password: password,
csrfmiddlewaretoken: '{{ csrf_token }}'
},
async: false,
success: function (data) {
var status = data.status;
if (status === 0) {
$("#myModal").modal('hide');
layer.msg("Login Success!", {offset: '200px'});
// todo something after login
} else if (status === 21) {
// user not exist
layer.msg(data.msg, {offset: '200px'});
login_username.val("");
login_password.val("");
login_username.focus();
} else if (status === 22) {
// wrong password
layer.msg(data.msg, {offset: '200px'});
login_password.val("");
login_password.focus();
} else {
layer.msg(data.msg, {offset: '200px'});
}
},
error: function () {
layer.msg("System Service Busy!", {offset: '200px'});
}
});
return false;
});
});
</script>