表单验证，表单提示特效

表单验证：

字符串非空验证（字符串的trim()方法可以去除两边空格）

id.trim() == '';
复制代码

阻止表单提交的默认事件：

return false;
复制代码

继续默认事件：

return true;
复制代码

字符串查找验证：（通过下标是多少返回，找不到就返回-1）

  let str = 'this is JavaScript';

  str.indexOf('is'); //返回2  let str = 'this is JavaScript';

  str.indexOf('is',3); //返回5             let str = 'this is JavaScript';

  str.indexOf('is',6); //返回-1
复制代码

校验提示特效练习：

邮箱不得为空，密码不得为空且不得少于6个字符。点击文本框边框颜色变为红色，后面出现提示文字。颜色为红色。

body部分

 <form action="">

        <p>

            email: <input type="text" name="email" id="email" onblur="blurFn()">

            <span id="s"></span>

        </p>

        <p>            密码: <input type="password" name="pw" id="pw" onblur="blurFn1()">

            <span id="s1"></span>

        </p>

        <input type="submit" value="提交">

    </form>
复制代码

js部分：

  <script>

        let form = document.querySelector('form');

        let email = document.getElementById('email');

        function blurFn(){

            if(email.value.trim()==''){

                email.style.borderColor = 'red';

                s.innerHTML = '内容不能为空';

                s.style.color = 'red';

                return false;

            }

            email.style.borderColor = '';

            s.innerHTML = '';

            s.style.color = '';

            return true;

        }

        let pw = document.getElementById('pw');

        function blurFn1(){

            if(pw.value.trim()==''){

                pw.style.borderColor = 'red';

                s1.innerHTML = '密码不能为空';

                s1.style.color = 'red';

                return false;

            }

            if(pw.length<6){

                pw.style.borderColor = 'red';

                s1.innerHTML = '密码不能小于6位';

                s1.style.color = 'red';

                return false;

            }

            email.style.borderColor = '';

            s.innerHTML = '';

            s.style.color = '';

            return true;

        }

        form.onsubmit = function(){

            if(blurFn() && blurFn1()){

                return true;

            }

            return false;

        }

    </script>

作者：用户3594221209559
链接：juejin.cn/post/704887… 来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。