学习笔记-js-2017.2.23

一、js基本数据类型和typeof

1、

• null：空、无。表示不存在，当为对象的属性赋值为null，表示删除该属性
• undefined：未定义。当声明变量却没有赋值时会显示该值。可以为变量赋值为undefined
• number：数值。最原始的数据类型，表达式计算的载体
• string：字符串。最抽象的数据类型，信息传播的载体
• boolean：布尔值。最机械的数据类型，逻辑运算的载体
• object：对象。面向对象的基础

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"

二、正则表达式

1、语法

/正则表达式主体/修饰符(可选)

2、使用字符串方法

正则表达式通常用于两个字符串方法 : search() 和 replace()。

search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。

replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

3、

search() 方法使用正则表达式

<button onclick="myFunction()">点击</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()">点击</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() 方法使用正则表达式

<button onclick="myFunction()">点击</button>
    <p id="demo">请访问 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、正则表达式修饰符

6、正则表达式模式

7、test() 方法是一个正则表达式方法。
test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 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() 方法用于检索字符串中的正则表达式的匹配。

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

三、JavaScript 表单

1、JavaScript 表单验证

<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 验证输入的数字

<p>请输入1-10的数字</p>
    <input type="" name="" id="numb">
    <button type="button" onclick="myFunction()">点击</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="输入错误";
            }
            else{
                text="输入正确";
            }
            document.getElementById("demo").innerHTML=text;
        }
    </script>

3、HTML 表单自动验证

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

四、JavaScript 表单验证

1、必填（或必选）项目

<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 验证

<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("不是一个有效的e-mail地址");
                return false;
            }

        }
    </script>

五、JavaScript 验证 API

1、约束验证 DOM 方法

<input type="number" name="" min="100" max="300" required id="id1">
    
    <button onclick="myFunction()">验证</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、约束验证 DOM 属性

3、Validity 属性

    <p>输入数字并点击验证按钮:</p>
<input id="id1" type="number" min="100" required>
<button onclick="myFunction()">验证</button>

<p>如果输入的数字小于 100 ( input 的 min 属性), 会显示错误信息。</p>

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

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

// 判断输入是否为数字
function isNumeric(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}
</script>