一、js基本數(shù)據(jù)類型和typeof

1、

• null：空、無。表示不存在，當(dāng)為對(duì)象的屬性賦值為null，表示刪除該屬性
• undefined：未定義。當(dāng)聲明變量卻沒有賦值時(shí)會(huì)顯示該值?？梢詾樽兞抠x值為undefined
• number：數(shù)值。最原始的數(shù)據(jù)類型，表達(dá)式計(jì)算的載體
• string：字符串。最抽象的數(shù)據(jù)類型，信息傳播的載體
• boolean：布爾值。最機(jī)械的數(shù)據(jù)類型，邏輯運(yùn)算的載體
• object：對(duì)象。面向?qū)ο蟮幕A(chǔ)

2、typeof:

alert(typeof 1); // 返回字符串"number"
alert(typeof "1"); // 返回字符串"string"
alert(typeof true); // 返回字符串"boolean"
alert(typeof {}); // 返回字符串"object"
alert(typeof []); // 返回字符串"object "
alert(typeof function(){}); // 返回字符串"function"
alert(typeof null); // 返回字符串"object"
alert(typeof undefined); // 返回字符串"undefined"

二、正則表達(dá)式

1、語法

/正則表達(dá)式主體/修飾符(可選)

2、使用字符串方法

正則表達(dá)式通常用于兩個(gè)字符串方法 : search() 和 replace()。

search() 方法 用于檢索字符串中指定的子字符串，或檢索與正則表達(dá)式相匹配的子字符串，并返回子串的起始位置。

replace() 方法 用于在字符串中用一些字符替換另一些字符，或替換一個(gè)與正則表達(dá)式匹配的子串。

3、

search() 方法使用正則表達(dá)式

<button onclick="myFunction()">點(diǎn)擊</button>
    <p id="demo"></p>
    <script type="text/javascript">
    function myFunction(){
        var str="Visit Runoob!";
        var n=str.search(/Runoob/i);
        document.getElementById("demo").innerHTML=n;
    }
    </script>

search() 方法使用字符串

<button onclick="myFunction()">點(diǎn)擊</button>
    <p id="demo"></p>
    <script type="text/javascript">
        function myFunction(){
            var str ="Visit Runoob";
            var n=str.search("Runoob");
            document.getElementById("demo").innerHTML=n;
        }
    </script>

4、replace() 方法使用正則表達(dá)式

<button onclick="myFunction()">點(diǎn)擊</button>
    <p id="demo">請(qǐng)?jiān)L問 microsoft</p>
    <script type="text/javascript">
        function myFunction(){
            var str =document.getElementById("demo").innerHTML;
            var txt =str.replace(/microsoft/i,"Runoob");
            document.getElementById("demo").innerHTML=txt;
        }
    </script>

replace() 方法使用字符串

<script type="text/javascript">
    function muFunction(){
        var str =document.getElementById("demo").innerHTML;
        var str =str.replace("microsoft","runoob");
        document.getElementById("demo").innerHTML=txt;
    }
   </script>

5、正則表達(dá)式修飾符

6、正則表達(dá)式模式

7、test() 方法是一個(gè)正則表達(dá)式方法。
test() 方法用于檢測(cè)一個(gè)字符串是否匹配某個(gè)模式，如果字符串中含有匹配的文本，則返回 true，否則返回 false。

<script type="text/javascript">
        var patt1 =new RegExp("e");
        document.write(patt1.test("The best things in life are free"));
    </script>

8、exec() 方法用于檢索字符串中的正則表達(dá)式的匹配。

<script type="text/javascript">
        var patt1=new RegExp("e");
        document.write(patt1.exec("The best things in life are free"));
    </script>

三、JavaScript 表單

1、JavaScript 表單驗(yàn)證

<form name="myForm" action="#" onsubmit="return validateForm()" method="post">
    名字：<input type="text" name="fname">
    <input type="submit" name="" value="提交">    
    </form>


    <script type="text/javascript">
        function validateForm(){
            var x=document.forms["myForm"]["fname"].value;
            if(x==null||x==""){
                alert("需要輸入名字。");
                return false;
            }
        }
    </script>

2、JavaScript 驗(yàn)證輸入的數(shù)字

<p>請(qǐng)輸入1-10的數(shù)字</p>
    <input type="" name="" id="numb">
    <button type="button" onclick="myFunction()">點(diǎn)擊</button>
    <p id="demo"></p>
    <script type="text/javascript">
        function myFunction(){
            var x,text;
            x=document.getElementById("numb").value;
            if(isNaN(x)||x<1||x>10){
                text="輸入錯(cuò)誤";
            }
            else{
                text="輸入正確";
            }
            document.getElementById("demo").innerHTML=text;
        }
    </script>

3、HTML 表單自動(dòng)驗(yàn)證

<form action="#" method="post">
        <input type="text" name="fname" required="">
        <input type="submit" name="" value="提交">
    </form>

四、JavaScript 表單驗(yàn)證

1、必填（或必選）項(xiàng)目

<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
        姓:<input type="text" name="fname">
           <input type="submit" value="提交">
    </form>

    <script>
        function validateForm(){
        var x=document.forms["myForm"]["fname"].value;
        if (x==null || x==""){
        alert("姓必須填寫");
        return false;
            }
        }
    </script>

2、E-mail 驗(yàn)證

<form name="myForm" action="#" onsubmit="return validateForm();" method="post">
        Email:<input type="text" name="email">
        <input type="submit" name="" value="提交">
    </form>
    <script type="text/javascript">
        function validateForm(){
            var x=document.forms["myForm"]["email"].value;
            var atpos=x.indexOf("@");
            var dotpos=x.lastIndexOf(".");
            if(atpos<1||dotpos<atpos+2>=x.length){
                alert("不是一個(gè)有效的e-mail地址");
                return false;
            }

        }
    </script>

五、JavaScript 驗(yàn)證 API

1、約束驗(yàn)證 DOM 方法

<input type="number" name="" min="100" max="300" required id="id1">
    
    <button onclick="myFunction()">驗(yàn)證</button>

    <p id="demo"></p>
    <script type="text/javascript">
        function myFunction(){
            var inpObj = document.getElementById("id1");
            if(inpObj.checkValidity()==false){
                document.getElementById("demo").innerHTML=inpObj.validationMessage;
            }
            else{
                document.getElementById("demo").innerHTML="輸入正確";
            }
        }

    </script>

2、約束驗(yàn)證 DOM 屬性

3、Validity 屬性

    <p>輸入數(shù)字并點(diǎn)擊驗(yàn)證按鈕:</p>
<input id="id1" type="number" min="100" required>
<button onclick="myFunction()">驗(yàn)證</button>

<p>如果輸入的數(shù)字小于 100 ( input 的 min 屬性), 會(huì)顯示錯(cuò)誤信息。</p>

<p id="demo"></p>

<script>
function myFunction() {
    var txt = "";
    var inpObj = document.getElementById("id1");
    if(!isNumeric(inpObj.value)) {
        txt = "你輸入的不是數(shù)字";
    } else if (inpObj.validity.rangeUnderflow) {
        txt = "輸入的值太小了";
    } else {
        txt = "輸入正確";
    }
    document.getElementById("demo").innerHTML = txt;
}

// 判斷輸入是否為數(shù)字
function isNumeric(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}
</script>