表单验证 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <style>
        .error{
            color: red;
        }
    </style>
</head>
<body>
    <form id="f1"  action="T12.html" method="post">
        <div><input name="a1" type="text"/></div>
        <div><input name="a2" type="password"/></div>
        <div><input name="a3" type="text"/></div>
        <div><input name="a4" type="text"/></div>
        <div><input name="a5" type="text"/></div>

        <input type="submit" value="提交"/>
    </form>
    <script src="jquery.js"></script>
    <script>
        $(':submit').click(function () {
            var flag = true;
            $('.error').remove();

            $('#f1').find('input[type="text"],input[type="password"]').each(function () {
                var v = $(this).val();
                // var n = $(this).attr('tex');
                if(v.length <=0){
                    flag = false;
                    var tag = document.createElement('span');
                    tag.className="error";

                    tag.innerHTML='必填';
                    $(this).after(tag);
                }
            });
            return flag;

        })
        // $(':submit').click(function () {
        //     var v = $(this).prev().val();
        //     if(v.length >0){
        //         return true
        //     }else {
        //         alert('请输入内容')
        //         return false
        //
        //     }
        // })
    </script>

</body>
</html>

 注释：

#当页面框架加载完成之后，自动执行
                $(function){
                    $(...)
                }
   

posted @ 2021-03-01 16:40  安好_世界  阅读(33)  评论(0)  编辑  收藏  举报