JavaScript中的表单验证、正则表达式、数组的使用

妖狐艹你老母 2023-03-04 08:29 194阅读 0赞

### 表单验证、正则表达式、数组 ###

*  字符串的使用
 *  为什么要使用表单验证
 *  表单验证的常用步骤
 *  提交表单的2种方式
 *  文本框对象
 *  为什么要使用正则表达式
 *  正则表达式的两种创建方法
 *  正则表达式的模式
 *  正则表达式常用的方法
 *  下拉列表框常用事件、方法和属性
 *  数组的使用

# 字符串的使用 #

![在这里插入图片描述][2020080221222395.png]  
字符串常用方法：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70]

Substr(index,length)：字符串截取方法，index表示从哪个索引位置开始截取，length表示截取多少个字符

# 为什么要使用表单验证 #

在登录、注册页面中经常会用到表单，用户可以输入相关信息，然后提交表单到服务器处理，但是在用户输入的信息中往往会有一些不符合要求，这时候这些无意义的数据提交给服务器只是增加服务器的压力，所以我们引入表单基本验证，使用JavaScript验证用户输入的信息，如果不符合要求就不提交，只有输入的信息正确时才将表单提交给服务器处理。

# 表单验证的常用步骤 #

1、创建一个函数  
2、在函数中对表单数据进行验证  
3、如果数据验证都成功，函数返回true，否则返回false  
4、表单中加上onsubmit事件，例如：οnsubmit=“return check()” 其中check就是函数名

# 提交表单的2种方式 #

1、点击type=”submit”的按钮可以提交表单(该提交方式会触发表单的onsubmit事件)，例如：  
  
2、在JavaScript代码中调用表单的submit()方法也可以提交表单(该提交方式不会触发表单的onsubmit事件)，例如：  
document.表单名称.submit(); 或 document.getElementById(“表单id”).submit();

注册表单验证：

# 文本框对象 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 1]  
制作文本框输入验证提示信息：

