Question

如果默认用户名和密码值未更改或留空，如何从提交中禁用表单？如果没有更改或填写任何内容，我还希望显示警告消息。这是我的代码：

<script>    
$(document).ready(function(){

        $('input[type=text], input[type=password]').focus(function() {

            if(this.value === this.defaultValue)
            {
                 $(this).val("");
            }
        }).blur(function(){
            if($(this).val().length == 0)
            {
                $(this).val(this.defaultValue);
            }
        });
    })
</script>

<form id=""form1" action="process.php" method="post">
<input type="text" name="un" value="Username"/>
<input type="password" name="pw" value="Password"/>
<input type="submit" value="Submit"/>
</form>

请帮忙！提前谢谢！

Answer 1

将html更改为：

   <input type="submit" value="Submit" onclick="return validateForm();"/>

功能验证表格：

function validateForm(){
    var defaultValue ='blabla';
    var text = $('input[type=text]').val();
    var pass= $('input[type=password]').val();
    if(text.length==0||text===defaultValue||pass.length==0||pass===defaultValue){
       return false;
       //alert if you want
    }
    else{
       return true;
      }
    }

Answer 2

查看实施jQuery Validate Plugin。

这是working fiddle。

<body>

.... other content ....

<form id="form1" action="process.php" method="post">
    <input type="text" name="un" placeholder="Username" /><br />
    <input type="password" name="pw" placeholder="Password" /><br />
    <button type="submit">Submit</button>
</form>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
</body>

    <script type="text/javascript">
    $('#form1').validate({
        errorElement: 'label',
        rules: {
            un: {
                required: true,
                minlength: 1
            },
            pw: {
                required: true
            }
        },
        messages: {
            un: {
                required: 'Please enter your name.'
            },
            pw: {
                required: 'Please enter your password.',
            }
        },
        submitHandler: function (form) {
            form.submit();
        }
    });
    </script>

Answer 3

它的工作..

<form id="form1" action="" method="post">
    <input type="text" name="un" default="Username" value="Username"/>
    <input type="password" name="pw" default="Password" value="Password"/>
    <input type="button" value="Submit" onclick="validateForm()"/>
</form>

<script>

function validateForm(){
            if($('input[type=text], input[type=password]').val()!=$('input[type=text], input[type=password]').attr("default")){
                $("#form1").submit();
            }else{
                return false;
            }
        }

$(document).ready(function(){

        $('input[type=text], input[type=password]').focus(function() {

            if($(this).val() === $(this).attr("default"))
            {
                 $(this).val("");
            }
        }).blur(function(){
            if($(this).val().length == 0)
            {
                $(this).val($(this).attr("default"));
            }
        });
    });


</script>

Answer 4

你去（working fiddle），注意输入上的id使用情况：

<form id="form1" action="process.php" method="post">
    <input type="text" id="un" name="un" value="Username"/>
    <input type="password" id="pw" name="pw" value="Password"/>
    <input type="submit" value="Submit"/>
</form>

使用纯JS：

var form1 = document.getElementById("form1");
form1.onsubmit = function() {
    var un = document.getElementById("un");
    var pw = document.getElementById("pw");
    if (un.value == "" || pw.value == "") {
        return false;
    }
};

JQuery：如何在未更改默认值时禁用提交表单

4 个答案: