How to realize the login page based on layui

This article mainly explains "how to implement the login page based on layui". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to implement the login page based on layui.

First of all, let's take a look at the effect.

Html 、 js

Log in

User name: password: CAPTCHA: No account number? Click to register layui.use (['layer'], function () {var layer = layui.layer) }) $(function () {/ / page initialization generation verification code _ window.onload = createCode ('# loginCode'); / / verification code switching $('# loginCode') .click (function () {createCode ('# loginCode');}) / / login event $('# loginBtn') .click (function () {login ();}); / / Registration event $('# loginRegister') .click (function () {register ();});}) / / generate CAPTCHA function createCode (codeID) {var code = ""; / / CAPTCHA length var codeLength = 4; / / CAPTCHA dom element var checkCode = $(codeID) / / Random number of CAPTCHA code var random = [0percoll 1pyrus 2pyrus 3pyrus 5pyrus 7pyrus 8pyrus 9pyrus Atropia pyrus pachyderma pachydermatis pachydermatis, Miguel paramedicia pyrus pouch paramedicus, paraphrase paramedicus, 'Wanzhongjiao, Xunqingjiao, Yaoyuanzhong Z'] For (var I = 0 checkCode.val I < codeLength; iCAPTA +) {/ / Random number index var index = Math.floor (Math.random () * 36); code + = random [index];} / / assign the generated random verification code to checkCode.val (code) } / / Verification code, username, password function validateCode (inputID,codeID) {var inputCode = $(inputID). Val (). ToUpperCase (); var cardCode = $(codeID). Val (); var loginUsername = $('# loginUsername'). Val (); var loginPassword = $('# loginPassword'). Val () If ($.trim (loginUsername) = =''| | $.trim (loginUsername) .length