<!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">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
        <title>休闲网注册页面</title>
        <link href="login.css" rel="stylesheet" type="text/css">
        <script type="text/javascript"> //验证邮箱 function checkEmail(){ var email = document.getElementById("email").value;//获取邮箱文本框中的字符串 if(email.length == 0){ document.getElementById("DivEmail").innerHTML = "email不能为空！"; document.getElementById("email").style.borderColor = "red"; return false; }else if(email.indexOf("@")<0){ document.getElementById("DivEmail").innerHTML = "email中必须包含@符号！"; document.getElementById("email").style.borderColor = "red"; return false; }else if(email.indexOf(".")<0){ document.getElementById("DivEmail").innerHTML = "email中必须包含.符号！"; document.getElementById("email").style.borderColor = "red"; return false; }else if(email.lastIndexOf(".")-email.indexOf("@")<=1){ document.getElementById("DivEmail").innerHTML = "最后一个.必须在@符号后面并且中间要有字符!"; document.getElementById("email").style.borderColor = "red"; return false; } document.getElementById("DivEmail").innerHTML = ""; document.getElementById("email").style.borderColor = ""; return true; } //验证密码 function checkPwd(){ var pwd = document.getElementById("pwd").value;//获取密码文本框的值 if(pwd.length == 0){ document.getElementById("DivPwd").innerHTML = "密码不能为空！"; document.getElementById("pwd").style.borderColor="red"; return false; }else if(pwd.length<6){ document.getElementById("DivPwd").innerHTML = "密码必须大于等于6位！"; document.getElementById("pwd").style.borderColor="red"; return false; } document.getElementById("DivPwd").innerHTML = ""; document.getElementById("pwd").style.borderColor=""; return true; } //验证确认密码 function checkConfirmPwd(){ var pwd = document.getElementById("pwd").value;//密码 var confirmPwd = document.getElementById("repwd").value;//确认密码 if(pwd!=confirmPwd){ document.getElementById("DivRepwd").innerHTML="二次输入密码不一致！"; document.getElementById("DivRepwd").style.borderColor = "red"; return false; } document.getElementById("DivRepwd").innerHTML=""; document.getElementById("DivRepwd").style.borderColor = ""; return true; } //验证姓名 function checkName(){ var name = document.getElementById("user").value;//获取姓名文本框中的值 if(name.length == 0){ document.getElementById("DivUser").innerHTML = "姓名不能为空！"; document.getElementById("user").style.borderColor = "red"; return false; }else{ for(var i=0;i<name.length;i++){ var s = name.charAt(i); if(!isNaN(s)){ document.getElementById("DivUser").innerHTML = "用户名不能包含数字！"; document.getElementById("user").style.borderColor = "red"; return false; } } } document.getElementById("DivUser").innerHTML = ""; document.getElementById("user").style.borderColor = ""; return true; } //表单验证函数 function checkForm(){ //&&(短路与) &(逻辑与) if(checkEmail()&checkPwd()&checkConfirmPwd()&checkName()){ return true; }else{ return false; } } </script>
    </head>
    
    <body>
    <div id="header" class="main">
        <div id="headerLeft"><img src="images/logo.gif"/></div>
        <div id="headerRight">注册 | 登录 | 帮助</div>
    </div>
    <div class="main">
        <table id="center" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td class="bold" colspan="2">注册休闲网</td>
            </tr>
            <form action="success.html" method="post" name="myform" onsubmit="return checkForm()">
                <tr>
                    <td class="left">您的Email：</td>
                    <td><input id="email" type="text" class="inputs" onblur="checkEmail()"/>
    
                        <div class="red" id="DivEmail"></div>
                    </td>
                </tr>
                <tr>
                    <td class="left">输入密码：</td>
                    <td><input id="pwd" type="password" class="inputs" onblur="checkPwd()"/>
    
                        <div class="red" id="DivPwd"></div>
                    </td>
                </tr>
                <tr>
                    <td class="left">再输入一遍密码：</td>
                    <td><input id="repwd" type="password" class="inputs" onblur="checkConfirmPwd()"/>
    
                        <div class="red" id="DivRepwd"></div>
                    </td>
                </tr>
                <tr>
                    <td class="left">您的姓名：</td>
                    <td><input id="user" type="text" class="inputs" onblur="checkName()"/>
    
                        <div class="red" id="DivUser"></div>
                    </td>
                </tr>
                <tr>
                    <td class="left">性别：</td>
                    <td><input name="sex" type="radio" value="1"/> 男
                        <input name="sex" type="radio" value="0"/> 女
                    </td>
                </tr>
                <tr>
                    <td class="left">出生日期：</td>
                    <td><select name="year">
                        <script type="text/javascript"> for (var i = 1900; i <= 2009; i++) { document.write("<option value=" + i + ">" + i + "</option>"); } </script>
                    </select>年
                        <select name="month">
                            <script type="text/javascript"> for (var i = 1; i <= 12; i++) { document.write("<option value=" + i + ">" + i + "</option>"); } </script>
                        </select>月
                        <select name="day">
                            <script type="text/javascript"> for (var i = 1; i <= 31; i++) { document.write("<option value=" + i + ">" + i + "</option>"); } </script>
                        </select>日
                    </td>
                </tr>
                <tr>
                    <td> </td>
                    <td><input name="btn" type="submit" value="注册" class="rb1"/></td>
                </tr>
            </form>
        </table>
    
    </div>
    <div id="footer" class="main"><a href="#">关于我们</a> | <a href="#">诚聘英才</a> |<a href="#"> 联系方式</a> | <a href="#">帮助中心</a>
    </div>
    </body>
    </html>

# 为什么要使用正则表达式 #

平时验证一个字符串的是否符合要求(例如：email格式的验证)，我们需要写很多代码来验证，但是如果使用正则表达式来验证，可以使代码变得非常简洁。

关于正则表达式的语法可以参考我的另一篇博客：[正则表达式语法][Link 1]  
下面介绍正则表达式的使用方法：

# 正则表达式的两种创建方法 #

方法一：构造函数  
![在这里插入图片描述][20200802212533596.png]

方法二：普通方法，又称perl风格（用的比较多）  
![在这里插入图片描述][20200802212538903.png]

注意：常用的附加参数有g和i，g代表可以进行全局匹配，i代表不区分大小写

# 正则表达式的模式 #

简单模式：是指通过普通字符的组合来表达的模式，例如：  
![在这里插入图片描述][20200802212553981.png]  
简单模式只能表示具体的匹配，如果要匹配一个邮箱或者电话号码，就不能使用具体的匹配，这就要用到复合模式。

复合模式：复合模式是指含有通配符来表达的模式，例如：  
![在这里插入图片描述][20200802212607357.png]

# 正则表达式常用的方法 #

1、test：判断字符串中是否匹配正则表达式，返回一个boolean值  
2、exec：每调用一次可以获取一个匹配的字符，并确定其位置(lastIndex)

正则表达式验证邮编和电话号码：

正则表达式验证邮箱：

