前端入门（自留）——jquery表单填写与验证

用户342658665928
102 阅读1分钟

相关知识

属性选择器
[attribute]选取包含指定属性的元素
[attribute = value]选取属性为某个特定值value的元素
[attribute != value]选取属性不为某个特定值value的元素
jquery方法参数返回值举例
css1. 访问：attrName属性名
2.设置：key,value 属性名，属性值
properties 样式集合，键值对
attrName,function(index,oldValue)
使用函数返回值作为当前元素的属性值；index在集合中的索引,oldValue修改前的旧值		1. 第一个匹配元素的CSS样式$('font').css({fontSize: '16px', color: 'red'});
val1. 访问: 空
2. 设置：newValue
arrayValue多选表单元素的选中状态（check、select等）
function(index,oldValue)，将函数返回值作为元素内容		1. 匹配元素的值
index1. 访问：空
2. 设置：元素或选择器		1. 指定元素相对于其他指定元素的索引值
2. 指定元素数组中索引为index的对象
ontypes[,data],fn
types：一个或多个事件类型click,blur,focus等
data传递给函数的额外数据，通过event.data获取
fn事件处理函数		$('.btn).on('click',function(){...})
submit1. 空
2. 当发生 submit 事件时运行的函数		$("form").submit(function(e){
e.preventDefault();}
阻止表单提交

$(...).on('click') 适用于当前及未来的元素（比如由脚本创建的新元素）

  • 其他参数：foucs获取焦点、blur失去焦点、submit提交表单等

$(...).click 仅包含页面加载完毕时的元素

效果

商品缩略图：点击“选择文件”按钮，可选取本地待上传的图片

商品名称： 点击文本框，背景、边框变色；失焦恢复

商品类别：默认选择第一项

商品单价：点击文本框，字体颜色、大小变化；失焦恢复；填写小于0的数值时，弹出警告框，清空数值，并选中文本框

团购价：同“商品单价”

商品数量：填写小于0的数值时，弹出警告框，清空数值，并选中文本框

发布日期： 选择年月日

是否审核：默认选择第一项

商品描述：无限制

“马上发布”按钮：点击后分别判断——是否上传商品缩略图，是否填写商品名称，是否填写商品描述。确认填写完毕后，提交表单

image.png

代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery表格</title>
    <link rel="stylesheet" href="../css/jquery-form.css">
    <script type="text/javascript" src="../js/jquery-3.7.1.js"></script>
</head>

<body>
    <!-- 导航栏 -->
    <div class="place">
        <span>位置：</span>
        <ul class="placeul">
            <li><a href="#">首页</a></li>
            <li>></li>
            <li><a href="#">添加商品</a></li>
        </ul>
    </div>

    <div class="formbody">
        <form action="#" id="addgoodsForm" method="post">
            <ul class="forminfo">
                <li>
                    <label for="thumbImg">商品缩略图<b> * </b></label>
                    <input type="file" name="thumbImg" id="thumbImg" multiple="multiple" accept="image/*"/>
                </li>
                <li>
                    <label for="goodsName">商品名称<b> * </b></label>
                    <input type="text" name="goodsName" id="goodsName" value="请填写商品名称" required="required">
                </li>
                <li>
                    <label for="goodsType">商品类别<b> * </b></label>
                    <select name="goodsType" class="goodsType">
                        <option value="male">男装</option>
                        <option value="female">女装</option>
                        <option value="children">童装</option>
                        <option value="sport">运动</option>
                        <option value="other">其他</option>
                    </select>
                </li>
                <li>
                    <label for="unitPrice">商品单价<b> * </b></label>
                    <input type="number" name="unitPrice" id="unitPrice" required="required">&nbsp;元
                </li>
                <li>
                    <label for="groupPrice">团购价<b> * </b></label>
                    <input type="number" name="groupPrice" id="groupPrice" required="required">&nbsp;元
                </li>
                <li>
                    <label for="goodsAmount">商品数量<b> * </b></label>
                    <input type="number" name="goodsAmount" id="goodsAmount" required="required">&nbsp;件
                </li>
                <li>
                    <label for="publishDate">发布日期<b> * </b></label>
                    <input type="date" name="publishDate" id="publishDate" required="required">
                </li>
                <li>
                    <label for="isChecked">是否审核<b> * </b></label>
                    <select name="isChecked" id="isChecked">
                        <option value="yes">已审核</option>
                        <option value="no">未审核</option>
                    </select>
                </li>
                <li>
                    <label for="goodsDescription" id="label-gdsdesc">商品描述<b> * </b></label>
                    <textarea name="goodsDescription" id="goodsDescription" rows="3" col="30"></textarea>
                </li>
                <li>
                    <label></label>
                    <input type="submit" class="btn" id="submit-btn" value="马上发布">
                </li>
            </ul>
        </form>
    </div>

    <script type="text/javascript" src="../js/jquery-form.js"></script>
</body>

</html>

*{
    margin: 0;
    padding: 0;
}

a{
    text-decoration: none;
    color: inherit;
}

ul{
    list-style: none;
}

.place{
    background-color: #eeeeee;
    height: 30px;
    padding: 10px 0;
}

.place>span{
    margin-left: 45px;
    float: left;
}

.placeul{
    float: left;
}

.placeul>li{
    float: left;
    padding: 0 5px;
}

.formbody{
    clear: both;
    margin: 10px 30px;
}

#addgoodsForm ul>li{
    margin: 15px;
}

#thumbImg{
    margin-left: 15px;
}

