css

form{
    width: 600px;
    margin: 0 auto;
}
.item{
    height: 60px;
    line-height: 60px;
}
.item label{
    display: inline-block;
    width: 100px;
}
.item input{
    height: 24px;
}
span{
    color: red;
}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员注册</title>
    <link rel="stylesheet" href="css/register.css">
</head>
<body>
    <form action="http://www.baidu.com" onsubmit="handleSubmit()" method="GET">
        <h3>会员注册</h3>
        <div class="item">
            <label for="">用户名：</label>
            <input type="text" name="userName" placeholder="请输入6~8个字符的用户名" id="userName" onblur="checkUserName()">
            <span class="msg-user-name" id="msg"></span>
        </div>
        <div class="item">
            <label for="">密码：</label>
            <input type="password" name="pwd" placeholder="请输入密码" id="password" onblur="checkPassword()">
            <span class="msg-user-password"></span>
        </div>
        <div class="item">
            <label for="">确认密码：</label>
            <input type="password" placeholder="请确认密码" id="repassword" onblur="checkRepassword()">
            <span class="msg-user-repassword"></span>
        </div>
        <div class="item">
            <label for="">Email:</label>
            <input type="email" placeholder="请输入邮箱号" id="email" onblur="checkEmail()">
            <span class="msg-user-email"></span>
        </div>
        <div class="item">
            <label for="">姓名：</label>
            <input type="text" name="name" >
            <span class="msg"></span>
        </div>
        <div class="item">
            <label for="">性别：</label>
            <label><input type="radio" name="sex" value="男">男</label>
            <label><input type="radio" name="sex" value="女">女</label>
            <span class="msg-user-sex"></span>
        </div>
        <div class="item">
            <label for="">出生日期：</label>
            <input type="date">
            <span class="msg"></span>
        </div>
        <div class="item">
            <label for="">验证码：</label>
            <input type="text" name="checkCode">
            <img src="" alt="">
            <span class="msg"></span>
        </div>
        <button type="submit">注册</button>
    </form>
    <script src="js/register.js"></script>
</body>
</html>

js

//验证用户名格式是否正确
function checkUserName(){
    //获取用户名输入的元素的值
    let userName=document.querySelector('#userName').value;
    let reg = /^\w{6,8}$/;  //6~8个字符
    if(!reg.test(userName)){ //判断是否匹配
        // console.log('不匹配');
        document.querySelector(".msg-user-name").innerHTML="用户名格式不正确";
        return false;
    }else{
        document.querySelector(".msg-user-name").innerHTML="";
        return true;
    }
}
//验证密码格式是否正确
function checkPassword(){
    //获取用户名输入的元素的值
    let password=document.querySelector('#password').value;
    let reg = /^\w{6,8}$/;  //6~8个字符
    if(!reg.test(password)){ //判断是否匹配
        document.querySelector(".msg-user-password").innerHTML="密码不符合要求";
        return false;
    }else{
        document.querySelector(".msg-user-password").innerHTML="";
        return true;
    }
}
//验证密码是否正确
function checkRepassword(){
    //获取用户名输入的元素的值
    let repassword=document.querySelector('#repassword').value;
    let password=document.querySelector('#password').value;
    if(repassword!=password){ //判断是否匹配
        document.querySelector(".msg-user-repassword").innerHTML="两次输入密码不一致";
        return false;
    }else{
        document.querySelector(".msg-user-repassword").innerHTML="";
        return true;
    }
}
//验证邮箱格式是否正确
function checkEmail(){
    //获取用户名输入的元素的值
    let email=document.querySelector('#email').value;
    let reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
    if(!reg.test(email)){ //判断是否匹配
        document.querySelector(".msg-user-email").innerHTML="输入邮箱格式不正确";
        return false;
    }else{
        document.querySelector(".msg-user-email").innerHTML="";
        return true;
    }
}
//处理表单提交
function handleSubmit(){
    //检查用户名是否合法
    let u=checkUserName()
    let p=checkPassword()
    let rp=checkRepassword()
    let e=checkEmail()
    if(!(u&&p&&rp&&e)){
        event.preventDefault();
    }
}

js变量声明

变量名命名规则和java类似：
1.1 不能使用关键字
1.2 只能使用unicode字符，数字，_,不能以数字开头
1.3 区分大小写
1.4 变量声明可以使用的关键字：let,var,const(常量)
运算符
js中的运算符和java基本一致，
特例：/,没有整数除法
==,只要求内容相同，对数据类型没有要求
===,不仅要求内容相同，数据类型还要相同
&&,||，返回能决定逻辑运算结果的表达式
表单验证案例
表单html实现
分析原型可知：这是一个表单，共9行，每行包括一个输入提示标签(label),一个输入接收元素(input),一个错误提示(span)
html结构可为：form>.item*9>label+input+span
调整中文
调整每个input的type及name属性
name属性的作用是提交表单的时候，这个name其实是参数名称
2.样式实现
表单居中
每行高度及垂直居中
每行label,input样式
失去焦点的时候验证格式
1.创建函数
```
function checkUserName(){
 //获取用户名这个输入元素的值
 let userName = document.querySelector("#userName").value;
 //判断这个值的格式
 let reg = /^\w{6,8}$/ //6-8个字符
 if(!reg.test(userName)){//判断字符串是否和正则表达式匹配
     document.querySelector(".msg-user-name").innerHTML = "用户名格式不正确"
 }else{
     document.querySelector(".msg-user-name").innerHTML = ""
 }
}
```
document.querySelector()按选择器的语法查找一个dom元素，
正则表达式
DOM元素的innerHTML属性用来读取或设置他的子元素的内容
2.绑定事件:在userName这个元素的onblur的属性中设置
onblur = “checkUserName()” ```
表单提交
当用户提交表单后，表单浏览器默认会向action属性指定的服务器接口提交一个请求，如果action没有指定接口，就是当前的地址，会导致当前页面刷新
form元素的action属性指定处理吧表单提交的接口路径
method属性指定提交请求的方法，默认值是get
表单元素的name属性决定了提交表单的参数名称，应该和服务器端保持一致，否则服务器端就无法获取参数值
在表单提交事件中，可以使用event.preventDefault()阻止表单提交
js在函数调用的时候，不检查参数是否匹配，所以在js里没有方法重载

会员注册

css

html

js

js变量声明

运算符

表单验证案例

失去焦点的时候验证格式

表单提交