注册
<li>
<form>
<div class="ax-break"></div>
<div class="ax-break ax-hide-tel"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input"><span class="ax-pos-left"
style="width: 2.4rem;"><i
class="ax-iconfont ax-icon-me-f"></i></span><input
name="username" class="username" value="admin"
placeholder="输入登录名称" type="text"><span class="ax-pos-right"><a
href="###"
class="ax-iconfont ax-icon-close ax-val-none"></a></span>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input"><span class="ax-pos-left"
style="width:2.4rem;"><i
class="ax-iconfont ax-icon-lock-f"></i></span>
<input name="password" class="password" placeholder="输入密码"
type="password"><span class="ax-pos-right"><a href="###"
class="ax-iconfont ax-icon-close ax-val-none"></a></span>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<!--
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row">
<div class="ax-flex-block">
<span class="ax-pos-left" style="width:2.4rem;"><i
class="ax-iconfont ax-icon-shield-f"></i></span>
<input name="translate" class="translate"
placeholder="输入验证码..." value="" type="text"><span
class="ax-pos-right"><a href="###"
class="ax-iconfont ax-icon-close ax-val-none"></a></span>
</div>
<a href="###" class="ax-form-img"><img
src="images/yanzhengma.jpg"></a>
</div>
</div>
</div>
</div>
</div> -->
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row">
<div class="ax-flex-block">
<label class="ax-checkbox"><input name="free-agree"
value="0" checked=""
type="checkbox"><span>记住密码</span></label>
</div>
<a href="###" class="ax-form-txt ax-color-ignore">忘记了密码？</a>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-flex-block">
<div class="ax-form-input"><button type="button"
class="ax-btn ax-primary ax-full axs-login">登录</button></div>
</div>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-break ax-hide-tel"></div>
<div class="ax-break ax-hide-tel"></div>
</form>
</li>登录
<li>
<form>
<div class="ax-break"></div>
<div class="ax-break ax-hide-tel"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input"><span class="ax-pos-left"
style="width: 2.4rem;"><i
class="ax-iconfont ax-icon-me-f"></i></span><input
name="username" class="regusername" placeholder="输入名称"
type="text"><span class="ax-pos-right"><a href="###"
class="ax-iconfont ax-icon-close ax-val-none"></a></span>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input"><span class="ax-pos-left"
style="width:2.4rem;"><i
class="ax-iconfont ax-icon-lock-f"></i></span>
<input name="password" class="regpassword" placeholder="输入密码"
type="password"><span class="ax-pos-right"><a href="###"
class="ax-iconfont ax-icon-close ax-val-none"></a></span>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input"><span class="ax-pos-left"
style="width:2.4rem;"><i
class="ax-iconfont ax-icon-lock-f"></i></span>
<input name="password" class="regpasswords" placeholder="再次输入密码"
type="password"><span class="ax-pos-right"><a href="###"
class="ax-iconfont ax-icon-close ax-val-none"></a></span>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row">
<div class="ax-flex-block">
<label class="ax-checkbox"><input name="free-agree"
value="0" checked=""
type="checkbox"><span>注册成功后立即登录</span></label>
</div>
<a href="###" class="ax-form-txt ax-color-primary">有账号？立即登录</a>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-flex-block">
<div class="ax-form-input"><button type="button"
class="ax-btn ax-primary ax-full btn-register">注册</button></div>
</div>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-break ax-hide-tel"></div>
<div class="ax-break ax-hide-tel"></div>
</form>
</li>js代码
<script>
// 创建一个函数封装登录
function myAxios(config) {
// 创建一个对象
return new Promise((resolve, reject) => {
// 创建一个对象XMLHttpRequest
const xhr = new XMLHttpRequest()
if (config.params) {
const paramsObj = new URLSearchParams(config.params)
const querySelector = paramsObj.toString()
config.url += `?${querySelector}`
}
xhr.open(config.method || 'POST', config.url)
// 触发事件
xhr.addEventListener('loadend', () => {
// 响应状态码条件判断
if (xhr.status >= 200 && xhr.status < 300) {
resolve(JSON.parse(xhr.response))
} else {
reject(new Error(xhr.response))
}
})
// 1，判断有data选项，携带请求体
if (config.data) {
// 2，转换数据类型，在send中发送
const jsonSrt = JSON.stringify(config.data)
xhr.setRequestHeader('Content-Type', 'application/json')
xhr.send(jsonSrt)
} else {
// 如果没有请求体数据,正常发起请求
xhr.send()
}
})
}
// 获取点击事件元素(登录)
document.querySelector('.axs-login').addEventListener('click', () => {
// 获取账号元素标签
const username = document.querySelector('.username').value
// 获取密码元素标签
const password = document.querySelector('.password').value
// 获取验证码元素标签
// const translate = document.querySelector('.translate').value
// 验证码条件判断
// if (translate.length != `${translate.length}`) {
// alert('输入验证码有误!')
// return
// }
// 调用上的函数
myAxios({
url: 'https://hmajax.itheima.net/api/login',
method: 'post',
data: {
username,
password
}
}).then(result => {
// 处理登录成功
console.log(result.message)
alert(result.message)
}).catch(error => {
// 处理登录失败
console.log(error.message)
alert('用户名或密码错误!')
})
})
// 获取点击事件元素(注册)
document.querySelector('.btn-register').addEventListener('click', () => {
// 获取元素标签
const username = document.querySelector('.regusername').value
const password = document.querySelector('.regpassword').value
const passwords = document.querySelector('.regpasswords').value
if (username.length < 8 && username.length != null && username.length != '') {
alert('输入的账号有误!')
return
} else {
if (password.length < 6 && password.length != null && password != '') {
alert('输入的密码有误!')
return
} else {
if (passwords.length != password.length) {
alert('两次密码不一致')
return
}
}
}
// 调用函数
myAxios({
url: 'https://hmajax.itheima.net/api/register',
method: 'post',
data: {
username,
password
}
}).then(result => {
console.log(result)
console.log(result.message)
alert(result.message)
}).catch(error => {
console.log(error)
console.log(error.message)
alert(error.message)
})
})
</script>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
