表单验证

1.字符串验证

先校验是否为空，再校验内容

// 邮箱内容不为空
// 必须包含@和.
// 不可有数字
    <form action="success.html" id="formid">
        E-mail: <input type="email" name="" id="emailid"><br>
        <input type="submit" value="提交">
    </form>
    <script>
        let form = document.querySelector('#formid');
        form.onsubmit = function () {
            let email = document.querySelector("#emailid").value; 
            // trim() 去除字符串两端空格
            if (email.trim() == '') {
                alert('邮箱不能为空');
                return false;
            }
            if (email.indexOf('.') == -1 || email.indexOf('@') == -1) {
                alert('邮箱格式不正确');
                return false;
            }
            for (var i = 0; i < email.length; i++) {
                //依次截取对应索引，直到遍历完整字符串
                // var j=email.substring(i,i+1);
                // if (isNaN(j) == false) {
                //      alert('不能有数字');
                //     return false;
                // }
                if (isNaN(email[i]) == false) {
                    alert('不能有数字');
                    return false;
                }
            }
            return true;
        }
    </script>

2.密码验证

    <form action="success.html" id="formid">
        密码： <input type="password" name="" id="pwd1"><br>
        再次输入密码： <input type="password" name="" id="pwd2"><br>
        <input type="submit" value="提交">
    </form>
    <script>
        let form = document.querySelector('#formid');
        form.onsubmit = function () {
            let pwd1 = document.getElementById('pwd1').value;
            let pwd2 = document.getElementById('pwd2').value;
            if (pwd1.trim() == '') {
                alert('密码不能为空');
                return false;
            }
            if (pwd1.length < 6) {
                alert('密码不少于6个字符');
                return false;
            }
            if (pwd1 != pwd2) {
                alert('密码不一致');
                return false;
            }
            return true;
        }
    </script>

3.验证的提示特效

在表单元素后添加提示内容

    <form action="success.html">
        <p>
            email：
            <input type="text" name="email" id="email" onblur="blurFn()">
            <span id="s"></span>
        </p>
        <p>
            密码：
            <input type="text" name="pwd" id="pwd" onblur="blurFn2()">
            <span id="ps"></span>
        </p>
        <input type="submit" value="提交">
    </form>
    <script>
        let form  = document.querySelector('form')
        let email = document.getElementById('email');
        let s = document.getElementById('s')
        let pwd = document.getElementById('pwd')
        let ps = document.getElementById('ps')
        function blurFn2(){
            if(pwd.value.trim()==''){
                ps.innerHTML = '密码不能为空'
                ps.style.color = 'red'
                return false
            }
            ps.innerHTML = ''
            ps.style.color = ''
            return true
        }
        function blurFn(){
            if(email.value.trim()==''){
                email.style.border = '1px solid red'
                s.innerHTML = '不能为空'
                s.style.color = 'red'
                return false;
            }
            email.style.border = '';
            s.innerHTML = '';
            s.style.color = '';
            return true;
        }
        form.onsubmit = function (){
            if( blurFn()&&blurFn2() ){
                return true
            }
            return false;
        }
    </script>