怎么讓提示變位置讓他在下面顯示
怎么讓提示變位置讓他在下面顯示，
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>jQuery Validation 插件</title>
? ? <link rel="stylesheet" href="style.css"/>
</head>
<body>
<form id="demoForm">
? ? <fieldset>
? ? ? ? <legend>用戶登錄</legend>
? ? ? ? <p id="info"></p>
? ? ? ? <p>
? ? ? ? ? ? <label for="1username">用戶名</label>
? ? ? ? ? ? <input type="text" id="username" name="username"/>
? ? ? ? </p>
? ? ? ? </p>
? ? ? ? <p>
? ? ? ? ? ? <label for="1password">密碼</label>
? ? ? ? ? ? <input type="password" id="password" name="password"/>
? ? ? ? </p>
? ? ? ? </p>
? ? ? ? <p>
? ? ? ? ? ? <label for="1confirm-password">確認密碼</label>
? ? ? ? ? ? <input type="password" id="confirm-password" name="confirm-password"/>
? ? ? ? </p>
? ? ? ? </p>
? ? ? ? <p>
? ? ? ? ? ? <input type="submit" value="登錄"/>
? ? ? ? </p>
? ? </fieldset>
</form>
<script src="vendor/jquery-1.10.0.js"></script>
<script src="vendor/jquery.validate-1.13.1.js"></script>
<script>
? ? var validator1;
? ? $(document).ready(function () {
? ? ? ? validator1 = $("#demoForm").validate({
? ? ? ? ? ? debug: true,
? ? ? ? ? ? rules: {
? ? ? ? ? ? ? ? username: {
? ? ? ? ? ? ? ? ? ? required: true,
? ? ? ? ? ? ? ? ? ? minlength: 2,
? ? ? ? ? ? ? ? ? ? maxlength: 10
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? password: {
? ? ? ? ? ? ? ? ? ? required: true,
? ? ? ? ? ? ? ? ? ? minlength: 2,
? ? ? ? ? ? ? ? ? ? maxlength: 16
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? "confirm-password": {
? ? ? ? ? ? ? ? ? ? equalTo: "#password"
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? messages: {
? ? ? ? ? ? ? ? username: {
? ? ? ? ? ? ? ? ? ? required: '請輸入用戶名',
? ? ? ? ? ? ? ? ? ? minlength: '用戶名不能小于2個字符',
? ? ? ? ? ? ? ? ? ? maxlength: '用戶名不能超過10個字符',
? ? ? ? ? ? ? ? ? ? remote: '用戶名不存在'
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? password: {
? ? ? ? ? ? ? ? ? ? required: '請輸入密碼',
? ? ? ? ? ? ? ? ? ? minlength: '密碼不能小于2個字符',
? ? ? ? ? ? ? ? ? ? maxlength: '密碼不能超過16個字符'
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? "confirm-password": {
? ? ? ? ? ? ? ? ? ? equalTo: "兩次輸入密碼不一致"
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? highlight: function(element, errorClass, validClass) {
? ? ? ? ? ? ? ? $(element).addClass(errorClass).removeClass(validClass);
? ? ? ? ? ? ? ? $(element).fadeOut().fadeIn();
? ? ? ? ? ? },
? ? ? ? ? ? unhighlight: function(element, errorClass, validClass) {
? ? ? ? ? ? ? ? $(element).removeClass(errorClass).addClass(validClass);
? ? ? ? ? ? },
? ? ? ? ? ? submitHandler: function (form) {
? ? ? ? ? ? ? ? console.log($(form).serialize())
? ? ? ? ? ? }
? ? ? ? });
? ? ? ? $("#check").click(function () {
? ? ? ? ? ? console.log($("#demoForm").valid() ? "填寫正確" : "填寫不正確");
? ? ? ? });
? ? });
</script>
</body>
</html>
2016-09-02
通過查詢可以得知提示內容所在區域的元素是一個class為error的label元素，直接通過選擇器獲取，調節樣式就可以了。
2016-07-29
不知道我聽蒙了