es6 封裝一個基礎的表單驗證

 

1， 需求分析

　　設計一個通用的表單驗證，如果后期表單中添加了更多的需求，不需要更改之前的代碼邏輯，最好不要改之前的代碼，需要加什么直接加就好了。 

2，代碼分析

　　此表單驗證最好返回一個函數，在api設計這塊我選擇在每個表單項上添加valid屬性，在驗證中通過查看是否有valid屬性、valid屬性的內容來獲取需要驗證的表單，並且返回驗證的結果。

 

　　該分析的也分析了，那就開始干吧！！！

　　由於重點是表單驗證方面，html和css我就能簡則簡

<form id="login-form">
    <p id="errorMsg" style="color:red"></p>
    <input type="text" name="username" id="username">
    <input type="password" name="password" id="password">
    <input type="button" value="提交" id="btn">
</form>

　　按照之前的設計思路，是一個函數，返回驗證表單的錯誤信息，那么參數肯定為要驗證的表單

function formCheck(form) {   //參數為要驗證的form
    let checkResult = []   //存儲驗證結果的數組
    return errorArr     //返回該數組
}

　由於我們是通過 表單中我們自己加的屬性來判斷是否需要驗證，那么我們現在在表單中加入這個屬性，假設現在username和password需要驗證不能為空，username為手機號格式。

　　

<input type="text" name="username" id="username" valid="preset，phone">
<input type="password" name="password" id="password" valid="preset">

　

　　接着我們上面的formCheck

function formCheck(form) {   //參數為要驗證的form
    if (!form || !form.elements) {   //判斷form 以及 form里面是否有表單元素
        return
    }
    let checkResult = []   //存儲驗證結果的數組
    let elements = form.elements  //表單元素集合

    Array.from(elements).filter(ele => {   //這里首先篩選出有valid屬性的表單元素
        return ele.getAttribute('valid')
    }).map(item => {    //對每個有valid的表單元素分別操作
        let valids = item.getAttribute('valid').split(',') //獲取valid屬性內容並切割成數組
        let errorArr = []               //錯誤信息數組
        valids.forEach(valid => {
            if (rules[valid]) {
                let result = rules[valid](item.value)
                result && errorArr.push(result)   //如果不通過我們寫的驗證規則，那么就將錯誤信息push到errorArr里面
            }
        })

        if (errorArr.length) {   //將每個valid的錯誤數組push到總的checkResult里面
            checkResult.push({
                ele: item,
                errorArr: errorArr,
                message: errorArr[0].message,
                type: errorArr[0].type
            })
        }
    })
    return checkResult       //返回該數組
}

 

　　上面的函數中用到了rules，這是我們自己定義的一個驗證規則，為一個對象

const rules = {
        require (val) {
            if (!val.trim()) {
                return {
                    type: 'require',
                    message: '必填選項'
                }
            }
        },
        phone (val) {
            let reg = /^1\d{10}$/    //這里手機號的規則寫的很簡陋，精確的自行百度
            if (!reg.test(val)) {
                return {
                    type: 'phone',
                    message: '手機號格式錯誤'
                }
            }
        }
}

 

 

　　至此，一個表單驗證的formCheck 就完成了，調用試一試：

<form id="login-form">
    <p id="errorMsg" style="color:red"></p>
    <input type="text" name="username" id="username" valid="require,phone">
    <input type="password" name="password" id="password" valid="require">
    <input type="button" value="提交" id="btn">
</form>
<script>
    let form = document.getElementById('login-form')
    let btn = document.getElementById('btn')
    btn.onclick = () => {
        let result = formCheck(form)
        console.log(result)
    }
</script>

　　什么都不填直接點擊btn結果為：

　　

　　username隨便輸一個數字，點擊btn結果為：

 

　　返回的結果里，dom元素也有，提示信息也有，我們取到想要的值就可以愉快的進行判斷了。

　　以后如果需要加一個郵箱的input，valid='email'啥的，  我們直接在rules定義好email這個驗證規則，然后就可以直接在input的valid屬性上加上email，別的完全不用改。是不是很方便呀

　　如果有多個valid，別忘了用逗號分隔哈，因為我們split是根據逗號來的。