1、表单验证

所有的请求最终都会发送服务器端，如果将验证的操作全部由服务端来完成，必然会造成服务端压力

事件：

onclick:单击事件

onmouseover:鼠标经过

onmouseout:鼠标离开

onchange:内容改变

onload:窗体加载事件

onsubmit：表单提交事件（事件指向的函数返回一个boolean类型的值）

onblur：表示失去焦点

onkeyup:键盘弹起时触发

onkeydonw:键盘按下时

onkeypresss:键盘按下时，并未弹起时

先来一个表单验证的案例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        function checkUser(){
            var username= document.getElementById("username").value;
            if(username==''||username==null) {
                alert('对不起用户名不能为空');
                return false;
            }else{
                return true;
            }
        }
        function checkPwd(){
            var pwd = document.getElementById("pwd").value;
            if(pwd.trim().length<=6){
                alert('对不起密码长度必须大于6位');
                return false;
            }else{
                return true;
            }
        }
        function checkpwdConfirm(){
            var pwd = document.getElementById("pwd").value;

            var pwdConfirm = document.getElementById("pwdConfirm").value;
            if(pwdConfirm.trim().length==0) {
                alert("确定密码也必须是6位");
                return false ;
            }
            if(pwd!=pwdConfirm){
                alert("对不起，两次输入的密码不一致");
                return false ;
            }
            return true;
        }
        //n@126.
        function checkEmail(){
            var email= document.getElementById("email").value;
            var index = email.indexOf("@");
            if(index==-1||index==0) {
                alert("对不起，邮箱格式错误");
                return false;
            }
            var index2 = email.indexOf(".");
            if(index==-1||((index2-index)<=1||index2==email.length-1)) {
                alert("对不起邮箱格式不正确");
                return false;
            }
            return true;

        }

        function checkAll(){
            var flag1 = checkUser();
            var flag2 = checkPwd();
            var flag3 = checkpwdConfirm();
            var flag4= checkEmail();
            return flag1&&flag2&&flag3&&flag4;
        }
    </script>
</head>
<body>
    <form action="success.html" onsubmit="return checkAll()" method="post">
        用户名:<input type="text"  id="username" onblur="checkUser()"/><br/>
        密码：<input type="password" id="pwd" onblur="checkPwd()"/><br/>
        确定密码：<input type="password" id="pwdConfirm" onblur="checkpwdConfirm()"/><br/>
        电子邮箱：<input type="text" id="email" onblur="checkEmail()"><br/>
        <input type="submit" value="注册"/>
    </form>
</body>
</html>

使用keyup事件进行改写

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        function $(id) {
            return document.getElementById(id);
        }
        function checkUser(){
            var username= document.getElementById("username").value;
            if(username==''||username==null) {
                //alert('对不起用户名不能为空');
                $("nameError").innerHTML="对不起用户名不能为空";
                return false;
            }else{
                $("nameError").innerHTML="用户名可以使用"
                return true;
            }
        }
        function checkPwd(){
            var pwd = document.getElementById("pwd").value;
            if(pwd.trim().length<=6){
                //alert('对不起密码长度必须大于6位');
                $("pwdError").innerHTML="对不起密码长度必须大于6位";
                return false;
            }else{
                $("pwdError").innerHTML="";
                return true;
            }
        }
        function checkpwdConfirm(){
            var pwd = document.getElementById("pwd").value;

            var pwdConfirm = document.getElementById("pwdConfirm").value;
            if(pwdConfirm.trim().length==0) {
               // alert("确定密码也必须是6位");
                $("pwdConfirmError").innerHTML="确定密码也必须是6位";
                return false ;
            }
            if(pwd!=pwdConfirm){
                //alert("对不起，两次输入的密码不一致");
                $("pwdConfirmError").innerHTML="对不起，两次输入的密码不一致";
                return false ;
            }
            $("pwdConfirmError").innerHTML="";
            return true;
        }
        //n@126.
        function checkEmail(){
            var email= document.getElementById("email").value;
            var index = email.indexOf("@");
            if(index==-1||index==0) {
               // alert("对不起，邮箱格式错误");
                $("emailError").innerHTML="对不起，邮箱格式错误";
                return false;
            }
            var index2 = email.indexOf(".");
            if(index==-1||((index2-index)<=1||index2==email.length-1)) {
                $("emailError").innerHTML="对不起，邮箱格式错误";
                return false;
            }
            $("emailError").innerHTML="";
            return true;

        }

        function checkAll(){
            var flag1 = checkUser();
            var flag2 = checkPwd();
            var flag3 = checkpwdConfirm();
            var flag4= checkEmail();
            return flag1&&flag2&&flag3&&flag4;
        }
    </script>
