使用ajax上传注册信息

最新推荐文章于 2022-12-18 15:04:25 发布

HAI6545

最新推荐文章于 2022-12-18 15:04:25 发布

阅读量110

点赞数 1

分类专栏： JavaScript案例文章标签： ajax postman elementui

本文链接：https://blog.csdn.net/HAI6545/article/details/122433664

版权

JavaScript案例专栏收录该内容

105 篇文章 3 订阅

订阅专栏


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    td:first-child{
        text-align: right;
    }
</style>
<body>
<form action="">
    <table align="center">
        <caption><h2>注册</h2></caption>
        <tr>
            <td>用户名：</td>
            <td><input type="text" name="username"></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password" name="password"></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input type="password" name="repass"></td>
        </tr>
        <tr>
            <td>用户昵称：</td>
            <td><input type="text" name="nickname"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit"></td>
        </tr>
    </table>
</form>
</body>
<script>
// 表单提交事件
/*
1.表单校验
2.发送请求
    页面跳转还是不跳转
    不跳转 - 将表单的默认提交行为阻止
    通过ajax将数据发送给服务器
*/
// 获取元素
var form = document.querySelector('form');
var usernameInput = document.querySelector('[name="username"]');
var passwordInput = document.querySelector('[name="password"]');
var repassInput = document.querySelector('[name="repass"]');
var nicknameInput = document.querySelector('[name="nickname"]');
// 提交事件
form.addEventListener('submit', onsubmit)
// 定义提交事件函数
function onsubmit(){
    // 事件对象阻止默认行为
    window.event.returnValue = false
    // 验证用户名
    var usernameReg = /^[a-z0-9]\w{4,11}$/
    // 验证
    if(!usernameReg.test(usernameInput.value)){
        alert('用户名不符合规则')
        return false
    }
    // 验证密码
    var passwordReg = /\w{6,12}/
    // 验证
    if(!passwordReg.test(passwordInput.value)){
        alert('密码不符合规则')
        return false
    }
    // 确认密码
    if(repassInput.value != passwordInput.value){
        alert('两次密码输入不一致')
        return false
    }
    // 昵称验证
    if(nicknameInput.value.trim() === ''){
        alert('昵称不能为空')
        return false
    }
    // console.log('验证通过');
    // ajax请求
    var xhr = new XMLHttpRequest;
    xhr.open('post','http://localhost:8888/users/register');
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
    xhr.send(`username=${usernameInput.value}&password=${passwordInput.value}&rpassword=${repassInput.value}&nickname=${nicknameInput.value}`)
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            if(xhr.status>=200 && xhr.status<300){
                var res = xhr.responseText;
                res = JSON.parse(res)
                // console.log(res);
                var {code, message} = res;
                if(code === 1){
                    alert(message)
                    // 跳转到登录页面
                    location.href = "./-登录.html"
                }else{
                    alert(message)
                }
            }
        }
    }
}
</script>
</html>

HAI6545

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用ajax上传注册信息

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style> td:first-child{ text-align: right; }</style><body><form actio..
复制链接

扫一扫