layui实现简单的登录注册

去layui官网下载layui基本样式

layui官网：www.layui.com

然后用<link></link>标签引入相应的*.css，如果不了解的layui的一些标签属性的话，建议去layui的官网学习一下

因为下面用到了jquery，所以还要引入jquery

<script src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>

下面主要说的是对form表单的验证：

<form method="post" action="此处填写你要跳转的servlet的映射名"><div class="layui-form-item"><label for="Sno" class="layui-form-label"><i class="layui-icon layui-icon-username"></i>学号</label><div class="layui-input-inline"><input type="text" id="Sno" name="Sno" required lay-verify="Sno" autocomplete="off" class="layui-input">
<!-- lay-verify="Sno"是自定义的Sno验证规则  在后面有专门的介绍，其实除了自定义的验证规则外，还可以用layui提供的验证--></div><div class="layui-form-mid layui-word-aux">将会成为您唯一的登入名</div></div><div class="layui-form-item"><label for="Sname" class="layui-form-label"><i class="layui-icon"></i>姓名</label><div class="layui-input-inline"><input type="text" id="Sname" name="Sname" required lay-verify="Sno"autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label for="passwd" class="layui-form-label"><i class="layui-icon layui-icon-password"></i>密码</label><div class="layui-input-inline"><input type="password" id="passwd" name="passwd" required lay-verify="pass"autocomplete="off" class="layui-input"></div><div class="layui-form-mid layui-word-aux">6到16个字符</div></div><div class="layui-form-item"><label for="repass" class="layui-form-label">确认密码</label><div class="layui-input-inline"><input type="password" id="repass" name="repass" required lay-verify="repass"autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn"   lay-submit="" lay-filter="demo1">注册<button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div></form>

自定义验证规则：

<script>layui.use(['form', 'layedit', 'laydate'], function(){var form = layui.form,layer = layui.layer,layedit = layui.layedit,laydate = layui.laydate;//日期laydate.render({elem: '#date'});laydate.render({elem: '#date1'});//创建一个编辑器var editIndex = layedit.build('LAY_demo_editor');//自定义验证规则form.verify({
<!--下面的pass,repass就是上面写在 lay-verify=""的属性，即自定义的验证规则，这里可以写正则表达式，需要什么根据自己要求写即可-->pass: [/(.+){6,12}$/,'输入密码小于6位'],repass:function(value){var repassvalue = $('#passwd').val();<!-- 这个地方就是获取id，为passwd的值，主要用于判断两次密码是否一致，不一致的话会弹出return的语句-->if(value != repassvalue){return '两次输入的密码不一致!';}}});//监听指定开关form.on('switch(switchTest)', function(data){layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {offset: '6px'});layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)});//监听提交form.on('submit(demo1)', function(data){layer.alert(JSON.stringify(data.field), {title: '最终的提交信息'})return true;<!-- 如果改为false是阻止数据提交的，所以如果数据不能提交，注意看一下这个地方 -->});});
</script>

下面就是验证的截图：输入的两次密码不一致，会有相应的弹框，我还是比较喜欢这个弹框的，自带表情包，

注册界面效果：

登陆界面效果

layui实现简单的登录注册相关推荐

Angular之简单的登录注册
使用Angular实现了一个简单的登录注册的功能........ 涉及到的Angular知识点很少主要是这个功能的实现...(*^__^*) 嘻嘻-- 里面涉及到的知识点记录: 1.本地存储的操作 ...
一个简单的登录注册网页的实现
一个简单的登录注册网页的实现通过标签让标签内的内容居中显示,再通过标签中的method属性来设置请求方式为post(一般涉及密码等机密数据都用post请求):再通过action来设置请求地址.这其 ...
python做一个登录注册界面_Python 实现简单的登录注册界面
Python 实现简单的登录注册界面注意:编写代码之前需要导入很重要的包 import tkinter as tk import pickle from tkinter import message ...
android如何实现用户注册功能,Android 实现简单的登录注册功能（SharedPreferences和SQLite）...
最近恰好作了一个Android的登陆注册界面,将数据利用SharedPreferences或者SQLite绑定到Android程序中,实现简单的登录注册功能,本文未涉及到与服务器的交流.java 首先 ...
使用JSP实现简单的登录注册功能，并且使用Session跟踪用户登录信息
使用JSP实现简单的登录注册功能,并且使用了Session来跟踪用户的登录信息,这个是用纯JSP来实现此功能的,由于没有连接数据库,所以使用List来模拟数据库. 第一步:创建web项目如果有不会创 ...
Java Swing 简单的登录注册窗口
前言最近在学习Java Swing 写了一个简单的登录注册窗口, 该项目包含了对JFrame的创建,和一些组件的练习并且加入了简单的事件监听和简单的用户名密码判断. 登录和注册的页面只画出来了没有进 ...
小白教程——Windows下用PHP写一个简单的登录注册页面（二）
哈喽,看到这里希望小伙伴们都把wampserver环境安装好了,如果还没有安装或创建数据表就移步去看我上一篇文章吧.OK~接下我们将进入代码实现部分,首先我们需要一个文本编辑器,可以是电脑自带的not ...
基于android校园订餐APP，简单实现登录注册功能（SharedPreferences）
基于android校园订餐APP,简单实现登录注册功能(SharedPreferences) 欢迎浏览本篇文章界面效果图页面设计代码源代码欢迎浏览本篇文章大家好! 这是小编首次在博客上写的文 ...
Java实现简单的登录注册功能
登录注册在项目开发中是常用的功能需求,以下使用控制台实现一个简单的登录注册功能. 实体类: package com.csdn.entry;public class User {//实体类,对应一个表p ...

layui实现简单的登录注册

去layui官网下载layui基本样式

自定义验证规则：

layui实现简单的登录注册相关推荐

最新文章

热门文章