主要的結構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進行一個校驗規則的定義