#goodsName{
    margin-left: 30px;
    height: 20px;
}

.goodsType{
    margin-left: 29px;
}

#unitPrice{
    margin-left: 28px;
}

#groupPrice{
    margin-left: 44px;
}

#goodsAmount{
    margin-left: 28px;
}

#publishDate{
    margin-left: 28px;
}

#isChecked{
    margin-left: 28px;
}

#goodsDescription{
    margin-left: 32px;
    width: 190px;
    resize: none;
}

#label-gdsdesc{
    float: left;
}

.btn{
    margin-left: 109px;
    padding:10px 30px;
    background-color: rgb(76, 139, 240);
    border: 1px solid;
    border-radius: 4px;
    color: white;
}

// 商品名称——获得焦点、失去焦点
$("#goodsName").on('focus',function(){
    $(this).css({
        backgroundColor:'#ffeeff',
        borderColor:'#999'
    });
    if ($(this).val() == "请填写商品名称")
        $(this).val("");
}).on('blur',function(){
    $(this).css({
        backgroundColor:'#fff',
        borderColor:''
    })
    if ($(this).val() == "")
        $(this).val("请填写商品名称");
})

// 价格文本框——获得焦点、失去焦点
$("input[id $= 'Price']").on('focus',function(){
    $(this).css({
        fontSize: '16px',
        color: 'red'
    });
}).on('blur',function(){
    $(this).css({
        fontSize: '12px',
        color: 'black'
    })
})

// 数字文本框（属性选择器）
$("input[type = 'number']").on('blur',function(){
    if ($(this).val() < 0){
        switch ($(this).index()){
            case 0:
                alert("商品单价不能小于0！");
                break;
            case 1:
                alert("团购价不能小于0！");
                break;
            case 2:
                alert("商品数量不能小于0！");
                break;
        }
        $(this).val("");
        $(this).select();  // 选中
    }
})

// 判断日期格式（表单属性type已经设置为date，该方法无使用）
$("input[type = 'date]").on('blur',function(){
    // 日期格式：yyyy-MM-dd 或 yyyy/MM/dd （正则表达式）
    /*
        / ... / 正则表达式外部
        \d      数字
        \d{4}   4个数字
        [ ... ] 匹配字符
        -\/     '='或者'/'  \表示转义
        \d{1，2} 有1~2个数字
    */
    var dataReg = /(\d{4})[-\/](\d{1,2})[-\/](\d{1,2})/;
    if (!dataReg.test( $(this).val() )){
        alert("日期格式不正确，请输入yyyy-MM-dd 或 yyyy/MM/dd格式的日期");
        $(this).select();
    }
})

// 发布（返回值：boolean，表示是否发布成功）
$("input[type = 'submit']").on('click',function(){
    if ($("#thumbImg").val() == ""){
        alert("请选择商品缩略图！");
        return false;
    }
    if ($("#goodsName").val() == "" || $("#goodsName").val() == "请填写商品名称"){
        alert("请填写商品名称！");
        return false;
    }
    if ($("#goodsDescription").val() == ""){
        alert("请完善商品详细信息！");
        return false;
    }
    // 提交表单
    $(".formbody form").submit();
})
avatar
文章
阅读
粉丝