主要的结构
先导入layui的主要的js和css等
<html>
<head>
<meta charset="utf-8">
<title>登录页面</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src=layui/layui.js></script>
<script>
//JavaScript代码区域
layui.use('form', function(){
var form=layui.form;
//监听提交
form.on('submit(formDemo)', function(data){
layer.msg(JSON.stringify(data.field));
return false;
});
//自定义验证规则
form.verify({
username: [
/^[\S]{6,12}$/
,'用户名必须6到12位，且不能出现空格'
],
password: [
/^[\S]{6,12}$/
,'密码必须6到12位，且不能出现空格'
]
});
});
</script>
</head>
<body style="padding: 20px;">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>登录</legend>
</fieldset>
<form class="layui-form layui-form-pane" action="" > <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
<div class="layui-form-item">
<label class="layui-form-label">用户账号</label>
<div class="layui-input-inline">
<input type="username" name="uaername" required lay-verify="username" placeholder="请输入用户" autocomplete="off" class="layui-input">
</div>
<i class="layui-icon" style="font-size: 30px; color: #1E9FFF;"></i>
</div>
<div class="layui-form-item">
<label class="layui-form-label">用户密码</label>
<div class="layui-input-inline">
<input type="password" name="password" required lay-verify="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
<i class="layui-icon layui-icon-password" style="font-size: 30px; color: #1E9FFF;"></i>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</body>
</html>
主要的导入的js文件跟css文件就是在自定以的验证规则中主要一下自己写的正则表达式。
主要的验证在这个lay-verify="username"里面可以写自己定义的，比如自带的同时支持多条规则的验证，格式：lay-verify="验证A|验证B"
如：lay-verify="required|phone|number"
另外，除了我们内置的校验规则，你还可以给他设定任意的值，
比如lay-verify="username"
那么你就需要借助form.verify()方法对username进行一个校验规则的定义
