form表单验证

来源：互联网发布：steam 淘宝编辑：程序博客网时间：2024/05/28 01:36
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            td {                text-align: center;            }        </style>        <script src="../js/jquery-1.11.0.js"></script>        <script>            $(function() {                var arr = [                        ["东城","西城","崇文","宣武","朝阳","丰台","石景山","海淀","门头沟","房山","通州","顺义","昌平","大兴","平谷","怀柔","密云","延庆" ]                        ,                        ["黄浦","卢湾","徐汇","长宁","静安","普陀","闸北","虹口","杨浦","闵行","宝山","嘉定","浦东","金山","松江","青浦","南汇","奉贤","崇明"]                        ,                        ["和平","东丽","河东","西青","河西","津南","南开","北辰","河北","武清","红挢","塘沽","汉沽","大港","宁河","静海","宝坻","蓟县" ]                        ,                        ["万州","涪陵","渝中","大渡口","江北","沙坪坝","九龙坡","南岸","北碚","万盛","双挢","渝北","巴南","黔江","长寿","綦江","潼南","铜梁","大足","荣昌","壁山","梁平","城口","丰都","垫江","武隆","忠县","开县","云阳","奉节","巫山","巫溪","石柱","秀山","酉阳","彭水","江津","合川","永川"]                        ];                var flag1 = false;                var flag2 = false;                var flag3 = false;                var flag4 = false;                //获取元素                var $name = $("#name");                var $pwd = $("#pwd");                var $age = $("#age");                var $city = $("#city");                $name.blur(function() {                    if($name.val() == "") {                        alert("请输入用户名");                        flag1 = false;                    } else {                        flag1 = true;                    }                });                $pwd.blur(function() {                    var $pl = $pwd.val().length;                    if($pl > 4 && $pl < 16) {                        flag2 = true;                    } else {                        alert("长度在4-16位之间");                        flag2 = false;                    }                });                $age.blur(function() {                    if($age.val() < 1 || $age.val() > 300) {                        alert("请输入正确的年龄");                        flag3 = false;                    } else {                        flag3 = true;                    }                });                $city.change(function(){                    $("#city2 option").remove();                    var ind = $(this).val();                    alert(ind);                    for(c in arr[ind]){                        var $c2 = $("#city2");                        var cs = $("<option>"+arr[ind][c]+"</option>");                        $c2.append(cs);                    }                });                //提交按钮点击事件                $("#tj").click(function() {                    if(flag1 && flag2 && flag3){                        var $nameV = $("#name").val();                        var $pwdV = $("#pwd").val();                        var $ageV = $("#age").val();                        var $sexV = $("input[name='sex']:checked").val();                        var $cityV = $("#city option:selected").html();                        var $city2V = $("#city2 option:selected").html();                        var $data = $("#data");                        var $a = $("<tr><td><input type='checkbox'></td><td>"+$nameV+"</td><td>"+$pwdV+"</td><td>"+$ageV+"</td><td>"+$sexV+"</td><td>"+$cityV+"-"+$city2V+"</td></tr>");                        $data.append($a);                    }else{                        alert("请按要求输入信息");                    }                });            });        </script>        <!--全选，全不选-->        <script>            //页面加载完成            $(function(){                //选中全选                $("#all").click(function(){                    //判断状态                    var fl = $(this).prop("checked");                    if(fl){                        //全选                        var $ch = $(":checkbox");                        $ch.each(function(index, element) {                            $ch[index].checked=true;                        });                    }else{                        //全不选                        var $ch = $(":checkbox");                        $ch.each(function(index, element) {                            $ch[index].checked=false;                        });                    }                });                //批量删除，点击删除，删除选中的元素                $("#del").click(function(){                    //data表格下有是checked且没有id属性的都删除                    $("#data :checked").not("[id]").parent().parent().remove(); //移除所有被选中的input元素                })              });        </script>    </head>    <body>        <center>            <h2>用户注册</h2>            <table border="1px" cellpadding="10px" cellspacing="0px">                <tr>                    <td>用户名</td>                    <td><input type="text" placeholder="用户名不能为空" id="name" /></td>                </tr>                </tr>                    <td>密　码</td>                    <td><input type="password" placeholder="长度在4-16位之间" id="pwd" /></td>                </tr>                </tr>                    <td>年　龄</td>                    <td><input type="number" placeholder="年龄必须是数字" id="age" /></td>                </tr>                </tr>                    <td>性　别</td>                    <td><input type="radio" value="男" name="sex" checked="checked"/>男                    <input type="radio" value="女" name="sex" />女</td>                </tr>                <tr>                    <td>住　址</td>                    <td>省                        <select id="city">                            <option value=0>北京</option>                            <option value=1>上海</option>                            <option value=2>天津</option>                            <option value=3>重庆</option>                        </select>                        市                        <select id="city2">                            <option>东城区</option>                        </section>                    </td>                </tr>                <tr>                    <td colspan="2"><button id="tj">提交</button></td>                </tr>            </table>            <button id="del">批量删除</button>            <table border="1px" cellpadding="10px" cellspacing="0px" id="data">                <tr>                    <td><input type="checkbox" id="all"></td>                    <td>用户名</td>                    <td>密　码</td>                    <td>年　龄</td>                    <td>性　别</td>                    <td>住　址</td>                </tr>            </table>        </center>    </body></html>
阅读全文
0 0