0

如果默认用户名和密码值未更改或留空，我该如何禁用表单提交？如果没有任何更改或填写，我还想显示一条警报消息。这是我的代码：

<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>

请帮忙！提前致谢！

4

4 回答 4

0

将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;
      }
    }
于 2013-03-28T16:26:31.223 回答
0

查看实现jQuery Validate Plugin。

这是一个工作小提琴。

<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>
于 2013-03-28T16:28:43.830 回答
0

这是工作..

<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>
于 2013-03-28T16:39:40.213 回答
0

你去（工作小提琴），注意输入上的 ids 用法：

<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;
    }
};
于 2013-03-28T16:40:59.767 回答