form

161 阅读2分钟

form.onsubmit = function (){

字符串非空验证

      let username = document.getElementById('username').value;
复制代码

字符串的trim()方法可以去除左右的空格

          if(username.trim() == ''){
            alert('用户名不能为空')
             阻止表单提交的默认事件 
            return false;
        }
        
  继续执行默认事件 
        return true;
  
复制代码

字符串查找验证

            var str="this is JavaScript";
            str.indexOf('is')
            2
            var str="this is JavaScript";
            
复制代码

从下标是3的位置开始寻找 找的到返回对应的下标 找不到返回 -1

            str.indexOf('is',3)
            5
            str.indexOf('is',6)
            -1
        
    }
复制代码

let form = document.getElementById('form') form.onsubmit = function (){ let email = document.getElementById('email').value;

先校验是否为空 再校验里面的内容 排除异常

        if(email.trim() == ''){
            alert('邮箱不能为空')
            return false;
        }
        
复制代码

邮箱的长度验证

        if(email.length<6){
            alert('邮箱长度不能小于6个字符串')
            return false;
        }
        
复制代码

当email里面 只要没有@或者.都进入报错提示

        if(email.indexOf('@')==-1||email.indexOf('.')==-1){
            alert('邮箱格式不正确')
            return false;
        }

        for(var i=0;i<email.length;i++){
             isNaN 不是数字返回true 
             isNaN(email[i])==false就说明email[i]是数字  
复制代码

每次循环只截取对应索引的一位,直到遍历完整个字符串

            var j = email.substring(i, i + 1);

             if(isNaN(email[i])==false){
            if( isNaN(j)==false ){
                alert('不能有数字')
                return false
            }
           
        }
         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;
    }
         
    let form  = document.getElementById('form')
    form.onsubmit = function (){
        let pwd = document.getElementById('pwd').value;
        
复制代码

先校验是否为空 再校验里面的内容 排除异常

        if(pwd.trim() == ''){
            alert('密码不能为空')
            return false;
        }
        
复制代码

邮箱的长度验证

        if(pwd.length<6){
            alert('密码长度不能小于6个字符串')
            return false;
        }
       
        let rpwd = document.getElementById('rpwd').value;
        if(pwd != rpwd){
            alert('两次密码不一致')
            return false
        }

        let user = document.getElementById('user').value;
        for(let i=0;i<user.length;i++){
            if( isNaN(user[i])==false ){
                alert('用户名不能输入数字')
                return false
            }
        }
        return true;


作者:玛卡巴卡起来嗨
链接:juejin.cn/post/704889… 来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。