JavaScript 表单验证学习笔记

JavaScript 表单验证

javascript 可用来在数据被送往服务器前对 html 表单中的这些输入数据进行验证。
表单数据经常需要使用 javascript 来验证其正确性：

验证表单数据是否为空？

验证输入是否是一个正确的email地址？

验证日期是否输入正确？

验证表单输入内容是否为数字型？

立即学习“Java免费学习笔记（深入）”；

必填（或必选）项目
下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：

Memories.ai

专注于视频解析的AI视觉记忆模型

下载

    function validateForm(){ 
    var x=document.forms["myForm"]["fname"].value; 
    if (x==null || x=="")
    { alert("姓必须填写"); 
    return false;
    }}

E-mail 验证
下面的函数检查输入的数据是否符合电子邮件地址的基本语法。
意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：

        function validateForm(){
            var x=document.forms["myForm"]["email"].value;
            var atpos=x.indexOf("@");
            var dotpos=x.lastIndexOf(".");
            if (atpos<1 || dotpos=x.length){
                alert("不是一个有效的 e-mail 地址");
                return false;
            }
        }

今天的练习  写的不好  没时间细化  直接贴代码了

        
        
            
                
                
            
            
        
        
            
        
            

            

        

            a
            

                
用户名：    
                

                

            
            

                
 昵称：    
                

                

            
            

                
密码：    
                

                

            
        
            

                
确认密码：    
                

                

            
            

                
邮箱：    
                
 
                

            
            

                
手机号：    
                

                

            
            

                
用户手册
            
            

                
提交
                

            
            

        

        

            
        

js

    function but1() {
        but2();
        but3();
        but4();
        but5();
        but6();
    }
    function but2() {
        var pwd1=document.getElementById('pwd1').value;
        var pwd2=document.getElementById('pwd2').value;

            if (pwd1=="") {
            document.getElementById('worr3').innerHTML="密码不能为空";
            }
            if (pwd2=="") {
            document.getElementById('worr').innerHTML="密码不能为空";
            }
            try{
                if (pwd1===pwd2) {

                }else{
                        throw '密码不一致';            
                }
            }catch(err){
                document.getElementById('worr').innerHTML=" "+ err +" ";
                // document.getElementById('worr').style.color='red';

            }

    }
    function but3() {
        var user=document.getElementById('user').value;
        if (user=="") {
            document.getElementById('worr1').innerHTML="用户名不能为空";
            }
        var name=document.getElementById('name').value;
        if (name=="") {
            document.getElementById('worr2').innerHTML="昵称不能为空";
            }
    }
    function but4() {
        var email=document.getElementById('email').value;
        if (email=="") {
        document.getElementById('worr4').innerHTML="邮箱不能为空";
        }else{
        var atpos=email.indexOf("@");
        var dotpos=email.lastIndexOf(".");
        if (atpos<1 || dotpos=email.length){
            document.getElementById('worr4').innerHTML="不是一个有效的 e-mail 地址";
        }

        }
    }
    function but5() {

        var phone=document.getElementById('phone').value;
        if (phone=="") {
        document.getElementById('worr5').innerHTML="手机号不能为空";
        }else{
     var reg = /^0?1[3|4|5|8][0-9]\d{8}$/;
     if (reg.test(phone)) {
          alert("号码正确~");
     }else{
              document.getElementById('worr5').innerHTML="号码有误~";
     };

        }
    }
    function but6() {
            var user=document.getElementById('user').value;
            var name=document.getElementById('name').value;
            var pwd2=document.getElementById('pwd2').value;
            var email=document.getElementById('email').value;
            var phone=document.getElementById('phone').value;
              document.getElementById('worr6').innerHTML=" "+user+"  "+name+"  "+pwd2+"  "+email+"  "+phone;
    }