主要的结构css
先导入layui的主要的js和css等html
<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进行一个校验规则的定义