表单非空，邮箱验证，转json格式

最新推荐文章于 2022-10-19 21:56:09 发布

一条小咸鱼i

最新推荐文章于 2022-10-19 21:56:09 发布

阅读量192

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Crush_kylin/article/details/103728223

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="js/jquery-1.7.2.js"></script>
    <script src="My97DatePicker/WdatePicker.js"></script>
    <title></title>
</head>
<body>
<div>
    <form>
        <div >
            员工姓名:<input name="ename"  required="required"/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;邮箱:<input name="emi" id="emi"   required="required"/>
            <a id="prompt" style="font-style: initial;"  hidden="hidden">格式不正确</a>
        </div>
        <div >
            毕业院校:<input name="school"  required="required"/>
            登记时间:<input name="create_time" type="text" class="Wdate" onClick="WdatePicker({isShowWeek:true ,ang:'zh-cn'})" required="required"/>
        </div>
        <div>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;职称:<input name="job"   required="required"/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;工资:<input name="sal"  required="required" />
        </div>
        <div>
            <button type="submit">提交</button>
            <button type="reset">重置</button>
        </div>
    </form>
    <button id="xuliehua">序列化表单值</button>
    <div id="results"></div>
    <button id="tojson">json化表单值</button>
    <div id="resultsjson"></div>
</div>
</body>
<script>
    //检测邮箱格式
    $("#emi").mouseout(function(){
        var ePattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
        if(ePattern.test(this.value)){

            $("#prompt").hide();
        }else{
            $("#prompt").show();
        }
    })

    //生成序列化表单
    $(document).ready(function(){
        $("#xuliehua").click(function(){
            x=$("form").serializeArray();
            /*$.each()函数
            var obj = { one:1, two:2, three:3};
            $.each(obj, function(key, val) {
            alert(key); //键
            alert(val); //值
            }); */
            $.each(x, function(key, value){
                $("#results").append(value.name + ":" + value.value + " ");
            });
           /* var res = document.getElementById("results").innerHTML;
            console.log(res);*/
        });
    });

    //jsonhua
    $(document).ready(function(){
        $("#tojson").click(function(){
            var data={};
            x=$("form").serializeArray();
            $.each(x, function(key, value){
                //$("#resultsjson").append(field.name + ":" + field.value + " ");
                data[value.name] = value.value;
            });
            var myJsonString = JSON.stringify(data);
            console.log(myJsonString);

        });
    });


</script>
</html>

一条小咸鱼i

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单非空，邮箱验证，转json格式

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <script src="js/jquery-1.7.2.js"></script> <script src="My97DatePicker/WdatePicker.js"></s...
复制链接

扫一扫