HTML进行表单验证

使用JavaScript进行表单验证

表单样式：

<form action="" name="form_login">
            <input placeholder="账号" type="text" name="username" class="form_input">
            <br>
            <input placeholder="密码" type="password" name="password" class="form_input" style="top: 230px">
            <br>
            <input type="submit" name="submit" value="登录" class="_submit" onclick="return _submit()">
            <input type="reset" name="reset" value="重置" class="_reset">
        </form>

JavaScript代码：
使用正则表达式进行验证，将账号的所有大小写字母和数字使用空符号替代，如果全部替换完毕还有值（length>0）则证明账号中包含除数字和字母外的其他元素。

function _submit(){
        var username = document.form_login.username.value;//获取表单元素的值
        var password = document.form_login.password.value;
        if(username.length < 6 || username.length > 12){
            alert("账号的长度必须大于等于6小于等于12");
            return false;
        }
        if(password.length < 6 || password.length > 12){
            alert("密码的长度必须大于等于6小于等于12");
            return false;
        }
        username = username.replaceAll(new RegExp('[0-9]', 'g'), "").replaceAll(new RegExp('[a-z]', "ig"), "");//使用正则表达式进行验证，将账号的所有大小写字母和数字使用空符号替代，如果全部替换完毕还有值（length>0）则证明账号中包含除数字和字母外的其他元素。
        if(username.length > 0){
            alert("账号只能由数字和大小写字母组成");
            return false;
        }
        password = password.replaceAll(new RegExp('[0-9]', 'g'), "").replaceAll(new RegExp('[a-z]', "ig"), "");
        if(password.length > 0){
            alert("账号只能由数字和大小写字母组成");
            return false;
        }
        return true;
    }

使用html5自带的特性进行验证：

required输入,要求提交的值不能为空

<input type="text" name="username" required>

使用 min 和 max 属性来确保数值特定范围内。
(前提是有输入值）

<input type="text" min="6" max="12" name="username" />

或者使用pattern 进行正则表达式验证

<input type="text" id="name" name="name" pattern="^.* .*$" />

参考资料：
https://www.runoob.com/regexp/regexp-syntax.html
https://www.w3cschool.cn/html/html-css-form-input-validation.html