模块的引入
//单个模块的引入
layui.use('form',function(){
var form=layui.form;//表单
})
//多个模块的引入
layui.use(['carousel','form','layer'],function(){
var carousel=layui.carousel,//轮播
form=layui.form,//表单
layer=layui.layer;//弹出层
})
表单模块
自定义验证规则
只要在html结构里面对应的input标签加上 lay-verify="required|userName" 即可
lay-verify取值的范围
required(必填项)phone(手机号)email(邮箱)url(网址)number(数字)
date(日期)dentity(身份证)自定义值
//自定义验证规则
form.verify({
userName: function (value) {
if (value.length < 5) {
return '账号至少得5个字符';
}
},
pass: [/^[\S]{6,12}$/, '密码必须6到12位,且不能出现空格'],
passConfirm: function (value) {
if (value != $('.register_main input[name=pwd]').val()) {
return '两次密码不一致'
}
},
tel: [/^1(3[0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])\d{8}$/, '手机号码错误'],
email: [/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/, '邮箱格式不正确'],
vercodes: function (value) {
//获取验证码
var ljyVerCode = $(".ljyVerCode").html();
if (value != ljyVerCode) {
return '验证码错误(区分大小写)';
}
},
content: function (value) {
layedit.sync(editIndex);
}
});
验证码规则
<div class="ljy_lofo_vercode ljyVerCode" onclick="ljyVerCode()"></div>//点击刷新
//封装一个生成随机数的函数
//生成随机数
function ljyVerCode(len) {
len = len || 4;
var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; //默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1
var maxPos = $chars.length;
var ljyCode = '';
for (i = 0; i < len; i++) {
ljyCode += $chars.charAt(Math.floor(Math.random() * maxPos));
}
$(".ljyVerCode").html(ljyCode);//插入到html标签中
}
//初始化调用这个函数
$(function(){
ljyVerCode()
})
//然后再自定义规则里面就可以
vercodes: ...(见上文)
提交事件触发
<button lay-submit lay-filter="login">登录</button>
//监听登录提交
form.on('submit(login)', function (data) {
$(this).parent().prev().find('button').css('display', 'none');
$.ajax({
type: "POST",
url: "../server/login.php",
data: `username=${data.field.userName}&password=${data.field.pwd}`,
dataType: 'json',
success: function (res) {
// console.log(res);
if (res.meta.status == 0) {
layer.msg(res.meta.msg, {
icon: 1
});
setCookie('name', data.field.userName, 45, '/');
location.href = '../.././pc.html';
} else {
layer.msg(res.meta.msg, {
icon: 2
});
}
}
});
return false;
});
表单进度条效果
<div class="toplogin" style="width: 0;">
<div class="topColor" style="height: 6px; background: aqua"></div>
</div>
//实现进度条效果
let logWidth = 0;
let reWidth = 0
$('.ljy_lofo_main input').focus(function () {
$(this).change(function () {
let inputLen = $('.ljy_lofo_main input').length
let addNum = 1 / inputLen * 100
logWidth += addNum
$('.toplogin').css({
width: `${logWidth}%`,
transition: `0.8s`
})
})
})
$('.register_main input').focus(function () {
$(this).change(() => {
let inputLen = $('.register_main input').length
let addNum =1 / inputLen * 100
reWidth += addNum
$('.toplogin').css({
width: `${reWidth}%`,
transition: `0.8s`
})
})
})