表单验证的两种方法-(原生JS和Html5)

原生JS的表单验证

html部分

<form>
<div>
    <label>用户名：</label><input type="text" id="txtUsername">
    <div id="labUsername" >用户名长度4-6位字母和数字组合</div>
</div>

<div>
    <label>密码：</label><input type="text" id="txtPassword">
    <div id="labPassword">密码长度为6-12位</div>
</div>
<button>注册</button>
</form>

Js代码部分
注：监听表单的submit事件前提是表单必须写在form里，如果没有form就监听按钮的onclick事件

//监听表单submit事件          
form.onsubmit = function(){

        var usernamePattern = /^[A-Za-z][0-9A-Za-z]{3,5}$/;

        if(!usernamePattern.test(txtUsername.value)){
            labUsername.className = 'error';
            labUsername.innerText = '用户名格式不正确！请输入4-16位的字母和数字！'
            return false;
        }
        labUsername.className = 'success';
        labUsername.innerText = '输入正确'


        if(txtPassword.value.length < 6 || txtPassword.value.length >12){
            labPassword.className = 'error';
            labPassword.innerText = '密码格式不正确！请输入6-12位的字母和数字！';
            return false;
        }
        labPassword.className = 'success';

        return true;
    }

//监听元素获取焦点失去焦点事件
txtUsername.onfocus = function(){
    labUsername.className = '';
}
txtUsername.onblur = function(){
    if(txtUsername.value.length <4 || txtUsername.value.length>6){
        labUsername.className = 'error';
    }else{
        labUsername.className = 'success';
    }
}


txtPassword.onfocus = function(){
    labPassword.className = '';
}
txtPassword.onblur = function(){
    var passwordPattern = /\S{4,12}/;
    if(!passwordPattern.test(txtPassword.value)){
        labPassword.className = 'error';
    }else{
        labPassword.className = 'success';
    }
}

Html的表单验证
注：html5表单验证要点：
1、form标签不能有novalidate属性，该属性是忽略表单元素验证的
2、input标签一定要有required 和pattern 属性
3、必须要有form和提交按钮
4、然后再脚本部分监听input的oninput 和 oninvalid事件，使用validity 对象的相关属性

html代码部分

<form>
    <div>
        <label>用户名：</label><input type="text" id="txtName" placeholder="请输入用户名" required="" pattern="[A-Za-z][0-9A-Za-z]{3,15}">
    </div>
    <div>
        <label>密码：</label><input type="password" id="txtPassword" placeholder="请输入密码" required="" pattern="\d{6}">
    </div>
    <button>注册</button>
</form>

JS代码部分

window.onload = function(){
    var txtName = document.querySelector('#txtName');
    var txtPassword = document.querySelector('#txtPassword');
//监听oninvalid 和oninput 事件
    txtName.oninvalid = checkUserName;
    txtName.oninput = checkUserName;

    function checkUserName(){
        if(this.validity.valueMissing){ //validity对象相关属性
            this.setCustomValiduty('用户名不能为空');
        }
        else if(this.validity.patternMismatch){
            this.setCustomValidity('用户名格式无效，必须....');
        }
        else{
            this.setCustomValidity('');
        }
    }

    txtPassword.oninvalid = checkPassword;
    txtPassword.oninput = checkPassword;

    function checkPassword(){
        if(this.validity.valueMissing){
            this.setCustomValidity('密码不能为空.');
        }
        else if(this.validity.patternMismatch){
            this.setCustomValidity('密码必须为6位数字.');
        }
        else{
            this.setCustomValidity('');
        }
    }

表单验证的两种方法-(原生JS和Html5)

猜你喜欢