前端小项目（二） | 表单验证

---

前言

这次是一个表单验证~
主要功能是用表单进行注册，需要填写的内容有：username、email、password、confirm password。其中email里必须符合格式要求，confirm password必须与password一致。
代码放在github：https://github.com/titibabybaby/FED/tree/main/form%20validation
感谢github大佬bradtraversy~

效果长这样！

---

接下来依旧从html、css、js三个方面进行记录！

一、HTML

表单的结构很简单：

• container->form->form-control
• form-control | label->input->small (四个：username、email、两个password）
• button

❗ small元素將使文本的字体变小一号。(例如从大变成中等，从中等变成小，从小变成超小)。在HTML5中，除了它的样式含义，这个元素被重新定义为表示边注释和附属细则，包括版权和法律文本。

<div class="container">
        <form id="form" class="form">
            <h2>Register With Us</h2>
            <div class="form-control">
                <label for="username">username</label>
                <input type="text" id="username" placeholder="Enter your username..."/>
                <small>Error message</small>
            </div>
            <div class="form-control">
                <label for="email">email</label>
                <input type="email" id="email" placeholder="Enter your email..."/>
                <small>Error message</small>
            </div>
            <div class="form-control">
                <label for="password">password</label>
                <input type="password" id="password" paceholder="Enter your password..."/>
                <small>Error message</small>
            </div>
            <div class="form-control">
                <label for="password2">Confirm password</label>
                <input type="password" id="password2" placeholder="Confirm your password..."/>
                <small>Error message</small>
            </div>
            <button type="submit">Submit</button>
        </form>
    </div>

二、CSS

body的布局设置为弹性布局flex~

body{
    font-family:Arial, Helvetica, sans-serif;
    display: flex; /*弹性布局*/
    justify-content: center; /*弹性容器属性*/
    align-items: center; /*弹性布局容器属性*/
    margin: 0;
    min-height: 100vh;/*100%，没有内容也会被撑开*/   
}

label、input标签的布局都是block，此元素将显示为块级元素，此元素前后会带有换行符。

.form-control{
    margin:5px 0px;
}
.form-control label{
    display: block;
    margin: 5px 0px;
    width: 100%;
}
.form-control input{
    display: block;
    margin: 5px 0px;
    width: 100%;
    border:rgb(88, 81, 81) 0.5px solid;
}

input:focus选择器：选择具有焦点的输入元素

.form-control input:focus{
    outline: 0; /*当元素获得焦点的时候，焦点框为0,因为本来会有一个焦点框，想改变border颜色就要把这个框=0*/
    border-color:rgb(88, 88, 214);
}
.form-control.success input{
    border-color:var(--success-color);
}
.form-control.error input{
    border-color: var(--error-color);
}

三、JavaScript

1.定义变量
const form=document.getElementById(“form”)
const username
const email
const password
const password2

接下来贴贴函数~

1.showError函数

//show input error message
function showError(input,message){
    //.parentElement只读属性,返回指定元素的父元素，即<div form-control>
    const formControl=input.parentElement;
    //.className 属性设置或获取html元素的 class 属性值，这里是设置
    formControl.className='form-control error';
    const small=formControl.querySelector('small');
    small.innerText=message;
}

2.showSuccess函数

//show success outline
function showSuccess(input){
    const formControl=input.parentElement;
    formControl.className='form-control success';
}

3.checkEmail函数 :验证输入的邮箱地址格式是否正确，否，则showError

function checkEmail(input){
    //正则表达式，邮箱地址
    const re = /^[a-z,A-Z,0-9]+@[a-z,A-Z]+.[a-z,A-Z]+$/;
    if(re.test(input.value.trim())){
        //trim() 方法用于删除字符串的头尾空白符，空白符包括：空格、制表符 tab、换行符等其他空白符等
        showSuccess(input);
    }else{
        showError(input,'Email is not valid');
    }
}

4.getFieldName函数 :获取内容，并把第一个字母转换成大写字母

//get fieldname
function getFieldName(input){
    return input.id.charAt(0).toUpperCase()+input.id.slice(1);//stringObject.slice(start,end)方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。下标从0开始，end没有，则到结尾
}
//toUppercase 是把字符串中的小写字母转换成大写字母。charAt 是返回指定索引位置的字符。substring 是返回一个新的字符。

5.checkRequired函数 ：验证每个input是否输入了内容，否，则showError

//check required fields
function checkRequired(inputArr){
    let isRequired=false;
    inputArr.forEach(function(input){
        if(input.value.trim()===''){ //用jquery的方法去除文本框值的2端的空格,相当于输入为空
            showError(input,`${getFieldName(input)} is required`); //jQuery           
            isRequired=true; 
            //required 属性是一个布尔属性。规定必需在提交表单之前填写输入字段。 
            //注意：required 属性适用于下面的 input 类型：text、search、url、tel、
            //email、password、date pickers、number、checkbox、radio 和 file。
        }else{
             showSuccess(input);
        }
    });
    return isRequired;
}

6.checkLength函数 :只能输入长度在[min,max]之内的内容，否则，showError

//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);
    }
}

7.checkPasswordsMatch函数 :验证两次输入的密码是否相同

//check passwords match
function checkPasswordsMatch(input1,input2){
    if(input1.value!==input2.value){
        showError(input2,'passwords do not match');
    }
}

监听事件

//event listeners事件监听，当点击submit时，开始执行函数function(e)
form.addEventListener('submit',function(e){
    e.preventDefault(); //方法，属于该事件的默认操作将不会发生,eg：单击“提交”按钮，阻止其提交表单，单击链接，防止链接跟随 URL
    if(!checkRequired([username,email,password,password2])){
        checkLength(username,3,15);
        checkLength(password,6,25);
        checkEmail(email);
        checkPasswordsMatch(password,password2);
    }
});