獲取input的value

一、使用JavaScript獲取input的value

JavaScript是前端開發中常用的語言，可以在網頁中通過JS來獲取DOM元素的值，也包括input的value。

    
let inputValue = document.getElementById("inputId").value;
console.log(inputValue);

以上代碼中，我們通過getElementById方法獲取頁面中id為「inputId」的input元素，接著獲取該元素的value值，並將value值賦給變數inputValue。最後，我們使用console.log方法列印出inputValue的值。

但是，需要注意的是，如果我們想獲取input的value，那麼必須先確保DOM元素已經載入完成，否則會出現錯誤。我們可以通過window.onload來確保頁面DOM載入完成後再獲取input的value值。

    
window.onload = function() {
    let inputValue = document.getElementById("inputId").value;
    console.log(inputValue);
}

二、使用jQuery獲取input的value

jQuery是一個廣泛應用於前端開發的JavaScript庫，其包含了很多簡化JavaScript代碼的工具函數，可以很方便地獲取input的value值。

    
let inputValue = $("#inputId").val();
console.log(inputValue);

以上代碼中，我們使用jQuery的val方法來獲取input元素的value值，同樣將獲取到的值賦給變數inputValue，並使用console.log方法列印出來。

需要注意的是，使用jQuery前需要先對jQuery庫進行引入。

    
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

三、使用Vue.js獲取input的value

Vue.js是一種漸進式JavaScript框架，用於構建可復用的Web組件。在Vue.js中獲取input的value很方便，只需通過v-model指令即可。

    
<div id="app">
    <input type="text" v-model="inputValue">
    <p>{{ inputValue }}</p>
</div>

<script>
new Vue({
    el: "#app",
    data: {
        inputValue: ""
    }
})
</script>

以上代碼中，我們在Vue實例中定義了一個data屬性inputValue，並在input元素中使用v-model指令綁定了該屬性。當輸入框中的內容發生變化時，inputValue的值也會隨之變化，最後將該值顯示在p標籤中。

四、處理input的value

獲取input的value之後，我們可以對其進行下一步處理。比如，用戶輸入的值可能需要進行數據格式化、校驗、加密等等處理。

1、數據格式化

對於輸入內容需要格式化的場景，可以通過JavaScript的一些內置方法來處理，例如toLocaleString()方法用于格式化數字、substring()方法用於截取字元串等。

    
let num = 1234567890;
let formattedNum = num.toLocaleString("en-US");
console.log(formattedNum);

let str = "Hello World";
let formattedStr = str.substring(0, 5);
console.log(formattedStr);

以上代碼中，我們使用了toLocaleString()和substring()等方法對輸入的數字和字元串進行了格式化，最終將格式化後的結果列印出來。

2、數據校驗

在輸入表單中，用戶輸入的內容可能需要進行一些數據校驗，例如判斷輸入的是否為數字、是否符合郵箱格式等。對於這種情況，我們可以使用正則表達式來判斷。

    
let inputStr = "myemail@gmail.com";
let emailReg = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
if (emailReg.test(inputStr)) {
    console.log("是合法郵箱地址");
} else {
    console.log("不是合法郵箱地址");
}

以上代碼中，我們通過正則表達式判斷輸入的內容是否符合郵箱格式，輸出結果為「是合法郵箱地址」或「不是合法郵箱地址」。

3、數據加密

在某些場景下，輸入表單中的數據需要進行加密處理，以防止敏感信息泄露。常用的加密方式有MD5、SHA等。

    
let inputStr = "123456";
let hashedStr = hex_md5(inputStr);
console.log(hashedStr);

以上代碼中，我們使用了js-md5庫對輸入的字元串進行了MD5加密處理，最終將加密結果列印出來。

五、總結

獲取input的value是前端開發中的常見需求，我們可以通過JavaScript、jQuery、Vue等多種方式來獲取，並且可以對其進行判斷、處理等操作，以滿足不同場景下的需求。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/297446.html