简单的表单验证，模拟用户商品页面

最新推荐文章于 2024-05-21 18:11:13 发布

生椰拿铁@

最新推荐文章于 2024-05-21 18:11:13 发布

阅读量312

点赞数 14

本文链接：https://blog.csdn.net/m0_75166352/article/details/136034083

版权

html部分就是几个简单的input表单

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div class="container">
        <div class="top">
            <img src="./img/top -img.png" alt="">
        </div>
        <div class="main">
            <h1>客户下单表单</h1>
            <div class="main-co">
                <div class="option">
                    <p>客服号码:</p>
                    <input type="text" name="" id="number" placeholder="客户号码">
                </div>
                <div class="option">
                    <p>客服名称:</p>
                    <input type="text" name="" id="name" placeholder="客户名称">
                </div>

                <div class="store">
                    <p>产品列表:</p>
                    <div class="goods-list">
                        <!-- <div>
                            <p> example</p>
                            <div><button>-</button><span> 0 </span><button>+</button></div>
                        </div> -->
                    </div>
                </div>
                <div class="option phone-container" style="margin-top: 35px;" >
                    <p>手机号码:</p>
                    <input type="text" name="" id="phone" placeholder="手机号码">
                </div>
                <div class="option">
                    <p>发货日期:</p>
                    <input type="date" name="" id="date" placeholder="发货日期">
                </div>
                <div class="option">
                    <p>备注:</p>
                    <input type="text" name="" id="add" placeholder="备注">
                </div>
            </div>

            <div class="submit"><button id="submit">提交</button></div>
        </div>
    </div>
    <script src="./util.js"></script>
</body>

</html>

css一些样式处理

* {
    margin: 0;
    padding: 0;
}

ul li {
    list-style-type: none;
}

.container {
    width: 100vw;
}

.top img {
    width: 100%;
    height: 6.25rem;
}

.main {
    box-sizing: border-box;
    padding-top: 1.875rem;

}

h1 {
    font-size: 1.25rem;
    text-align: center;
    font-weight: 550;
}

.main-co {
    margin: 0 auto;
    margin-top: 3.125rem;
    width: 85%;
}

.option {
    margin-bottom: 2.1875rem;
}

.main-co p {
    font-size: .75rem;
    margin-bottom: .3125rem;
}

.main-co input {
    width: 100%;
    height: 1.75rem;
    border-radius: .25rem;
    border: .0625rem solid grey;
}

.goods-list>div {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-bottom: .625rem;
}

.goods-list>div button {
    /* background-color: blanchedalmond;
    color: #fff; */
    border: none;
    width: 1.25rem;
    height: 1.25rem;
    vertical-align: middle;
}

.submit {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.25rem;
}

.submit button {
    width: 80%;
    background-color: lightseagreen;
    color: #fff;
    text-align: center;
    border-radius: .3125rem;
    border: none;
    padding: .625rem;
}


.nnn {
    font-size: .75rem;
    display: inline-block !important;
    text-align: center !important;
    width: 1.5625rem !important;
    height: .9375rem !important;
    border-radius: 0 !important;
    margin: 0 .625rem;
}

.tip {
    font-size: .75rem;
    color: red;
    margin-top: .3125rem;
}

js部分，先实现主要功能，用户输入id ，出现对应用户名和商品。。商品可以改数量，这里商品数量我设置的范围是0~999，数量太大或太小会禁用对应的按钮，,这个input框的change事件挂得有点多了，我做了防抖处理。

当然数据是模拟数据，我放在customerNumber 和customerGoods两个数组中了

let customerNumber = [
    { 571345: '一本松海運株式会社' },
    { 571777: '㈱田舎そば 芦屋モンテメール店' },
    { 571169: 'オオタニ商店' }
]

let customerGoods = [
    { 571169: ['かちわり氷 大粒(4kg×1袋)', 'クラッシュアイス 10kg', 'ブロックアイス 1個/貫目(3.75kg)'] },
    { 571345: ['かちわり氷 大粒 (4kg×3袋)', 'ブロックアイス 4個/貫目'] }
]


const number = document.getElementById('number');
//input debounce 处理
number.addEventListener("input", (function () {
    let timer = null;
    return function (evt) {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            // console.log(111)
            let userPut = evt.target.value;
            getindexName(userPut);
            getindexGoods(userPut)
        }, 500)

    }
})())

