javascript 封装表单函数,验证规则,然后提交

<html>
    <head>
        <meta http-equiv="Content-Type;charset=utf-8"/>
        <title>函数柯里化title>
        <style type="text/css"> 
        #user,#pwd 
        {
            color:red;
            font-size: 14px;
        }

        style>
    head>
    <body>
    
        <form id="form1" method="post" action="">
            
            <input type="text" name="user" value="" verify="username|required" size=20/><span id="user">span><br/>
            <input type="password" name="pwd" value="" verify="password|required" size=20/><span id="pwd">span><br/>
            <input type="button" name="btn" value="提交"/>

        form>
        
        <script type="text/javascript">
            
           function form(arr)
           {
           //表示每个input的合法性
            var status=[];
            //预存表单项目规则
            var verifylist={
                digit:function(val){
                    return{
                        msg:'非合法数字',
                        reg:/\d+/
                    }
                },
                email:function(val){
                    return{
                        msg:'非合法数字',
                        reg:/\d+/
                    }
                },
                phone:function(val){
                    return {
                        msg:'非合法电话',
                        reg:/^1(3|4|5|6|7|8|9)\d{9$}/
                    }
                },
                required:function(val)
                {
                    return {
                        msg:'不为能空',
                        reg:/\S/
                    }
                }
            };
            //存储传入的资源规则
            this.verify=arr;
            //获取第1个表单
            var form=document.forms[0];
            //把资源规则存入面有私有规则对象当中,无则加入,有则替代,也叫初始化规则
            this.addVerify=function()
            {
                this.verify.forEach(function(item,index,array){
                    verifylist[item.name]=item.verify;
                });
            }
			//获取私有规则对象的特权函数
            this.getverify=function()
            {
                return verifylist
                
            }
			//初始化表单元素,为每个input绑定失去焦点事件
            this.init=function(){
                this.addVerify();
                var that=this;
                
                for(const key of form.elements)
                {
                    if(key.name!="btn")
                    {
                        key.onblur=function(event){
                           
                            that.validation(key);
                           
                        };
                        //初始化每个input的状态
                        status[key]=false;
                    }
                    
                }
                
            };
			//验证表单每个值,错误信息跟随在input框后面
            this.validation=function(key)
            {
                var value=key.value;
                //获取input框的verify规则
                var rule=key.getAttribute('verify');
                var rs=rule.split('|');
                var that=this;
                rs.forEach(function(item,index,array){
                    var x=that.getverify()[item];
                    var reg=RegExp(x().reg);
                    let msgSpan=document.getElementById(key.name);
                    //各规则显示自己的错误信息
                    switch(item)
                    {
                        case 'username': 
                            if(!reg.test(value))
                            {
                                msgSpan.innerHTML=x().msg;
                                status[key]=false;
                            }else
                            {
                                msgSpan.innerHTML='';
                                status[key]=true;
                            }
                            break;
                        case 'password': 
                            if(!reg.test(value))
                            {
                                msgSpan.innerHTML=x().msg;
                                status[key]=false;
                            }else
                            {
                                msgSpan.innerHTML='';
                                status[key]=true;
                            }
                            break;  
                        case  'required': 
                            if(!reg.test(value))
                            {
                                msgSpan.innerHTML=x().msg;
                                status[key]=false;
                            }
                            break;

                    }

                });
               
            };
			//提交按钮事件,status状态为true时表明各input值都通过验证可以提交表单,如果为false时则禁止提交
            this.submitform=function(){
                form.elements.btn.onclick=function(){
                   // console.log(Object.values(status)[0]);
                    if(Object.values(status)[0]==true)
                    {
                        form.submit();
                        alert('提交成功');
                    }else
                    {
                        alert("表单不正确,提交失败");
                    }
                };
            };

           }
            
           
			//资源规则,在input框后面添加,以|为分隔
           var ver=[
            {
                name:'username',
                verify:function(val){
                    return {
                        msg:'用户名为4-16位',
                        reg:/^[a-z0-9_-]{4,16}$/
                    }
                }
            },
            {
                name:'password',
                verify:function(val){
                    return {
                        msg:'最少6位',
                        reg:/(\S+){6,}$/
                    }
                }
            }
           ];

           var f=new form(ver);
           
           f.init();
           f.submitform();
           
          
        script>
    body>
html>

你可能感兴趣的:(javascript学习日记,javascript,前端,开发语言)