如何驗證輸入類型=“密碼”

Question

我使用以下Jquery腳本：

$(document).ready(function(){
    $("#myForm").validate({
        rules: {
            username: {
                required:true
            },
            password: {
                required:true   
            }
        }
    });
});

和HTML代碼：

<form id="myForm">
        <div id="box-header">
            <p>Username</p>
            <input type="text" id="username" name="username" placeholder="Username" required="required">
            <p>Password</p>
            <input type="password" id="password" name="password" placeholder="Password">
        </div>
</form>

我的問題是，如果Username為空，工具提示顯示“不能為空”，但如果密碼為空，沒有任何反應，我還希望這適用於我的密碼輸入？

Jquery-Code有什么問題嗎？

Answer 1

引用OP：

“我的問題是，如果用戶名為空，工具提示顯示'不能為空'，但如果密碼為空，則沒有任何反應”

這里的最大線索是“工具提示”這個詞。 這告訴我你沒有初始化或包含jQuery Validate插件 ，因為這個插件沒有工具提示。 如果沒有插件，您的代碼將簡單地回退到HTML5驗證（ 其中工具提示由瀏覽器創建，而不是JavaScript / jQuery ）...這是由內聯required屬性觸發的...您只在username段中。

但是，如果你正確地包含了jQuery Validate插件 ，那么一切都在你編程的時候工作。

包含jQuery后包含插件...

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>

你的jQuery：

$(document).ready(function () {
    $("#myForm").validate({
        rules: {
            username: {
                required: true
            },
            password: {
                required: true
            }
        }
    });
});

請注意，在.validate()方法中聲明規則時，不需要內聯必需屬性：

<input type="text" id="username" name="username" placeholder="Username" />
<input type="password" id="password" name="password" placeholder="Password" />

DEMO使用jQuery Validate插件： http ： //jsfiddle.net/jppz52c6/

---

另外 ，如果您只是使用HTML5驗證 ，那么您不需要.validate()方法，甚至不需要任何jQuery / JavaScript。 您只需要在每個字段上都有內聯HTML5驗證屬性（例如required="required" ）...

<input type="text" required="required" id="username" name="username" placeholder="Username" />
<input type="password" required="required" id="password" name="password" placeholder="Password" />

使用HTML5驗證的演示： http ： //jsfiddle.net/jppz52c6/1/

注意 ：HTML5驗證要求瀏覽器支持HTML5驗證 ，並且工具提示將在每個瀏覽器中以不同方式呈現。

Answer 2

將所需屬性添加到密碼輸入字段

<input type="password" id="password" name="password" placeholder="Password" required>