知問前端——驗證插件(三)

時間 2019-11-29

標籤前端驗證插件简体版

原文原文鏈接

使用remote:url，能夠對錶單進行ajax驗證，默認會提交當前驗證的值到遠程地址。若是須要提交其餘的值，可使用data選項。javascript

新用戶註冊時，若是用戶名已被佔用，則及時返回用戶名已佔用的信息。應當使用ajax驗證。php

index.html：css

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知問前端</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="jquery-ui.js"></script>
    <script type="text/javascript" src="jquery.validate.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <form id="reg" action="123.html">
        <p>帳號：<input type="text" name="user" id="user" /></p>
        <p>密碼：<input type="text" name="pass" id="pass" /></p>
        <p><input type="submit" value="提交" /></p>
    </form>
</body>
</html>

style.css：html

.valid {
    background: url(img/reg_succ.png) no-repeat right;
}
.abc {
    border: 5px solid green;
}

user.php：前端

<?php
    
    //帳號被佔用
    if($_GET['user'] == 'liayun') {
        echo 'false';
    } else {
        echo 'true';
    }
    
?>

注意：遠程地址只能輸出'true'或'false'，不能輸出其餘值。java

使用ajax驗證，jQuery代碼以下：jquery

$(function() {

    $("#reg").validate({
        submitHandler:function(form) {
            alert("驗證成功，準備提交！");
        },
        rules:{
            user:{
                required:true,
                minlength:2,
                remote:"user.php" //鏈接遠程地址
            },
            pass:{
                required:true,
                minlength:6
            }
        },
        messages:{
            user:{
                required:"帳號不得爲空！",
                minlength:"帳號不得小於{0}位！",
                remote:"帳號被佔用！"
            },
            pass:{
                required:"密碼不得爲空！",
                minlength:"密碼不得小於{0}位！"
            }
        }
    });

});

若是要同時傳遞多個值到遠程端，即用戶登陸時，若是用戶名或密碼錯誤，則會給用戶必定的提示。ajax

user.php：(若使用post方式提交)json

<?php
    
    if($_POST['user'] == 'liayun' && $_POST['pass'] == '123321') {
        echo 'true';
    } else {
        echo 'false';
    }
    
?>

jQuery代碼以下：ide

$(function() {

    $("#reg").validate({
        submitHandler:function(form) {
            alert("驗證成功，準備提交！");
        },
        rules:{
            user:{
                required:true,
                minlength:2,
            },
            pass:{
                required:true,
                minlength:6,
                remote:{
                    url:"user.php",
                    type:"post",
                    dateType:"json",
                    data:{
                        user:function() {
                            return $('#user').val();
                        }
                    }
                }
                
            }
        },
        messages:{
            user:{
                required:"帳號不得爲空！",
                minlength:"帳號不得小於{0}位！",
            },
            pass:{
                required:"密碼不得爲空！",
                minlength:"密碼不得小於{0}位！",
                remote:"帳號或密碼不正確！"
            }
        }
    });

});

jquery.validate.js提供了一些事件觸發的默認值，這些值呢，大部分建議是不用更改的。僅做了解。

1.取消提交驗證，默認是true。

onsubmit : false, //默認是true

注意：設置爲false會致使直接傳統提交，不會實現驗證功能，通常是用於keyup/click/blur驗證提交。

2.設置鼠標離開不觸發驗證

onfocusout : false, //默認爲true

若是默認，輸入好比"1"這樣的錯誤字符串，鼠標一旦離開，即驗證！反則，置爲false，鼠標離開不驗證，沒什麼鳥用！

3.設置鍵盤按下彈起不觸發驗證

onkeyup : false, //默認爲true

若是默認，在輸入的過程(即伴隨着鍵盤的按下彈起)中，就會觸發驗證，反之，置爲false，在輸入的過程(即伴隨着鍵盤的按下彈起)中不觸發驗證。

4.設置點擊checkbox和radio不觸發驗證，同上。

onclick : false, //默認爲true

5.設置錯誤提示後，沒法獲取焦點。

focusInvalid : false, //默認爲true

若是默認，初次點擊submit按鈕，會觸發xxx不爲空等驗證，隨即焦點落在第一個輸入框中，而後以此類推。若置爲false，錯誤提示後，沒法獲取焦點。

