form.on("submit(demo-reg)", (data) => { // 显示 Loading 效果 // var loadingIndex = layer.load(1, { // shade: [0.5, '#000'] // }); var formData = { "username": data.field.username, "password": data.field.password }; console.log(formData) let url = '/registerUser' $.post(url, formData, (result) => { // 关闭 Loading 效果 // layer.close(loadingIndex); console.log(result.success) console.log(result.message) if (result.success<0) { layer.alert(result.message, {icon: 2}) } else { layer.alert(result.message, {icon: 1}) location.href = "/toLogin"; } }, "json"); return false; });
时间: 2024-02-10 15:33:27 浏览: 29
这段代码是一个表单的提交事件的处理函数,当表单被提交时会执行该函数。具体流程如下:
1. 阻止表单的默认提交行为,即使页面不刷新。
2. 获取表单中的用户名和密码,并将其封装成一个对象 formData。
3. 发送 POST 请求到 '/registerUser' 接口,将表单数据作为请求体。
4. 接收 '/registerUser' 接口的响应结果,根据结果中的 success 字段判断请求是否成功。
5. 如果请求成功,则弹出成功的提示框,并跳转到登录页面。
6. 如果请求失败,则弹出错误的提示框。
需要注意的是,该代码中的注释部分是被注释掉的代码,如果需要显示 Loading 效果,可以将其取消注释即可。
相关问题
<body> <style> .demo-login-container{width: 320px; margin: 21px auto 0; margin-top: 10%} </style> <form class="layui-form" > <div class="demo-login-container"> <div class="layui-form-item"> <div class="layui-input-wrap"> <div class="layui-input-prefix"> <i class="layui-icon layui-icon-username"></i> </div> <input type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear"> </div> </div> <div class="layui-form-item"> <div class="layui-input-wrap"> <div class="layui-input-prefix"> <i class="layui-icon layui-icon-password"></i> </div> <input type="password" name="password" value="" lay-verify="required" placeholder="密 码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye"> </div> </div> <div class="layui-form-item"> <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button> </div> </div> </form> <!-- 请勿在项目正式环境中引用该 layui.js 地址 --> <script> layui.use(function(){ var form = layui.form; var layer = layui.layer; // 提交事件 form.on('submit(demo-login)', function(data){ var field = data.field; // 获取表单字段值 // 显示填写结果,仅作演示用 layer.alert(JSON.stringify(field), { title: '当前填写的字段值' }); // 此处可执行 Ajax 等操作 // … return false; // 阻止默认 form 跳转 }); }); </script> </body>在上面的代码中需要添加一行文字:高压氧和一张自定义的图片A
<body> <style> .demo-login-container{width: 320px; margin: 21px auto 0; margin-top: 10%} </style> <form class="layui-form" > <div class="demo-login-container"> <div class="layui-form-item"> <div class="layui-input-wrap"> <div class="layui-input-prefix"> <i class="layui-icon layui-icon-username"></i> </div> <input type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear"> </div> </div> <div class="layui-form-item"> <div class="layui-input-wrap"> <div class="layui-input-prefix"> <i class="layui-icon layui-icon-password"></i> </div> <input type="password" name="password" value="" lay-verify="required" placeholder="密 码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye"> </div> </div> <div class="layui-form-item"> <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button> </div> </div> <p>高压氧</p> <!-- 添加高压氧文字 --> <img src="https://example.com/custom-image.jpg"> <!-- 添加自定义图片 --> </form> <!-- 请勿在项目正式环境中引用该 layui.js 地址 --> <script> layui.use(function(){ var form = layui.form; var layer = layui.layer; // 提交事件 form.on('submit(demo-login)', function(data){ var field = data.field; // 获取表单字段值 // 显示填写结果,仅作演示用 layer.alert(JSON.stringify(field), { title: '当前填写的字段值' }); // 此处可执行 Ajax 等操作 // … return false; // 阻止默认 form 跳转 }); }); </script> </body>
<div v-if="!forgetPwd"> <!-- 账号密码登录 --> <div v-if="form.type == '1'"> <el-form-item label="账号" prop="username"> <el-input v-model="form.username"/> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"/> </el-form-item> </div> <!-- 手机验证码登录 --> <div v-if="form.type == '2'"> <el-form-item label="手机号码" prop="phoneNumber"> <el-input v-model="form.phoneNumber"/> </el-form-item> <el-form-item label="验证码" prop="code"> <el-input v-model="form.code" placeholder="请输入验证码"> <el-button slot="append" @click="sendSms" :disabled="codeDisabled">{{ codeText }}</el-button> </el-input> </el-form-item> </div> <el-form-item> <el-button type="primary" @click="submit" :loading="load" style="width: 100%">{{ loginText }}</el-button> <el-button type="text" @click="forget">忘记密码?</el-button> <el-button type="text" @click="clickPhone">手机验证码登录</el-button> </el-form-item> </div>分析
这是一个使用 Vue.js 框架开发的登录页面,根据用户选择的登录方式,展示对应的输入框和按钮。用户可以选择使用账号密码登录或者使用手机验证码登录。如果用户选择手机验证码登录,则会展示输入手机号码和验证码的输入框,并且可以点击发送验证码按钮。在页面的最下方,还提供了忘记密码和手机验证码登录的链接按钮。其中,form 是一个对象,用于存储用户输入的登录信息,例如用户名、密码、手机号码和验证码等。submit 方法是提交登录信息的函数,sendSms 方法是发送验证码的函数。codeDisabled 和 codeText 是计算属性,用于控制发送验证码按钮的状态和文本。