JS面向对象：简单封装表单

对于表单的操作，主要是用户输入时的实时验证和提交请求。

表单的数据验证，其中变化的部分只是不同的正则表达式和不同的input对象。

所以我们需要将变化的操作暴露给程序员，将不变的部分固定到类中。

我们可以通过给input标签上打上自定义属性，来绑定我们的不同的验证正则表达式。

Form类

class Form{
    form
    //表示每个input是否合法
    state = []

    verifyList = {
        digit: (val)=>{
            return{
                msg:'非合法数字',
                reg:/\d+/
            }
        },
        phone:(val)=>{ 
            return{
                msg:'非合法电话',
                reg:/^1(3|4|5|6|7|8|9)\d{9}$/
            }
        },
        required:(val)=>{
            return{
                msg:'该项非空',
                reg:/.+$/
            }
        }
        
    }
    constructor(id){
        this.form = document.querySelector(`#${id}`)
    }

    //初始化表单，给所有input绑定验证事件
    init(){
        for (const key in this.form.elements) {
            //遍历input
           if(parseInt(key)>=0&&this.form[key].tagName=='INPUT'){
               //为input绑定事件
                this.form[key].onblur = ()=>{
                    this.verify(this.form[key],key)
                }
                this.state[key] = false
           }
        }
    }
   
    //绑定提交事件 fn为用户设置的回调函数
    bindSubmit(fn){
        this.form.onsubmit = ()=>{
            let index = this.state.indexOf(false)
            if(index>=0){
                alert('提交失败');
            }
            else{
                fn(this.form)
                alert('提交成功！');
            }
            return false;
        }
    }


    //验证
    verify(obj,key){
        let value = obj.value;
        let rule = obj.getAttribute('verify')
        let rs = rule.split('|');
        //校验每一条规则
        //rs.forEach();
        for(let i =0 ;i<rs.length;i++){
            let rule = rs[i]
                //拿到验证规则 和 提示信息
            let x = this.verifyList[rule](value)
            let reg = RegExp(x.reg)
                //开始验证 value 是否符合正则
            let msgSpan = document.querySelector(`#${obj.name}Error`)
            if(msgSpan){
                if( !(reg.test(value)) ){
                    msgSpan.innerHTML = x.msg
                    this.state[key] = false
                    break;
                }
                else{
                    msgSpan.innerHTML = ""
                    this.state[key] = true
                }
            }
        }
    }

    addVerify([...obj]){
        obj.forEach(v=>{
            this.verifyList[v.name] = v.verify
        })
    }
    
}

　　

　　index.html 中绑定表单部分：

<script>
   
    let f = new Form('ff')
 
    f.addVerify([
        {
            name:'username',
            verify:()=>{
                return{
                    msg:'用户名为4到16位（字母，数字，下划线，减号）',
                    reg:/^[a-zA-Z0-9_-]{4,16}$/
                }
            }
        },
        {
            name:'password',
            verify:()=>{
                return{
                    msg:'最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符',
                    reg: /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*?\.]).*$/
                }
            }
        }
    ])

    //绑定提交事件
    f.bindSubmit((data)=>{
        console.log(data['username'].value);
    })
    //初始化
    f.init();
  

</script>