JavaScript原生练习--表单验证-CFANZ编程社区

>功能：

点击Submit验证Username、Email、Password、ConfirmPassword

Username：字符长度6-12

Email：格式需为email格式

password:6-25字符

confirmpassword：验证是否和password一致

验证成功：边框为绿色；验证失败：边框为红色，显示相应报错信息

>HTML (文件名：index.html)

整个表单被一个大<div>套起来，表单验证区域用<form>套起来。

标题用<h2>

中间每一个验证框用<div>套住，包含 <label for=’ ’>（for中填的一般是和input相同的id名）； <input id=‘’ placeholder=‘’>placeholder表示未被填入时框内提示信息； <small> 错误提示内容区，此标签將使文本的字体变小一号，这个元素被重新定义为表示边注释和附属细则，包括版权和法律文本。

tips：class设置scc样式； id用来设置js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./index.css">
    <title>Form Validator</title>
</head>
<body>
    <div class="container">
        <form id="form" class="form">
            <h2>Register With Us</h2>
            <div class="form-control">
                <label for="uesrname">Username</label>
                <input type="text" placeholder="Enter username" id="username">
                <small>Error message</small>
            </div>
            <div class="form-control">
                <label for="Email">Email</label>
                <input type="text" placeholder="Enter Email" id="email">
                <small>Error message</small>
            </div>
            <div class="form-control">
                <label for="password">Password</label>
                <input type="password" placeholder="Enter Password" id="password">
                <small>Error message</small>
            </div>
            <div class="form-control">
                <label for="password2">Confirm password</label>
                <input type="password" placeholder="Enter password again" id="password2">
                <small>Error message</small>
            </div>
            <button type="submit">submit</button>
        </form>
    </div>

    <script src="./script.js"></script>
</body>
</html>

>CSS （文件名：index.css）

💡技巧：声明全局变量
: root {  (放在开头)
      - - success-color: #2ecc71;
      - - error-color: #e74c3c;
}
.form-control.success input {  （引用公共颜色）
      border-color: var(--success-color);
}

给<body>设置flex 让表单居中；

给<form>设置padding使里面的内容可以对齐；

合理利用margin （不装文字）和padding （装文字）

设置<input>样式：正常的边框颜色、报错边框（以及相应的<small>）、正确边框

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

:root {
    --success-color: #2ecc71;
    --error-color: #e74c3c;
}

* {
    box-sizing: border-box;
}
body {
    margin: 0;
    min-height: 100vh;
    background-color: #f8fafb;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Open Sans', sans-serif;
}
.container {
    width: 400px;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
h2 {
    text-align: center;
    margin: 0 0 20px;  /*上 左右 下 */
}
form {
    padding: 30px 40px;
}
.form-control {
    padding-bottom: 20px;
    margin-bottom: 10px;
    position: relative;
}
.form-control label {
    display: block;
    margin-bottom: 5px;
    color: #777;
}
.form-control input {
    display: block;
    border: 2px solid #f0f0f0;
    border-radius: 4px;
    width: 100%;
    padding: 10px;
    font-size: 14px;
}
.form-control input:focus {
    outline: 0;
    border-color: #777;
}

.form-control.success input{
    border-color: var(--success-color);
}
.form-control.error input{
    border-color: var(--error-color);
}

.form-control small {
    color: var(--error-color);
    position: absolute;
    bottom: 0;
    left: 0;
    visibility: hidden; /*display: none 会改变布局; */
}
.form-control.error small {
    visibility: visible;
}

.form button {
    display: block;
    font-size: 16px;
    padding: 10px;
    width: 100%;
    margin-top: 20px;
    color: #fff;
    background-color: #3498db;
    border: 2px solid #3498db;
    border-radius: 2px;
    cursor: pointer;
}

>JavaScript （文件名： script.js）

采取先函数封装，然后在事件监听器里调用函数的形式更清晰

注意：<button>在<form>里会导致点击刷新，解决办法是给事件监听器添加e事件，然后 e.preventDefult(e) 阻止默认事件发生；

const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');

// Show error input message （显示错误信息）
function showError(input, message) {
    const formControl = input.parentElement;
    formControl.className = 'form-control error';
    const small = formControl.querySelector('small');
    small.innerText = message;
}
//Show sucsess outline （显示成功）
function showSuccess(input) {
    const formControl = input.parentElement;
    formControl.className = 'form-control success';
}

// Check required fields （检查是否输入了信息）
function checkRequired(inputArr) {
    inputArr.forEach(function(input) {
        if(input.value.trim() === '') {
            showError(input, `${getFieldName(input)} is required`)
        }
    })
}
//check input length （检查输入信息的长度）
function checkLength(input, min, max) {
    if (input.value.length < min) {
        showError(input, `${getFieldName(input)} must be at least ${min} characters`);
    } else if (input.value.length > max) {
        showError(input, `${getFieldName(input)} must be less than ${max} characters`);
    } else {
        showSuccess(input);
    }
} 
//Check  email is valid （检查email格式）（箭头函数方法怎么用）
function checkEmail(input) {
    const re =  /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    if (re.test(input.value)) {
        showSuccess(input)
    } else {
        showError(input, 'Email is not valid')
    }
}
// Check password match （检查二次确认密码是否匹配）
function checkPasswordsMatch(input1, input2) {
    if (input1.value !== input2.value) {
        showError(input2, 'Passsword do not match')
    } else {
        showSuccess(input2)
    }
}

// Get fieldname （首字母大写函数）
    function getFieldName(input) {
        return input.id.charAt(0).toUpperCase() + input.id.slice(1);
    }

    
//Event listener （事件监听器调用函数）
form.addEventListener('submit', function(e) {
    e.preventDefault(e);

    checkRequired([username, email, password, password2])
    checkLength(username, 3, 15);
    checkLength(password, 6, 25);
    checkEmail(email);
    checkPasswordsMatch(password, password2);
})