//number=>name
function getindexName(number) {
    let name = document.getElementById('name');
    for (let i in customerNumber) {
        let key = Object.keys(customerNumber[i])[0];
        if (number === key) {
            name.value = customerNumber[i][key]
            break
        } else {
            name.value = ''
        }
    }
}

//number=>goods
function getindexGoods(number) {
    for (let i in customerGoods) {
        let key = Object.keys(customerGoods[i])[0]
        // console.log(key)
        if (key === number) {
            //search goods
            customerGoods[i][key].forEach(item => {
                creatNodes(item)
            })
            // btn
            handlerchangeNumber()
            break
        } else {
            let fo = document.querySelector(".goods-list")
            fo.innerHTML = ''
        }
    }
}


// goods showimg
function creatNodes(goods) {
    let fo = document.querySelector(".goods-list")
    let div = document.createElement('div')
    div.innerHTML = ''
    div.innerHTML = `
    <p>${goods}</p>
    <div><button disabled class="minus">-</button><input class="total-number nnn"></input><button class="add">+</button></div>
    `;
    fo.appendChild(div)
}


// add/minus btn
function handlerchangeNumber() {
    let minus = document.querySelectorAll('.minus')
    let add = document.querySelectorAll('.add')
    let span = document.querySelectorAll('.total-number')
    for (let m = 0; m < minus.length; m++) {
        span[m].value = 0
        minus[m].addEventListener('click', () => {
            handlerTotal(span[m], false)
            handlerDisabled(minus[m], span[m], add[m])
        })
        add[m].addEventListener('click', () => {
            handlerTotal(span[m], true)
            handlerDisabled(minus[m], span[m], add[m])
        })
    }

    handlerInputNumber()

}

function handlerTotal(span, stand, btn) {
    let prevNumber = parseInt(span.value)
    span.value = stand ? prevNumber + 1 : prevNumber - 1

}

//disabled btn
function handlerDisabled(btn, span, btn2) {
    let prevNumber = parseInt(span.value)
    if (prevNumber === 0) {
        btn.disabled = true
    } else {
        btn.disabled = false
    }
    if (prevNumber === 999) {
        btn2.disabled = true
    } else {
        btn2.disabled = false
    }
}

//user input number
function handlerInputNumber() {
    let input = document.querySelectorAll('.nnn')
    let add = document.querySelectorAll('.add')
    console.log(input)
    for (let i = 0; i < input.length; i++) {
        input[i].addEventListener('change', (evt) => {
            if (evt.target.value > 999) {
                alert('抱歉，999为数量上限')
                evt.target.value = 999
            }

            if (!/^\d+$/.test(evt.target.value)) {
                // console.log(111)
                alert('请输入0~999之间的整数')
                evt.target.value = 0
            }
            let btn = document.querySelectorAll('.minus')
            handlerDisabled(btn[i], input[i], add[i])
        })
    }
}

接下来是对一些用户可填项的处理，

//Form validation


//date 
const date = document.getElementById('date')
let currentTime = new Date().toLocaleDateString()
date.value = dealTime(currentTime)
function dealTime(time) {
    let timedArr = time.split('/');
    for (let i = 0; i < timedArr.length; i++) {
        if (parseInt(timedArr[i]) < 10) {
            timedArr[i] = '0' + timedArr[i]
        }
    }
    //    console.log(timedArr)
    return timedArr.join('-')
}

这里日期我直接用的h5标签，然后对默认值进行了处理，会默认显示用户当地当天时间

下面是电话的处理，这个处理就比较简单了，只是正则判断了一下

//phone
const phone = document.getElementById('phone')
//大陆手机号规则，换地区更改正则即可
let regPhone = /^\d{11}$/;
phone.addEventListener('change', (evt) => {
    if (!regPhone.test(evt.target.value)) {
        tip()
    }
})

function tip() {
    if (document.querySelector('.tip') === null) {
        let p = document.createElement('p')
        p.innerHTML = '请输入合法手机号'
        p.className = 'tip'
        const phoneCo = document.querySelector('.phone-container')
        phoneCo.appendChild(p)

        let timerNone = setTimeout(() => {
            phoneCo.removeChild(p)
        }, 2000)
    }
}

总结一下，这个简单的表单验证案例，其实还挺有意思，中间也会用到js内置的不少方法，可以说是帮自己回忆一下各种原生操作。框架再妙，原生也必不可少啊。各位可以运行源码看看效果。希望我们共同进步，水平不高，勿喷。哈哈