</head>
<body>
    <form action="success.html" onsubmit="return checkAll()" method="post">
        用户名:<input type="text"  id="username" onkeyup="checkUser()"/><span id="nameError"></span><br/>
        密码：<input type="password" id="pwd" onkeyup="checkPwd()"/><span id="pwdError"></span><br/>
        确定密码：<input type="password" id="pwdConfirm" onkeyup="checkpwdConfirm()"/><span id="pwdConfirmError"></span><br/>
        电子邮箱：<input type="text" id="email" onkeyup="checkEmail()"><span id="emailError"></span><br/>
        <input type="submit" value="注册"/>
    </form>
</body>
</html>

2、正则表达式

2.1、为什么使用正则表达式

需求：找出字符串中的所有的数字

使用传统js的方式搞定

<script type="text/javascript">
        //
        //"ba14ac6d899a12233";//结果为:14,6,899,12233
        var str = "ba14ac6d899a12233";
        var msg = "" ;
        var array = [];

        for(var i = 0 ;i<str.length;i++) {
            if(str.charAt(i)>='0'&&str.charAt(i)<='9') {
                msg =msg+str.charAt(i);
            }else{
                if(msg!="") {
                    array.push(msg);
                    msg="";
                }
            }
        }
        if(msg!="") {
            array.push(msg);
        }
        console.log(array);

    </script>

采用正则表达式来搞定

<script type="text/javascript">
        //需求： 找出字符串中的所有的数字
        //"ba14ac6d899a12233";//结果为:14,6,899,12233
        var str = "ba14ac6d899a12233";
        var reg = /\d+/g;
        console.log(str.match(reg));
</script>

再次使用正则来验证邮箱

 function checkEmail(){
            var email= document.getElementById("email").value;
            var reg = /^\w+@\w+.[a-zA-Z0-9]{2,3}(.[a-zA-Z0-9]{2,3})?$/;
            if(!reg.test(email)) {
                $("emailError").innerHTML="对不起，邮箱格式错误";
                return false;
            }
            $("emailError").innerHTML="";
            return true;

}

2.2、什么是正则表达式

正则表达式提供了灵活高效的处理文本字符串的方法。正则表达式的全面模式匹配表示法使程序员可以快速分析大量文本以找到特定的字符模式；提取、编辑、替换或删除文本子字符串；也可以将提取的字符串添加到集合中。对于处理字符串的许多应用程序而言，正则表达式是不可缺少的工具。

正则表达式：
用某种模式去匹配指定字符串的一种表示方式。正则表达式由普通字符和元字符组成。普通字符：如字母、数字、汉字等。元字符：可以匹配某些字符形式的具有特殊含义的字符，其作用类似于DOS命令使用的通配符

2.3、正则的编写方式

方式一：

var reg = /\d+/g;

方式二：

var reg2 = new RegExp("\\d+","g");

对于表达式的相关方法介绍

方法：
exec：检索字符中是正则表达式的区配，返回找到的值，并确定其位置
test：检索字符串中指定的值，返回true或false
属性：

global：全局匹配 g
ignoreCase ：忽略大小写 i
multiline：多行匹配 m

案例1：

<script type="text/javascript">
    var reg = /abc/;
    var str = "helloabchelloabchello";
    var i = reg.exec(str);
    console.log(i["index"]);
</script>

案例2：

<script type="text/javascript">
        var reg = /abc/gi;
        var str = "helloAbchelloaBchello";
        //var i = reg.exec(str);
        //console.log(i["index"]);
        var array =  str.match(reg);
        console.log(array);
</script>

2.4、String类对正则的支持

match：找到一个或多个正则表达式的匹配

function MatchDemo(){
            var r, re;         // 声明变量。
            var s = "The rain in Spain falls mainly in the plain";
            re = /ain/ig;    // 创建正则表达式模式。
            r = s.match(re);
            // 尝试匹配搜索字符串。
            return(r);
 }
console.log(MatchDemo());

search：检索与正则表达式相匹配的值

replace：替换与正则表达式匹配的字符串

stringObj.replace(rgExp, replaceText)

字符过滤:假设某些在玩游戏的时候，喜欢暴粗口（fuck、他妈的，卧槽）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function filterData(){
            //获取到文本框中用户输入的值
            var message =document.getElementById("message").value;
            var reg = /(fuck)|他妈的|卧槽/g;
            var str= message.replace(reg,"**");
            document.getElementById("content").innerHTML=str
        }
    </script>
</head>
<body>
    请输入：<input type="text" id = "message"/><br/>
    <input type="button" value = "过滤" onclick="filterData()"/><br/>
    <div id = "content" style="width：200px;height:100px;border:1px solid #ccc">
    </div>
</body>
</html>

split：把字符串分割为字符串数组

  function SplitDemo(){   var s, ss;
            var s = "The rain in Spain falls mainly in the plain.";
            // 在每个空格字符处进行分解。
            ss = s.split(" ");
            return(ss);
  }
        alert(SplitDemo());

JavaScirpt学习笔记（六）