js 表单验证

196 阅读1分钟

题目:1.电子邮箱不能为空 2.电子邮箱必须包含符号"@"和"." 3.当电子邮箱输入框中的内容正确是,页面跳转到注册成功页面

<form action="./success.html" id="form">//success.html跳转地址
    <p>
            电子邮箱: <input type="email" name="1" id="input" onblur="blurFn()">
            <span id="a"></span>
        </p>
           <input type="submit" value='提交'>
  </form>
   <script>
        let form = document.getElementById("form");
        form.onsubmit = function () {
            let input = document.getElementById("input").value;
            if (input.trim() == '') {
                alert("邮箱不能为空")
                return false;
            }
            if (input.indexOf('@') == -1 || input.indexOf('.') == -1) {
                alert("邮箱格式不正确")
                return false;
            }
            return true;
        }
        //实现文本框提示特效
        //onblur失去焦点时
        let input = document.getElementById("input");
        function blurFn() {
            let a = document.getElementById("a");//获取提示文字
            if (input.value.trim() == '') {
            //里面不加封号
                input.style.border = " 1px solid red"
                a.innerHTML = "(必须包含@和.字符)"
                a.style.color = "red"
                return false;
            }
            input.style.border = ''
            a.innerHTML = ""
            a.style.color = ""
            return true;
        }
    </script>
  • isNaN 不是数字返回true
  • isNaN(email[i])==false就说明email[i]是数字
  • 每次循环只截取对应索引的一位,直到遍历完整个字符串
  • var j = email.substring(i, i + 1); 循环两种写法
for(var i=0;i<email.length;i++){
   if(isNaN(email[i]==false ){ 
        alert('不能有数字')
        return false
        }
        return true;
       }