# 下拉列表框常用事件、方法和属性 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 2]  
下拉列表框的使用：

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript"> function addOption(){ var op = new Option("广东","gd");//参数一：显示的文本 参数二：值 var sel = document.getElementById("selPro");//获取下拉列表框 sel.options.add(op);//将创建的选项添加到下拉列表框中 } function showOption(){ var sel = document.getElementById("selPro");//获取下拉列表框 var v = sel.value;//获取选中的值 var index = sel.selectedIndex;//获取选中项的缩影 alert(v+"-"+index); } </script>
    </head>
    <body>
    <select id="selPro" onchange="showOption()">
        <option value="hn">湖南</option>
        <option value="hb">湖北</option>
    </select>
    <input type="button" value="添加一个option" onclick="addOption()" />
    </body>
    </html>

# 数组的使用 #

创建数组：  
var 数组名称 = new Array(数组长度);  
注意：数组长度可以不写

给数组赋值：(有多种方法)  
方法一：  
![在这里插入图片描述][20200802212707673.png]

方法二：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 3]

方法三：  
![在这里插入图片描述][20200802212715267.png]

遍历数组：  
方法一：普通循环  
![在这里插入图片描述][20200802212721722.png]  
方法二：增强型for循环  
![在这里插入图片描述][20200802212724855.png]

注意：遍历出来的v是索引

数组的常用属性和方法  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 5]

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript"> var arr = new Array(); arr[0] = "张三"; arr[1] = 23; arr["one"] = 25.6; document.write(arr[1]+"<br>"); document.write(arr["one"]+"<br>"); document.write("================数组遍历===============<br>"); //数组循环(方法一：普通循环) for(var i=0;i<arr.length;i++){ document.write(arr[i]+"<br>"); } //数组循环(方法二：增强型for循环 注意：遍历出来的不是元素，而是下标) for(var i in arr){ document.write(arr[i]+"<br>"); } var arr2 = new Array(); arr2["hn"] = ["长沙","株洲","湘潭"]; document.write(arr2["hn"][1]); </script>
    </head>
    <body>
    
    </body>
    </html>

省市级联：

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript"> var arr = new Array(); arr["hn"] = ["长沙","株洲","湘潭"]; arr["gd"] = ["广州","深圳","东莞"]; function addCity(){ //获取选中省份的值 var pro = document.getElementById("selPro").value; var citys = arr[pro]; //先清空城市下拉列表的选项 document.getElementById("selCity").length = 0; for(var i=0;i<citys.length;i++){ var c = citys[i]; var op = new Option(c,c); document.getElementById("selCity").options.add(op); } } window.onload = addCity; </script>
    </head>
    <body>
        省份：<select id="selPro" onchange="addCity()">
            <option value="hn">湖南</option>
            <option value="gd">广东</option>
        </select><br>
        城市：<select id="selCity">
    
        </select>
    </body>
    </html>

最后附上项目代码地址：[https://github.com/MandarinOrange/form\_reg\_arr/tree/master][https_github.com_MandarinOrange_form_reg_arr_tree_master]

[2020080221222395.png]: /images/20230208/5cb7e83fe44d42dda8be76c0358ccc47.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70]: /images/20230208/adb424551ae8489a9611353ef819dfce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 1]: /images/20230208/e7e1866d3bdc42ab90da506b404bd6bb.png
[Link 1]: https://blog.csdn.net/star_of_science/article/details/107748798
[20200802212533596.png]: /images/20230208/54c4b2d6f1304c3292a89cd03000029a.png
[20200802212538903.png]: /images/20230208/5431336a18f94f20a6fc5283bb5943e4.png
[20200802212553981.png]: /images/20230208/e0a3f6ddb41c4517a068a8ac20875048.png
[20200802212607357.png]: /images/20230208/c9e8b09d54a844dbb3b012eab2e3c334.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 2]: /images/20230208/8d6fcc9b82c14244afc40ac763ce78e0.png
[20200802212707673.png]: /images/20230208/13c741d129f5415c9a7424b5d55494d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 3]: /images/20230208/bea8c5864fdb47288a884dec86d62fe8.png
[20200802212715267.png]: /images/20230208/7a7a15c2d4bf4ef8b99938b3222a57fd.png
[20200802212721722.png]: /images/20230208/00abf2a834214e729658157966ffbeba.png
[20200802212724855.png]: /images/20230208/938d42eb628f49fe90754df4be24f27c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 4]: /images/20230208/f8b145c35edf478ab9505599fbae0970.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 5]: /images/20230208/d672f01855424046b3c566684396154c.png
[https_github.com_MandarinOrange_form_reg_arr_tree_master]: https://github.com/MandarinOrange/form_reg_arr/tree/master