jquery和js动态控制列展示并校验表单

最新推荐文章于 2022-06-23 23:20:59 发布

HelloWorld小能手

最新推荐文章于 2022-06-23 23:20:59 发布

阅读量131

点赞数

分类专栏：前端文章标签： js javascript jquery

本文链接：https://blog.csdn.net/qq_43379834/article/details/116719339

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、html代码

<div class="container-fluid">
        <h3>给数字2绑定onChange事件，button绑定onClick事件，实现计算乘积，动态控制乘积列展示，并校验表单所填需为数字。</h3>
        <br />
        <form id="form1">
            <div class="row" style="margin-left: 1%;width: 50%;">

                <div class="col-md-2">
                    <ul class="list-inline">
                        <li><label>数字一</label></li>
                        <li><input type="text" id="num1" name="num1" required=true /></li>

                    </ul>
                </div>
                <div class="col-md-1 text-center">
                    <h4>*</h4>
                </div>
                <div class="col-md-2">
                    <ul class="list-inline">
                        <li><label>数字二</label></li>
                        <li><input type="text" id="num2" name="num2" required=true /></li>
                    </ul>
                </div>
                <div class="col-md-2">
                    <ul class="list-inline">
                        <li><label>乘积</label></li>
                        <li><input type="hidden" id="cj" readonly /></li>
                    </ul>
                </div>
                <div class="col-md-6">
                    <button class="btn btn-primary" type="button" id="tj">计算</button>
                </div>

            </div>
        </form>
    </div>

二、js

function validatefrom() {
                return $("#form1").validate({
                    rules: {
                        num1: {
                            required: true,
                            number: true
                        },
                        num2: {
                            required: true,
                            number: true
                        }
                    },
                    messages: {
                        num1: {
                            required: "请输入数字",
                            number: "请确认输入的是数字"
                        },
                        num2: {
                            required: "请输入数字",
                            number: "请确认输入的是数字"
                        }
                    }
                });
            }
        $("#tj").click(function () {
            if (validatefrom().form()) {
                var num1 = $("#num1").val();
                var num2 = $("#num2").val();
                $("#cj").val(num1 * num2);
                $("#cj").attr("type", "text");
            }else{
                var num1 = $("#num1").val("");
                var num2 = $("#num2").val("");
                $("#cj").attr("type", "hidden");
            }


        });
        $(function () {
            validatefrom();
        });