6.提示錯誤時，隱藏錯誤提示，不能和focusInvalid一塊兒用，衝突。這個問題一大堆，就一廢物屬性，估計這輩子都不會用到它。

focusCleanup : true, //默認爲false

7.若是表單元素設置了title值，且messages爲默認，就會讀取title值的錯誤信息，咱們能夠經過ignoreTitle : true，設置爲true，屏蔽這一個功能。

ignoreTitle : true, //默認爲false

index.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知問前端</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="jquery-ui.js"></script>
    <script type="text/javascript" src="jquery.validate.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <form id="reg" action="123.html">
        <p>帳號：<input type="text" name="user" id="user" title="帳號錯誤" /></p>
        <p>密碼：<input type="text" name="pass" id="pass" /></p>
        <p><input type="submit" value="提交" /></p>
    </form>
</body>
</html>

View Code

index.js：

$(function() {

    $("#reg").validate({
        submitHandler:function(form) {
            alert("驗證成功，準備提交！");
        },
        
        rules:{
            user:{
                required:true,
                minlength:2,
                //remote:"user.php" //鏈接遠程地址
            },
            pass:{
                required:true,
                minlength:6,
                remote:{
                    url:"user.php",
                    type:"post",
                    dateType:"json",
                    data:{
                        user:function() {
                            return $('#user').val();
                        }
                    }
                }
                
            }
        },
        messages:{
            user:{
                //required:"帳號不得爲空！",
                //minlength:"帳號不得小於{0}位！",
                //remote:"帳號被佔用！"
            },
            pass:{
                required:"密碼不得爲空！",
                minlength:"密碼不得小於{0}位！",
                remote:"帳號或密碼不正確！"
            }
        }
    });

});

View Code

此時，點擊提交按鈕，會顯示「帳號錯誤」信息。那麼能夠經過ignoreTitle : true，設置爲true，屏蔽這一個功能：

$(function() {

    $("#reg").validate({

        //onsubmit:false,

        //onfocusout:false,

        //onkeyup:false,

        //focusInvalid:false,

        //focusCleanup:true,

        //禁止讀取title
        ignoreTitle : true,

        submitHandler:function(form) {
            alert("驗證成功，準備提交！");
        },
        
        rules:{
            user:{
                required:true,
                minlength:2,
                //remote:"user.php" //鏈接遠程地址
            },
            pass:{
                required:true,
                minlength:6,
                remote:{
                    url:"user.php",
                    type:"post",
                    dateType:"json",
                    data:{
                        user:function() {
                            return $('#user').val();
                        }
                    }
                }
                
            }
        },
        messages:{
            user:{
                //required:"帳號不得爲空！",
                //minlength:"帳號不得小於{0}位！",
                //remote:"帳號被佔用！"
            },
            pass:{
                required:"密碼不得爲空！",
                minlength:"密碼不得小於{0}位！",
                remote:"帳號或密碼不正確！"
            }
        }
        
    });

});

此時，點擊提交按鈕，會顯示「這是必填字段」信息。

8.判斷表單所驗證的元素是否所有有效

//外部驗證，獲得true/false的返回值
alert($("#reg").valid()); //所有有效返回true

validate.js提供了能夠單獨驗證每一個表單元素的rules方法，不但提供了add增長驗證，還提供了remove刪除驗證的功能。

給user增長一個表單驗證：

$("#user").rules("add", {
    required:true,
    minlength:2,
    messages:{
        required:"帳號不得爲空！",
        minlength:"帳號不得小於{0}位！"
    }
});

刪除user的全部驗證規則：

$("#user").rules("remove");

刪除user的指定驗證規則：

$('#user').rules('remove', 'minlength min max');

添加自定義驗證並調用：

index.html中加入

<p>郵編：<input type="text" name="code" id="code" /></p>

jQuery代碼以下：

//調用自定義驗證
$("#code").rules("add", {
    required:true,
    code:true,
    messages:{
        required:"郵編不得爲空！"
    }
});
//自定義驗證
$.validator.addMethod("code", function(value, element) {
    var tel = /^[0-9]{6}$/;
    return this.optional(element) || (tel.test(value)); //固定套路
}, "請輸入正確的郵政編碼！");

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。